How to loop through all elements of a form jQuery

Question

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  gt  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  gt  input   new user form  gt  select   each function key  value      but this doesn t work  Does anyone know why this would be happening  Thanks

User · Answer

As taken from the  jquery Freenode IRC channel     each   form  serializeArray    function    field       use field name  field value          Thanks to  Cork on the channel

User · Answer

new user form  input   should be your way forward  Note the omission of the  gt  selector  A valid HTML form wouldn t allow for a input tag being a direct child of a form tag

User · Answer

What happens  if you do this way -      new user form input   new user form select   each function key  value      Refer LIVE DEMO

User · Answer

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

User · Answer

new user form   find  input   each function         your code here

User · Answer

From the jQuery  input selector page      Because  input is a jQuery extension and not part of the CSS specification  queries using  input cannot take advantage of the performance boost provided by the native DOM querySelectorAll   method  To achieve the best performance when using  input to select elements  first select the elements using a pure CSS selector  then use  filter   input      This is the best choice       new user form     filter   input   each function          your code here

User · Answer

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   amp  amp     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   amp  amp     this name       serialize         serialize   creates a text string in standard URL-encoded notation       OwnLast Bird amp OwnFirst Bob amp OutBldg 5B 5D PDG amp OutBldg 5B 5D PDA

User · Answer

pure JavaScript is not that difficult   for var i 0  i  lt  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

User · Answer

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

[jquery] How to loop through all elements of a form jQuery

Examples related to jquery

Examples related to loops