I am creating a Polymer application in which search button has several inputs from input boxes. And from that collection of that input boxes search button should perform search operation considering all inputs.
following is the image for scenario -
{ iron-form } is one of the option for that but I want something new and with ease. Please help me.
I don't have your HTML, so I'm just going to be using elements which I think you will have within your document.
Test this out:
Pure JavaScript:
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function(){ // on form submit
var input = document.querySelectorAll("input");
for(var i = 0; i < input.length; i++){ // loop through each input on the page
alert(input[i].value); // will alert the value of the input
}
return false; // stop form from posting
}
jQuery:
$("form").submit(function(){ // on form submit
$("input").each(function(){ // foreach input
var value = $(this).val(); // grab its value
alert(value); // output its value
});
return false; // prevent form from posting
});
So when the form submits, it will iterate through each input, and output each value through an alert.
Hope this helps! :-)
Since you tagged this with the Polymer tag there is also a Polymer iron-form specific way to handle this. @Caelan is correct but this will not work with Polymer elements (or custom elements). Examples of these elements are paper-input andpaper-checkbox. See Paper Elements for a list of all customized inputs.
<iron-form></iron-form comes with a property method serialize and validate which you can use to collect all inputs (including custom elements) in one function call.
See iron-form.serialize documentation
var form = document.querySelector('iron-form')
form.onsubmit = function(event) {
event.preventDefault();
var data = form.serialize()
// Do something with data
// return false; // could use instead of event.preventDefault()
}
See preventDefault vs return false thread on stack overflow both will work in your case since you do not care about bubbling events.
