How to get form data using JavaScript/jQuery?
The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data.
Syntax:
$(selector).serializeArray()
Parameter: It does not accept any parameter.
Return Value: It returns all the value that is inside the inputs fields.
Example:
<!DOCTYPE html> < html > < head > < script src = </ script > < script > $(document).ready(function() { $("button").click(function() { var x = $("form").serializeArray(); $.each(x, function(i, field) { $("#output").append(field.name + ":" + field.value + " "); }); }); }); </ script > < style > #GFG { width: 300px; padding: 50px; height: 150px; border: 2px solid green; } </ style > </ head > < body > < div id = "GFG" > < form action = "#" > Name: < input type = "text" style = "margin: 10px;" name = "Name" > < br > </ form > < button >Submit</ button > </ div > < div id = "output" ></ div > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.