I was just wondering what the best way of looping through all the child elements of a form would be? My form contains both input and select elements.
At the moment I have:
success: function(data) {
$.each(data.details, function(datakey, datavalue) {
$('#new_user_form > input').each(function(key, value) {
if($(this).attr('id') == datakey) {
$(this).val(datavalue);
}
});
});
}
This only loops through the input elements of the form though and I want to include the select elements too:
I have tried:
$('#new_user_form > input, #new_user_form > select').each(function(key, value) {
but this doesn't work. Does anyone know why this would be happening? Thanks!
pure JavaScript is not that difficult:
for(var i=0; i < form.elements.length; i++){
var e = form.elements[i];
console.log(e.name+"="+e.value);
}
Note: because form.elements is a object for-in loop does not work as expected.
Answer found here (by Chris Pietschmann), documented here (W3S).
As taken from the #jquery Freenode IRC channel:
$.each($(form).serializeArray(), function(_, field) { /* use field.name, field.value */ });
Thanks to @Cork on the channel.
$('#new_user_form').find('input').each(function(){
//your code here
});
I have found this simple jquery snippet, to be handy for choosing just the type of selectors I want to work with:
$("select, input").each(function(){
// do some stuff with the element
});
$('#new_user_form :input')
should be your way forward. Note the omission of the >
selector. A valid HTML form wouldn't allow for a input tag being a direct child of a form tag.
I'm using:
$($('form').prop('elements')).each(function(){
console.info(this)
});
It Seems ugly, but to me it is still the better way to get all the elements with jQuery
.
What happens, if you do this way:-
$('#new_user_form input, #new_user_form select').each(function(key, value) {
Refer LIVE DEMO
Do one of the two jQuery serializers inside your form submit to get all inputs having a submitted value.
var criteria = $(this).find('input,select').filter(function () {
return ((!!this.value) && (!!this.name));
}).serializeArray();
var formData = JSON.stringify(criteria);
serializeArray() will produce an array of names and values
0: {name: "OwnLast", value: "Bird"}
1: {name: "OwnFirst", value: "Bob"}
2: {name: "OutBldg[]", value: "PDG"}
3: {name: "OutBldg[]", value: "PDA"}
var criteria = $(this).find('input,select').filter(function () {
return ((!!this.value) && (!!this.name));
}).serialize();
serialize() creates a text string in standard URL-encoded notation
"OwnLast=Bird&OwnFirst=Bob&OutBldg%5B%5D=PDG&OutBldg%5B%5D=PDA"
Source: Stackoverflow.com