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.

Solution 1

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();

Solution 2

If your form tag is like

<form action="" method="post" id="BookPackageForm">

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');

Solution 3

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.

Solution 4

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 + "]");
});

Solution 5

You can use this simple loop to get all the element names and their values.

var params = '';
for( var i=0; i<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 + '&';
}

// send the 'params' variable to web service, GET request, ...

View more solutions

Comments

[SpoonMeiser]

Does this work correctly for checkboxes, radio buttons and multi-selects?

[markom]

AFAIK - yes, because checkbox and radio button have 'name' and 'value' attributes/properties. The only one I'm not really sure is Listbox, because it has a child collection with Option elements.

[Slemgrim]

first line must be var params =''; to avoid 'undefined' in the final string

[Trix]

the link is not working...

[jo_wil]

@DamirOlejar if you are in a submit function evt.target should work

[Dustin Poissant]

The problem with this, is that when using checkboxes, the data doesn't show up at all, I would rather it just be set to false.

[Erics]

@SpoonMeiser @muerte No. This grabs the value attribute of each element, regardless of the state of the checked attribute. You'll get checkboxname=valueattribute for each checkbox, and radioname=valueattribute for each radio. The latter is even more broken if you put them into an array, as each radio element will overwrite the previous, and you're left with array['radioname']=lastvalueattribute.

[Rodrigo]

@DamirOlejar If you have <button onclick='save(this)'>, then in your function save(who) you can have var form = who.form

[Freddy Sidauruk]

for textarea doesn't get right value

[Martin M.]

Warning: e.value always returns on for checkboxes! Workaround: Insert var value = e.getAttribute("type") == "checkbox" ? e.checked : e.value and use value instead of e.value.

[Self Evident]

NOTICE: "e.value always returns on for checkboxes!" No it doesn't! Just set the value attribute for the checkbox, either directly in the html, or via js. Ex: <input type="checkbox" value="true">

[Darren]

This seems to work the best for me out of all these answers. Thanks

[HaroldtheSquare]

Note that formData.get() doesn't have full browser support: caniuse.com/mdn-api_formdata_get

[Eugen Konkov]

Accessing form controls

[Olu Adeyemo]

As at this writing, it has a support of 94.55% from https::caniuse.com/mdn-api_formdata_get. So I think thats fine. By the way, who still develops for Internet Explorer?