Develop Reference

dynamically add input field value jQuery

html code we can get the value
<input type="text" name="value1[]" id="value1"/>
<input type="mail" name="value2[]" id="value2"/>
<input type="text" name="total[]" id="total" />
i can try with this in jQuery i can get only html value result, after add new row i can't get the value
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td>Item1</td>';
cols += '<td><input type="text" class="form-control" name="value1[]" id="value2' + counter + '"></td>';
cols += '<td><input type="text" class="form-control" name="foreign_milion[]" id="foreign_milion_' + counter + '"></td>';
cols += '<td><input type="text" readonly class="form-control" name="total_milion[]" id="total_"' + counter + '"></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("#value2").keyup(function () {
var value1 = $("#value1").val();
var value2 = $("#value2").val();
var totalincome = parseInt(value1) + parseInt(value2);
//alert(totalincome);
$("#total").val(totalincome);
})
});

First of all the id must be unique in the same document, else you'll end up with incorrect HTML code, so you need to replace the ids with common classes instead in your code as a first step.
Then you need to use event delegation to attach the event to your inputs since the must of them are created dynamically with the JS code.
I prefer the use of input event instead of keyup when you track the user inputs, so the event will be something like:
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
});
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td>Item ' + counter + '</td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="order-list">
<tr>
<td>Item </td>
<td><input type="text" class="form-control calculated_value" name="value1[]"></td>
<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>
<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>
</tr>
</table>
<button id="addrow">Add row</button>

