This time I will share jQuery Plugin and tutorial about Save Form Data As JSON Using jQuery – Form to JSON, hope it will help you in programming stack.
A tiny yet effective jQuery Form To JSON converter that converts form fields and their values into a JSON object on submit.
With this plugin, you can save and send data of HTML form directly through JSON.
How to use it:
1. Load both jQuery library and the form-to-json
plugin in the HTML document.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to//js/form-to-json.js" ></ script > |
2. Add form fields to the webpage as follows. Supported form data:
- id
- firstname
- lastname
- email
- phone
- subject
- comments
- createdDate
02 |
< div class = "form-row" > |
03 |
< label for = "firstname" >First Name: *</ label >< br /> |
04 |
< input type = "text" name = "firstname" id = "firstname" placeholder = "First Name" required> |
06 |
< div class = "form-row" > |
07 |
< label for = "lastname" >Last Name: *</ label >< br /> |
08 |
< input type = "text" name = "lastname" id = "lastname" placeholder = "Last Name" required> |
10 |
< div class = "form-row" > |
11 |
< label for = "email" >Email: *</ label >< br /> |
12 |
< input type = "email" name = "email" id = "email" placeholder = "Email" required> |
14 |
< div class = "form-row" > |
15 |
< label for = "phone" >Phone: *</ label >< br /> |
16 |
< input type = "phone" name = "phone" id = "phone" placeholder = "Phone" required> |
18 |
< div class = "form-row" > |
19 |
< label form = "subject" >Subject: *</ label >< br /> |
20 |
< input type = "text" name = "subject" id = "subject" placeholder = "Subject" required> |
22 |
< div class = "form-row" > |
23 |
< label for = "comments" >Comments:</ label >< br /> |
24 |
< textarea name = "comments" id = "comments" rows = "6" ></ textarea > |
26 |
< div class = "form-row" > |
27 |
< input type = "submit" name = "submit" value = "Submit" > |
3. Create a container to hold the results (JSON object).
1 |
< p class = "result-json-output" ></ p > |
4. Initialize the plugin and output the results on form submit.
1 |
$( '#myForm' ).formToJson( '.result-json-output' ); |
Changelog:
2020-12-14
- feature update: log the json data
2020-12-04