Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 726
Howard Pinsley Avatar asked Feb 25 '09 22:02

Howard Pinsley


People also ask

How do you avoid double submission?

To disable just the submit button(s), you could do this: $('button[type=submit], input[type=submit]'). prop('disabled',true);

How can I get form values after submitting?

To get form values on submit, we can pass in an event handler function into the onSubmit prop to get the inputted form values. We use the useState hook so that we can use the phone state as the value of the value prop.

What is FormData ()?

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch() or XMLHttpRequest. send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data" .


1 Answers

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'); 
like image 80
Apoorv Nag Avatar answered Sep 30 '22 17:09

Apoorv Nag