I am new to JavaScript and ajax and I am setting up a cart and I need to get the id of the select tag and the value of the option selected, and pass through ajax. id is dynamically created because data is coming from DB
I have tried this, but issue is this works well for the first row of the data but not for all because of the "id"
<script type="text/javascript">
var subtotal = 0,
adult_price = 0,
kid_price = 0;
$('#adult_quantity').change(function() {
// Remove any previously set values
$('#subtotal, #total_box').empty();
$(this).find('option:selected').each(function() {
// Check that the attribute exist, so that any unset values won't bother
if ($(this).attr('value')) {
adult_price = $(this).data('price');
var span_Text = document.getElementById("adult-price").innerText;
adult_price = adult_price * span_Text;
subtotal = adult_price + kid_price;
$('#subtotal').append( subtotal);
}
});
});
$('#kids_quantity').change(function() {
// Remove any previously set values
$('#subtotal, #total_box').empty();
$(this).find('option:selected').each(function() {
// Check that the attribute exist, so that any unset values won't bother
if ($(this).attr('value')) {
kid_price = $(this).data('price');
var span_Text = document.getElementById("kids-price").innerText;
kid_price = kid_price * span_Text;
subtotal = adult_price + kid_price;
$('#subtotal').append( subtotal);
}
});
});
</script>
I have this code is from cart.php
<tr id="package_row">
<td>
<?php echo "<b><strong>".$row["subpackage_name"].": </strong></b>"; ?>
<?php echo $row["subpackage_detail"]; ?>
</td>
<td>
<b>Adults</b>
<select name="adult_quantity" <?php echo "id=adult_quantity".$increment; ?> onchange="getPrice(this.value)" >
<?php
for($i = 0; $i<51; $i++)
{ ?>
<option data-price=<?php echo $i; ?> value=<?php echo $i; ?>><?php echo $i; ?></option>
<?php } ?>
</select>
<br/>
Price: <span <?php echo "id=adult-price".$increment; ?>><?php echo $row["subpackage_adult_price"]; ?></span>
<b>Kids</b>
<select name="kids_quantity" <?php echo "id=kids_quantity".$increment; ?> onchange="getPrice(this.value)">
<?php
for($i = 0; $i<51; $i++)
{ ?>
<option data-price=<?php echo $i; ?> value="$i"><?php echo $i; ?></option>
<?php } ?>
</select>
<br/>
Price: <span <?php echo "id=kids-price".$increment; ?> ><?php echo $row["subpackage_kids_price"]; ?></span>
</td>
<td><input type="date"/></td>
<td><span <?php echo "id=subtotal".$increment; ?>></td>
<td><a ><span class="icon-remove" id="delete"></span></a></td>
</tr>
UpdateSubtotal();
// populate the adult quantity
$(".adultQuantity").each(function() {
var contents;
for (var i = 0; i < 51; i++) {
contents += "<option data-price=" + i + " value= " + i + ">"+i+"</option>";
}
$(this).html(contents);
});
// populate the child quantity
$(".childQuantity").each(function() {
var contents;
for (var i = 0; i < 51; i++) {
contents += "<option data-price=" + i + " value= " + i + ">"+i+"</option>";
}
$(this).html(contents);
});
// get the price for the amount of the item requested
$("body").on("change", ".adultQuantity", function() {
var quantity = $(this).children("option:selected").val(); // how many
var priceCalc = $(this).closest("td").find(".adultPrice").html(); // price per item
var price = parseInt(quantity) * parseFloat(priceCalc); // subtotal per item, this can be hidden
var adultSubTotal = $(this).closest("td").find(".adultSubtotal").html(price); // subtotal
UpdateSubtotal(); // update the row subtotal
});
// get the price for the amount of the item requested
$("body").on("change", ".childQuantity", function() {
var quantity = $(this).children("option:selected").val(); // how many
var priceCalc = $(this).closest("td").find(".childPrice").html(); // price per item
var price = parseInt(quantity) * parseFloat(priceCalc); // subtotal per item, this can be hidden
var adultSubTotal = $(this).closest("td").find(".childSubtotal").html(price); // subtotal
UpdateSubtotal(); // update the row subtotal
});
// UPDATE THE MAIN SUBTOTAL
function UpdateSubtotal(){
var subtotal = 0;
$(".adultQuantity").each(function() {
subtotal += parseFloat($(this).closest("td").find(".adultSubtotal").html());
});
$(".childQuantity").each(function() {
subtotal += parseFloat($(this).closest("td").find(".childSubtotal").html());
});
$(".subtotal").html(subtotal); // update subtotal text
}td {
border-collapse: collapse;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tr id="package_row">
<td>
<b><strong>subpackage name</strong></b>
<br>
subpackage_detail
</td>
<td>
<!-- ---------------------------------------------------------------------------- -->
<b>Adults</b>
<select name="adult_quantity" class="adultQuantity"></select>
<br/> Price:
<span class='adultPrice'>500</span>
<br> SubTotal:
<span class='adultSubtotal'>0</span>
<!-- ---------------------------------------------------------------------------- -->
<br><hr>
<b>Kids</b>
<select name="child_quantity" class="childQuantity"></select>
<br/> Price:
<span class='childPrice'>200</span>
<br> SubTotal:
<span class='childSubtotal'>0</span>
<!-- ---------------------------------------------------------------------------- -->
</td>
<td><input type="date" /></td>
<td><span class=subtotal>0</span></td>
<td><a><span class="icon-remove" id="delete">DEL</span></a></td>
</tr>
</table>If you have more than 1 row with the same id then you will only get one row working.
Also, for dynamic data you should use the jQuery On function.
change
$('#adult_quantity').change(function() {
to
$("body").on("change", "#adult_quantity", function(){ // function stuff here. });
</div>