How can I get all a form s values that would be submitted without submitting

Question

I have a form on my page and am dynamically adding controls to the form with Javascript JQuery   At some point I need to get all the values in the form on the client side as a collection or a query string   I don t want to submit the form because I want to pass the form values along with other information that I have on the client to a back-end WCF Ajax service method   So I m trying to figure out how to capture all the values in the same type of collection that the form would normally send to the server if the form was actually submitted   I suspect there is an easy way to capture this  but I m stumped

User · Answer

In straight Javascript you could do something similar to the following:

var kvpairs = [];
var form = // get the form somehow
for ( var i = 0; i < form.elements.length; i++ ) {
   var e = form.elements[i];
   kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
}
var queryString = kvpairs.join("&");

In short, this creates a list of key-value pairs (name=value) which is then joined together using "&" as a delimiter.

User · Answer

Thanks Chris   That s what I was looking for   However  note that the method is serialize     And there is another method serializeArray   that looks very useful that I may use   Thanks for pointing me in the right direction   var queryString       frmAdvancedSearch   serialize    alert queryString    var fieldValuePairs       frmAdvancedSearch   serializeArray      each fieldValuePairs  function index  fieldValuePair        alert  Item     index     is      fieldValuePair name         fieldValuePair value

User · Answer

You can get the form using a document getElementById and returning the elements   array   Here is an example   You can also get each field of the form and get its value using the document getElementById function and passing in the field s id

User · Answer

For those who don t use jQuery  below is my vanilla JavaScript function to create a form data object that can be accessed like any common object  unlike new FormData form     x000D   x000D  var oFormData     x000D     username    Minnie   x000D     phone    88889999   x000D     avatar       x000D     gender    F   x000D     private   1  x000D     friends     Dick    Harry    x000D     theme    dark   x000D     bio    A friendly cartoon mouse   x000D     x000D   x000D  function isObject arg    x000D    return Object prototype toString call arg      object Object    x000D    x000D   x000D  function formDataToObject elForm    x000D    if   elForm instanceof Element  return  x000D    var fields   elForm querySelectorAll  input  select  textarea    x000D      o       x000D    for  var i 0  imax fields length  i lt imax    i    x000D      var field   fields i   x000D        sKey   field name    field id  x000D      if  field type    button     field type    image     field type    submit      sKey  continue  x000D      switch  field type    x000D        case  checkbox   x000D          o sKey     field checked  x000D          break  x000D        case  radio   x000D          if  o sKey    undefined  o sKey        x000D          if  field checked  o sKey    field value  x000D          break  x000D        case  select-multiple   x000D          var a       x000D          for  var j 0  jmax field options length  j lt jmax    j    x000D            if  field options j  selected  a push field options j  value   x000D            x000D          o sKey    a  x000D          break  x000D        default  x000D          o sKey    field value  x000D        x000D      x000D    alert  Form data  n n    JSON stringify o  null  2    x000D    return o  x000D    x000D   x000D  function populateForm o    x000D    if   isObject o   return  x000D    for  var i in o    x000D      var el   document getElementById i     document querySelector   name     i         x000D      if  el type    radio   el   document querySelectorAll   name     i         x000D      switch  typeof o i     x000D        case  number   x000D          el checked   o i   x000D          break  x000D        case  object   x000D          if  el options  amp  amp  o i  instanceof Array    x000D            for  var j 0  jmax el options length  j lt jmax    j    x000D              if  o i  indexOf el options j  value  gt -1  el options j  selected   true  x000D              x000D            x000D          break  x000D        default  x000D          if  el instanceof NodeList    x000D            for  var j 0  jmax el length  j lt jmax    j    x000D              if  el j  value   o i   el j  checked   true  x000D              x000D            else   x000D            el value   o i   x000D            x000D        x000D      x000D    x000D  form   x000D    border  1px solid  000  x000D    x000D   x000D  tr   x000D    vertical-align  top  x000D    x000D   lt form id  profile  action  formdata html  method  get  gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td gt  lt label for  username  gt Username  lt  label gt  lt  td gt  x000D         lt td gt  lt input type  text  id  username  name  username  value  Tom  gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label for  phone  gt Phone  lt  label gt  lt  td gt  x000D         lt td gt  lt input type  number  id  phone  name  phone  value  7672676  gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label for  avatar  gt Avatar  lt  label gt  lt  td gt  x000D         lt td gt  lt input type  file  id  avatar  name  avatar  gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label gt Gender  lt  label gt  lt  td gt  x000D         lt td gt  x000D           lt input type  radio  id  gender-m  name  gender  value  M  gt   lt label for  gender-m  gt Male lt  label gt  lt br gt  x000D           lt input type  radio  id  gender-f  name  gender  value  F  gt   lt label for  gender-f  gt Female lt  label gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label for  private  gt Private  lt  label gt  lt  td gt  x000D         lt td gt  lt input type  checkbox  id  private  name  private  gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label for  friends  gt Friends  lt  label gt  lt  td gt  x000D         lt td gt  x000D           lt select id  friends  name  friends  size  2  multiple gt  x000D             lt option gt Dick lt  option gt  x000D             lt option gt Harry lt  option gt  x000D           lt  select gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label for  theme  gt Theme  lt  label gt  lt  td gt  x000D         lt td gt  x000D           lt select id  theme  name  theme  gt  x000D             lt option value    gt -- Select -- lt  option gt  x000D             lt option value  dark  gt Dark lt  option gt  x000D             lt option value  light  gt Light lt  option gt  x000D           lt  select gt  x000D         lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt  lt label for  bio  gt Bio  lt  label gt  lt  td gt  x000D         lt td gt  lt textarea id  bio  name  bio  gt  lt  textarea gt  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td colspan  2  gt  x000D           lt input type  submit  value  Submit  gt  x000D           lt button gt Cancel lt  button gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  form gt  x000D   lt p gt  x000D     lt button onclick  formDataToObject document getElementById  profile     gt  lt strong gt Convert to Object lt  strong gt  lt  button gt  x000D     lt button onclick  populateForm oFormData   gt  lt strong gt Populate Form lt  strong gt  lt  button gt  x000D   lt  p gt  x000D   x000D   x000D    You can also play around with it in this pen  http   codepen io thdoan pen EyawvR  UPDATE  I also added a function to populate the form with the object returned by formDataToObject

