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 src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin = "anonymous" > < /script> <
script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin = "anonymous" > < /script> <
script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity = "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin = "anonymous" > < /script> <
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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>JS Bin</title>
</head>
<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>
Aucun commentaire:
Enregistrer un commentaire