Not able to get total of dynamically generated fields in html
Question
I'm trying to create an application in which I have to add dynamic fields and total of the dynamic fields. I'm able to generate dynamic fields with the below code but I'm not able to get the total of all the dynamically generated fields.
HTML CODE
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
<div>total <lable id='total'></lable></div>
</form>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$(".name_list").keyup(function(){
//alert("sample");
var sum =0;
$(".name_list").each(function(){
sum += Number($(this).val());
});
$("#total").val(sum);
});
**//For Delete**
$(document).on('click', '.btn_remove', function(){
var total = $(".total").val();
var sum = 0;
$(".name_list").each(function(){
sum += Number($(this).val());
});
var New_total = sum - total;
$("#total").text(New_total);
});
});
</script>
3 answers
solution1
1 ACCPTED 2018-05-24 05:08:54
Since the fields and buttons are dynamically generated. You have to delegate the events.
$("#dynamic_field").on('keyup', '.name_list', function(){
var sum =0;
$(".name_list").each(function(){
sum += Number($(this).val());
});
$("#total").text(sum); //changed val() to text()
});
Please go through this for more info Event Delegation
solution2
1 2018-05-24 05:11:58
Delegate Delegate Delegate events
$("#dynamic_field").on('keyup', '.name_list', function(){
var sum =0;
$(".name_list").each(function(){
sum += Number($(this).val());
});
$("#totalInput").val(sum);
$("#total").text(sum);
});
then create a hidden filed with the a id and name in the form
<div>total
<label id='total'></label>
<input id="totalInput" name="total">
</div>
so you can have access to the total in the ajax event and php
solution3
0 2018-05-24 05:09:23
I am not sure where you trying to check your results? In your PHP which is not posted?
Here's a codepen of your example: https://codepen.io/anon/pen/NMVgYj
and I am looking at this part specifically:
$('#submit').click(function(){
console.log('here');
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
I checked my network in inspect tools to see what's sent:
name[] {…} 0 a 1 b 2 c
You could do a count($_POST['name']) to see how many items you got back, and foreach through the values...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.