How to pass a Javascript variable to PHP to store in MYSQL database-CodePudding

I'm trying to pass a javascript variable to PHP so when I submit my form, it will save the variable in my MYSQL database.

Heres the HTML:

function replyLink(element) {
  document.getElementById('displayForm').style.display = "block";
  var replyId = element.getAttribute("data-replyid");

  console.log(replyId)
}

function closeLink() {
  document.getElementById('displayForm').style.display = "none";
}

<a href='javascript:void(0);' data-replyid='1' class='replyLink' onclick='replyLink(this)' />[Reply]</a>

<div id='displayForm' style='display:none;'>
  <div id='replyTitle'>
    <label>Write a reply</label>

    <a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
  </div>

  <form action='' method='POST' accept-charset='utf-8' enctype='multipart/form-data'>
    <table id='postForm'>
      <tr>
        <td class='replyForm_title' sty>Name</td>
        <td><input type='text' name='commentName'></td>
      </tr>
      <tr>
        <td class='replyForm_title'>Comment</td>
        <td><textarea cols='48' rows='4' wrap='soft' name='commentText'></textarea></td>
      </tr>
      <tr>
        <td></td>
        <td><input type='submit' name='commentBtn' value='Reply' onclick='submitForm()'></td>
      </tr>
    </table>
  </form>
</div>

If you run the code, you can see that the form pops up, and returns the data-attribute value of '1'. I'd like to insert that variable 1 into a MYSQL database. Would anyone guide me? Thanks. (ALSO, code snippet runs. So you have an understanding of how it works.)

CodePudding user response：

Add a hidden input to the form, and put replyId into its value.

Then in PHP use $_POST['replyId'] to get the value.

function replyLink(element) {
  document.getElementById('displayForm').style.display = "block";
  var replyId = element.getAttribute("data-replyid");
  document.getElementById('replyId').value = replyId;
  console.log(replyId)
}

function closeLink() {
  document.getElementById('displayForm').style.display = "none";
}

<a href='javascript:void(0);' data-replyid='1' class='replyLink' onclick='replyLink(this)' />[Reply]</a>

<div id='displayForm' style='display:none;'>
  <div id='replyTitle'>
    <label>Write a reply</label>

    <a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
  </div>

  <form action='' method='POST' accept-charset='utf-8' enctype='multipart/form-data'>
    <table id='postForm'>
      <tr>
        <td class='replyForm_title' sty>Name</td>
        <td><input type='text' name='commentName'></td>
      </tr>
      <tr>
        <td class='replyForm_title'>Comment</td>
        <td><textarea cols='48' rows='4' wrap='soft' name='commentText'></textarea></td>
      </tr>
      <tr>
        <td><input type="hidden" name="replyId" id="replyId"></td>
        <td><input type='submit' name='commentBtn' value='Reply' onclick='submitForm()'></td>
      </tr>
    </table>
  </form>
</div>