I have a button that adds new fields to my form, ans another button that submits the value of the input fields to the server side (php).
I’m trying to get the best way to send values from dynamically created form input to php.
here is what i have tried
$('#submit').on("click", function(e) {
e.preventDefault();
for(var i = 1; i <= 9; i++) {
if ($('label[name="men'+i+'"]').length) { //for each [i] check if man field exist
var manName = $('select[id="manName'+i+'"]').val();
var manAge = $('select[id="manAge'+i+'"]').val();
if (manName.length < 1) {
//show input error on the form
} else {
//set value for each manName field created
window["manName" + i] = manName;
}
if (manAge.length < 1) {
//show input error on the form
} else {
//set value for each manAge field created
window["manAge" + i] = manAge;
}
}
} else {
//if man field [i] was not created
window["manName" + i] = "";
window["manAge" + i] = "";
//set man field [i] to empty/null
}
//and more of the above to check for women and children fields
}
then in my ajax i have
$.ajax
({
type:"POST",
url: "send.php",
data: {"manName1": manName1, "manAge1": manAge1, "manName2": manName2, "manAge2": manAge2, "manName3": manName3, "manAge3": manAge3, "womanName1": womanName1, "womanAge1": womanAge1, "womanName2": womanName2, "womanAge2": womanAge2 }, //and so on for the rest of the women and children
//cache: false,
success: function(data) {
console.log(data)
}
});
this works, but freezes for a while before it responds.
So is there a proper way of doing this
2
Answers
I think that primary freeze is caused by
Uncaught RangeError: Maximum call stack size exceeded
which means that somewhere in your code you made some infinite recursion calls.But maybe you should optimize your code to minimize DOM elements scaning with jQuery.
.js-inputs-man
) to get next HTMLYou probably have some kind of error in your for loop (maybe somewhere else in the code the value of
i
is changing, or you loop is calling another loop, etc)If you wanna find where it’s failing I suggest you to remove (or comment) pieces of code until it stops freezing. Then refactor the bad part until you find the bug.
Here’s an example of how to achieve what you need without looping over the element’s ID. There’s nothing technically wrong with it, but ID purpose is to label unique elements. If you need more then one, you should use classes. This will avoid the index variable and lot’s of future trouble when the list itens are deleted.
If your list of inputs gets big enough (like over thousands of items) your users can experience some quick freezing since the JS main thread does block the UI.
In this case you should use a timeout or animation frames to avoid UI blocking.