I have tried this one, may be this is what you are looking into.
please take a look at the snippet.
jQuery(document).ready(function () {
var count = 1;
jQuery('#add').on('click', function(){
var el = `<section id="inpFields">
<input type="text" name="value1[]" id="value`+count+`" placeholder="value `+count+`"/>
<input type="text" name="value2[]" id="value2`+count+`" placeholder="value `+count+`"/>
<input type="text" name="total[]" id="total`+count+`" placeholder="total" />
<button class="totalBtn" data-id="`+count+`">Total</button>
</section>`;
jQuery('#inpFields').append(el);
count++;
});
jQuery('#add').click();
jQuery(document).on('click', '.totalBtn', function(){
var i = this.dataset.id;
var value1 = jQuery('#value'+i).val();
var value2 = jQuery('#value2'+i).val();
var totalincome = parseInt(value1) + parseInt(value2);
//alert(totalincome);
jQuery('#total'+i).val(totalincome);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="add">Add Fields</button>
<section id="inpFields">
</section>

jQuery validations not working for dynamically appended form

I'm appending a form after successful AJAX call. When i'm trying to put validations by using id of that form its not working. Below is the example of my code.
HTML
<div id="dynamic_form"></div>
JavaScript
tab += '<form id="edu_edit_datails" method="post" action="" name="edu_edit_datails" enctype="multipart/form-data">';
tab += '<div class="form-group">';
tab += '<label for="course">Course:</label>';
tab += '<input type="text" class="form-control" id="course" value="" placeholder="Enter your Course" name="course">';
tab += '</div>';
tab += '<button type="button" class="btn btn-primary " id="submit_edit_edu_dtls">Submit</button>';
tab += '</form>';
$('#dynamic_form').html(tab);
Validation on click
$(document).on('click', '#submit_edit_edu_dtls' , function(e){
if($("#edu_edit_datails").valid() == false) {
alert("fail");
return false;
} else {
alert(success);
return true;
}
});
$("#edu_edit_datails").validate({
rules: {
course: "required"
}
})
Any help is greatly appreciated! Thanks in advance.

You just need to validate the form (.validate) before you use the .valid()
var tab="";
tab += '<form id="edu_edit_datails" method="post" action="" name="edu_edit_datails" enctype="multipart/form-data">';
tab += '<div class="form-group">';
tab += '<label for="course">Course:</label>';
tab += '<input type="text" class="form-control" id="course" value="" placeholder="Enter your Course" name="course">';
tab += '</div>';
tab += '<button type="button" class="btn btn-primary " id="submit_edit_edu_dtls">Submit</button>';
tab += '</form>';
$('#dynamic_form').html(tab);
$("#edu_edit_datails").validate({
rules: {
course: "required"
}
})
$(document).on('click', '#submit_edit_edu_dtls' , function(e){
if($("#edu_edit_datails").valid() == false){
alert("fail");
return false;
}else{
alert("success");
return true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<diV id="dynamic_form"></div>

i have add dynamic row using jquery now i want to add those column

i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})

First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps

Get id or class name of particular input(child) elements of a div in jquery

Using bellow code i am dynamically created the table.
In this table the 4th td have dynamic data with div what i want is
When user select textbox want to remove child div then append textbox or
if he select fileupload then append upload field in that td tag only
//some lines of table opening and header code comes here
$.each(data,function(key,value){
MoreTag += '<tr><td style="width: 10px">'+value.Id+'</td>';
MoreTag += '<td>'+value.installment_number+'</td>';
MoreTag += '<td>'+value.instal_title+'</td>';
//4th td element
MoreTag += '<td id="tabledata">'+
'<div id="fields'+value.installment_number+'">'+
'<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox"> Text Box</label>'+
' <label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload"> File Upload</label>'+
'</div></td>';
MoreTag += '<td>'+value.instal_amount+'</td></tr>';
});
MoreTag += '</tbody>';
MoreTag += '</table>';
MoreTag += '</div>';
$('#listofstudloanschedules').append(MoreTag);
I am tring with this script
var childinput = '';
$(document).on('change',"#tabledata",function(){
var name = $(this).children("div").prop("id");
$("#" + name + " input").click(function(){
childinput = $(this).attr("id");
alert(childinput);
});
});
By this i got perticular field id or class name.
problem
But for every rows 4th td the first click was not alerting..

let me give you simple code snippet, but you have to modify value of input type radio button as per your requirement
$(document).ready(function() {
$('input[type=radio]').change(function() {
if (this.value == 'textbox') {
alert("textbox");
}
else if (this.value == 'uploadfile') {
alert("uploadfile");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<td id="tabledata">
<div id="text_fields">
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox" value="textbox">Text Box</label>
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload" value="uploadfile">Upload File</label>
</div>
</td>

You can get id of upload input by using jquery .on("click") event like following.
$("div#text_fields input").on('click',function(){
var name=$(this).attr("id");
console.log(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="tabledata">
<div id="text_fields">
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="textbox" class="textbox">Text Box</label>
<label style="font-weight:normal"><input name="resp'+value.installment_number+'" type="radio" id="fileupload" class="fileupload">Upload File</label>
</div>
</td>

This is the right solution as per my requirement.
$(document).on('change',"#tabledata",function(){
var childinput=$(this).find("div input:checked").prop("id");
alert(childinput);
});

JavaScript added HTML Form does not submit

I want to add a form including an input text using javascript.
the adding works fine, but if i click the submit button nothing happens.
Here is the code:
if (document.getElementById("run_name_query_box") == null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
}
the run_name_querycreator() function sets the value of the input.
I already use almost the same thing somewhere else and there it works:
'<form method="post" action=query name="query">' +
'<input style="font-size:14px" value = "Search Database" onclick = "combine_query()" id="search" type="submit" name="search" >' +
'</form>'
If i copy the plain html part just into the main html body it works too.
This is all part of mako file used in a pyramid interface.

I think your HTML is malformed. I don't think a form element can be a child of a table element.
Your code should be like this,
var run_name_search = '<fieldset id="run_name_query_box">' +
'<form method="post" action=query name="query_runname_name">' +
'<table>'+
'<tr><td>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ';
$("#query_type_box").append(run_name_search);
This is your code generated HTML,
<fieldset id="run_name_query_box">
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<form method="post" action="query" name="query_runname_name"></form>
</tr>
</tbody>
</table>
</fieldset>
There is no form elements in within your <form>. (Including your form submit button). Then How it will work?
Your code should generate HTML like this to work,
<fieldset id="run_name_query_box">
<form method="post" action="query" name="query_runname_name">
<table>
<tbody>
<tr>
<td>
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
See this FIDDLE
In this fiddle You can see BEFORE FIX section dynamic elements generated by you.
In AFTER FIX section you can see the correct html format.
FYI, When you are working with Dynamic html, Check you dynamically created html in developers tool.

Working example: http://jsfiddle.net/awesome/6hh8r/
Description: Added missing onclick function run_name_querycreator() in global namespace and connected it to .post() with apparent form data.
window.run_name_querycreator = function () {
//alert($('#run_name').val());
var x = '{"run_name":"' + $('#run_name') + '"}'
$.ajax({
type: "POST",
url: $form.attr('action'),
data: x,
success: alert('success'),
dataType: 'json'
});
}
$(function () {
if (document.getElementById("run_name_query_box") === null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
$form = $('[name="query_runname_name"]');
$form.submit(function (e) {
e.preventDefault();
});
}
});