Javascript document.getElementById function not returning checkbox value to HTML form-CodePudding

I have been searching for an answer everywhere but just can not find what I need.

I have a webpage that has an HTML table on the left column and an HTML form on the right column. When I click on a row in the table on the left I want it to display the values in the form on the right.

I have this working perfectly for the text fields on the form, but not for the two checkboxes. My javascript will return either true or false or checked and unchecked to the document.getElementById within the script itself by using alert(); but I have no idea what it needs to allow the checkboxes to display these values. I thought the document.getElementById would return the values but it seems it does not.

I have tried all kinds of conveluted ways to get this to work but can not seem to get the correct code needed.

I am new to all this so there is most likely something really simple I am missing.

This is the HTML form code:

<div >
  <table>
    <tr></tr>
    <tr>
      <div >
        <form autocomplete="off" name="lockform"  action="includes/lockinventory.inc.php"
          method="post">
          <label id="inventory" for="locknum">Lock Number</label>
          <input id="invlocknum" type="text" name="locknum" value="" required>
          <label id="inventory" for="locktype">Lock Type</label>
          <input id="invlocktype" type="text" name="locktype" value="" required>
          <label id="inventory" for="keycode">Key Code</label>
          <input id="invkeycode" type="text" name="keycode" value="" required>

          <label id="inventory" for="lockengraved">Lock Engraved</label>
          <input id="invlockengraved" type="hidden" name="lockengraved" value="0">
          <input id="invlockengraved" type="checkbox" name="lockengraved" value="1">

          <label id="inventory" for="lockmastered">Lock Mastered</label>
          <input id="invlockmastered" type="hidden" name="lockmastered" value="0">
          <input id="invlockmastered" type="checkbox" name="lockmastered" value="1">

          <label id="inventory" for="locknote">Lock Note</label>
          <textarea id="inventorynote" name="locknote" rows="5" cols="60"></textarea>

          <div >
            <?php
              if (isset($_GET["error"])) {
                  if($_GET["error"] == "lockexists") {
                      echo "<p>Lock Already In Inventory!</p>";
                  }
                  else if ($_GET["error"] == "lockexistsfailed") {
                      echo "<p>Lock Already In Inventory!</p>";
                  }
              }
            ?>
          </div>

          <input id="bt6" type="submit" name="submit" value="Save">
          <button id="bt6" type="reset" name="button">Cancel</button>
        </form>
      </div>
    </tr>
  </table>
</div>

This is my JavaScript code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<script language="javascript"></script>

<script>
  $(function () {
    $('#lockTable td').click(function () {

      var currentRow = $(this).closest("tr");
      var locknum = currentRow.find("td:eq(0)").text();
      var locktype = currentRow.find("td:eq(1)").text();
      var keycode = currentRow.find("td:eq(2)").text();
      var engraved = currentRow.find("td:eq(3)").find(":checkbox");
      var mastered = currentRow.find("td:eq(4)").find(":checkbox");
      var locknote = currentRow.find("td:eq(5)").text();

      var lockengraved = engraved.prop("checked");
      if (lockengraved === true) {
        $grved = "checked";
      } else {
        $grved = "unchecked";
      }

      var lockmastered = mastered.prop("checked");
      if (lockmastered === true) {
        $msted = "checked";
      } else {
        $msted = "unchecked";
      }

      document.getElementById('invlocknum').value = locknum;
      document.getElementById('invlocktype').value = locktype;
      document.getElementById('invkeycode').value = keycode;
      document.getElementById("invlockengraved").value = $grved;
      document.getElementById('invlockmastered').value = $msted;
      document.getElementById('inventorynote').value = locknote;

      alert(document.getElementById("invlockengraved").value);
      alert(document.getElementById("invlockmastered").value);

    });
  });
</script>

<p id="invlocknum"></p>
<p id="invlocktype"></p>
<p id="invkeycode"></p>
<p id="invlockengraved"></p>
<p id="invlockmastered"></p>
<p id="invlocknote"></p>
    
<p id="info"></p>
<p id="result"></p>

CodePudding user response：

I found the answer to my issue. I had to modify my if statement in the Javascript to the following. Works the way I want it to. Thanks to all that helped.

var lockengraved = engraved.prop("checked");
    if (lockengraved === true) {
      document.getElementById("invlockengraved").checked = lockengraved;
    }else if (lockengraved === false) {
      document.getElementById("invlockengraved").checked = lockengraved;
    }