Get the value of a dynamic elements with checkbox clicks

Question

I have an HTML form as below. What I am trying to do is to get the value of the element that has an id named type when I click the checkboxes. For my case there are two elements that have value ML and PH. But when I click, it always giving the value 'PH` only. Does anyone know why?

                                   

 <script >
      $("#multiShipment").hide(); //This is hiding multishipment button on page load
    $(document).on("click", "#multiShipment", function(e) { //This is when user click multiple tags shipment at once button
      $('#tagSerial').val($("#groupedTagSerialNumber").val()); //tagSerial number text box will be updated with the value of groupedTagSerialNumber
      e.preventDefault();
    });

    $('#selectAllBoxes').click(function(event) {
      if (this.checked) {

        $('.checkBoxes').each(function() {
          this.checked = true;
        });
      } else {
        $('.checkBoxes').each(function() {
          this.checked = false;
        });
      }
    });

    $(".checkBoxes").change(function() { //This is tracking if user changed/clicked checkbox
      var searchIDs = $(".checkBoxes:checked").map(function() { // This is mapping all the checkboxes
        if ($(this).prop('id') != "selectAllBoxes") { //As long as id of the checkbox is not selectAllBoxes (Because this is a checkbox to select/deselect all checkboxes. So don't need to get value of this 'selectAllBoxes' checkbox), this will return the value of that checkbox
          return $("#type").val();
        }
      }).get(); //Getting those values and showing in the groupedTagsSerialNumber textbox
      $('#groupedTagType').val(searchIDs); //The above codes are mapping all the checked checkboxes values (value is the serial number of this tag in plannertags table) and showing in the groupedTagSerialNumber textbox

      var numberOfCheckedCheckBoxes = $("input:checked").length; //This is finding how many checkboxes checked by user
      if (numberOfCheckedCheckBoxes > 1) { //If anything more than 1, then MultiShipment button will show
        $("#multiShipment").show();
      } else {
        $("#multiShipment").hide();
      }
    }); 
</script>

<!DOCTYPE html>
<html>

<body>
  <form method="post" class="form-inline my-2 my-lg-0" id="navBarForm">
<button type="submit" class="btn btn-info" name="multiShipment" id="multiShipment"> Multiple Actions</button>

<input type="text" name="groupedTagType" id="groupedTagType" value="" readonly>
<label class="checkboxContainer" id="selectAllCheckboxContainer">
      <input class="checkBoxes" type="checkbox" name="selectAllBoxes" id="selectAllBoxes" >
      <span class="checkmark"></span>
    </label>
  </form>
  <form method="post" id="qaForm">
<div class="card" style="background-color:'.$vtagColour.'; color: '.$vtagTextColour.'; position: relative; border-color: black; !important ">
  <div class="card-body">

    <div class="row">
      <input type="text" name="srNum" id="srNum" value="'.$srNumber.'" hidden readonly>
      <input type="text" name="currentOa" id="currentOa" value="'.$assignedOperator.'" hidden readonly>
      <input type="text" name="type" id="type" value="PH" hidden readonly>
      <input type="text" name="tpCode" value="'.$idCode.'" hidden>
      <div class="toolTipShow serialNumberShow" title="Tag serial number" data-toggle="tooltip" data-placement="bottom"><small> <i class="fas fa-sort"></i> '.$srNumber.'</small></div>
      <div class="col-sm toolTipShow" title="Device Name" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> '.$deviceName.'</div>
      <div class="col-sm toolTipShow" title="Type of Needle" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-atom"></i> '.$needleType.'</div>
      <div class="col-sm toolTipShow" title="ID Code" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-tag"></i> '.$idCode.'</div>
      <div class="col-sm toolTipShow" title="Customer Name" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-globe fa-spin"></i> '.$customerName.'</div>
      <div class="col-sm toolTipShow" title="Total Pin Count" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-thumbtack"></i> '.$totalPinCount.'</div>
      <div class="col-sm toolTipShow" title="Start Date" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-tools"></i> '.$startDate.'</div>
      <div class="col-sm toolTipShow" title="Delivery Date" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-shipping-fast"></i> '.$deliveryDate.'</div>
      <div class="col-sm toolTipShow" title="Type of order" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-info-circle"></i> PH</div>
      <div class="col-sm toolTipShow" title="Current Operator" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-user"></i> '.$assignedOperator.'</div>
      <label class="checkboxContainer">
                      <input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="'.$srNumber.'">
                      <span class="checkmark"></span>
                    </label>
    </div>
  </div>


  </form>
  <br>
  <form method="post" id="qaForm">
