HTML Form Data into a JSON file

Question

Having difficult time finding solution way to take html form data and transform it into json file using javascript

Looked many places but unable to find anything.

<!DOCTYPE html>
<html>
<body>

 <p>Enter names in the fields, then click "Submit" to submit the form: 
 </p>

 <form id="frm1" action="/">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br><br>
 <input type="button" onclick="myFunction()" value="Submit">
 </form>

 <script>
 function myFunction() {
 document.getElementById("frm1").submit();
 }
 </script>

 </body>
 </html>

Just need to know how to transfer the html form data into json not using php but javascript.

siddhant sankhe · Accepted Answer · 2019-02-08 18:47:23Z

1

function formSerialize(formElement) {
   const values = {};
   const inputs = formElement.elements;

   for (let i = 0; i < inputs.length; i++) {
       values[inputs[i].name] = inputs[i].value;
   }
   return values;
}

Add this function in your script and call function like this

formSerialize(document.getElementById("frm1"))

while will give you json format of your form data like this

{fname: "wer", lname: "wer", "": "Submit"}

Hope this will help you.

answered Feb 8, 2019 at 18:47

siddhant sankhe

6436 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jmichael Over a year ago

It definitely helps and very greatful. Since Im new to Javascript and just learning would like to actually have context such as calling the multiple functions and is this JQUERY? Anything more on the output would be helpful to me.

siddhant sankhe Over a year ago

No Its just plain javascript @jmichael

Saher · Accepted Answer · 2019-02-08 19:00:31Z

0

I'm not sure how do you want your end product looks like, but here's the closest solution without modifying too much of your code.

First: change your inputs to have "id"s instead of name (or both, point is you need IDs)

First name: <input type="text" id="fname"><br>
Last name: <input type="text" id="lname"><br><br>

Second: have your script like the following:

 <script>
 function myFunction() {
    let output = {
        fName: document.getElementById("fname").value, 
        lName: document.getElementById("lname").value
    };
    console.log(output);
 }
 </script>

Hope that helps.

answered Feb 8, 2019 at 19:00

Saher

1553 silver badges17 bronze badges

Collectives™ on Stack Overflow

HTML Form Data into a JSON file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related