User · Answer

I think the following code will take care of only TextFields in the form   var str       formId   serialize      To add other types of input type we can use      input type  checkbox    input type  radio     on   click   functionToSerialize       select   on   change   functionToSerialize

User · Answer

If your form tag is like   lt form action    method  post  id  BookPackageForm  gt    Then fetch the form element by using forms object   var formEl   document forms BookPackageForm    Get the data from the form by using FormData objects   var formData   new FormData formEl     Get the value of the fields by the form data object   var name   formData get  name

User · Answer

You can use this simple loop to get all the element names and their values   var params       for  var i 0  i lt document FormName elements length  i          var fieldName   document FormName elements i  name     var fieldValue   document FormName elements i  value         use the fields  put them in a array  etc         or  add them to a key-value pair strings         as in regular POST     params    fieldName         fieldValue     amp          send the  params  variable to web service  GET request

User · Answer

The jquery form plugin offers an easy way to iterate over your form elements and put them in a query string   It might also be useful for whatever else you need to do with these values   var queryString       myFormId   formSerialize      From http   malsup com jquery form  Or using straight jquery   var queryString       myFormId   serialize

User · Answer

Depending on the type of input types you re using on your form  you should be able to grab them using standard jQuery expressions   Example      change forms 0  to the form you re trying to collect elements from     or remove it  if you need all of them var input elements      input  textarea   document forms 0      Check out the documentation for jQuery expressions on their site for more info  http   docs jquery com Core jQuery expressioncontext

User · Answer

Thank you for your ideas  I created the following for my use  Demo available at http   mikaelz host sk helpers input steal html  function collectInputs         var forms   parent document getElementsByTagName  form        for  var i   0 i  lt  forms length i              forms i  addEventListener  submit   function                 var data                       subforms   parent document getElementsByTagName  form                 for  x   0   x  lt  subforms length  x                      var elements   subforms x  elements                  for  e   0  e  lt  elements length  e                          if  elements e  name length                            data push elements e  name         elements e  value                                                                     console log data join   amp                     attachForm data join   amp                false           window onload   collectInputs

[javascript] How can I get all a form's values that would be submitted without submitting

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to ajax

Examples related to forms