<div class="card" style="background-color:'.$vtagColour.'; color: '.$vtagTextColour.'; position: relative; border-color: black; !important ">
  <div class="card-body">

    <div class="row">
      <input type="text" name="srNum" id="srNum" value="'.$srNumber.'" hidden readonly>
      <input type="text" name="currentOa" id="currentOa" value="'.$assignedOperator.'" hidden readonly>
      <input type="text" name="type" id="type" value="ML" hidden readonly>
      <input type="text" name="tpCode" value="'.$idCode.'" hidden>
      <div class="toolTipShow serialNumberShow" title="Tag serial number" data-toggle="tooltip" data-placement="bottom"><small> <i class="fas fa-sort"></i> '.$srNumber.'</small></div>
      <div class="col-sm toolTipShow" title="Device Name" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> '.$deviceName.'</div>
      <div class="col-sm toolTipShow" title="Type of Needle" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-atom"></i> '.$needleType.'</div>
      <div class="col-sm toolTipShow" title="ID Code" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-tag"></i> '.$idCode.'</div>
      <div class="col-sm toolTipShow" title="Customer Name" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-globe fa-spin"></i> '.$customerName.'</div>
      <div class="col-sm toolTipShow" title="Total Pin Count" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-thumbtack"></i> '.$totalPinCount.'</div>
      <div class="col-sm toolTipShow" title="Start Date" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-tools"></i> '.$startDate.'</div>
      <div class="col-sm toolTipShow" title="Delivery Date" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-shipping-fast"></i> '.$deliveryDate.'</div>
      <div class="col-sm toolTipShow" title="Type of order" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-info-circle"></i>ML</div>
      <div class="col-sm toolTipShow" title="Current Operator" data-toggle="tooltip" data-placement="bottom"><i class="fas fa-user"></i> '.$assignedOperator.'</div>
      <label class="checkboxContainer">
                      <input class="checkBoxes" type="checkbox" name="checkBoxArray[]" value="'.$srNumber.'">
                      <span class="checkmark"></span>
                    </label>
    </div>
  </div>

  </form>

</body>

</html>

@AliSheikhpour I think you need at least this much code to understand and visualize what is going on. In fact I already minified. — Anu, Sep 30 '20 at 07:15
@Don'tPanic: I think I couldn't get the answer I need. Anyway there is a working solution already replied — Anu, Sep 30 '20 at 07:17

Pranav Rustagi · Accepted Answer · 2020-09-30T07:19:19.100

2

What you are getting is the value of first checkbox. This is how jQuery works. If you want to make changes in many elements, you can select them and apply changes in one go. But, when you use things with specificity, like "attr", or "value" in this case, it just returns the value from first selection. To get what you want, just replace :

return $("#type").val();

with

return $(this).closest('.row').find('[name=type]').val();

NOTE : I could have used #type but I did not. This is because in your code, many elements share the same id which is a bad practice. Id's must be unique. So please either replace your id's with classes, or make some other changes.

edited Sep 30 '20 at 07:19

answered Sep 30 '20 at 07:15

Pranav Rustagi

2,604
1
5
18

1

Please read the `note` part as well. :) – Pranav Rustagi Sep 30 '20 at 07:17
Alright. Got it – Anu Sep 30 '20 at 07:18

Get the value of a dynamic elements with checkbox clicks

1 Answers1