Save form data in JSON using jquery without Php

Question

I want to save this data in JSON format without using PHP ,when user give the value and press send ,its data add in JSON so that ,I can use this JSON as Database.

<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 



</body>
</html>

Thank you so much for your help :) in advance

_"I want to save this data in JSON format without using PHP"_ Where is data saved? — guest271314, Feb 14 '17 at 18:54
data save in json format , I want to create the new json and save all data in one json — Hari Om Srivastava, Feb 14 '17 at 18:55
Yes, what do you mean by "without using PHP"? Where is data saved? Is file offered for download to user? — guest271314, Feb 14 '17 at 18:57
Are you hoping to use local storage to store the responses? Or do you plan to forward the data to some other service/endpoint? — IrishGeek82, Feb 14 '17 at 19:02
its possible that we are send form data in JSON object using jquery and that JSON , we can use in other place in place of databse ,it possible ? — Hari Om Srivastava, Feb 14 '17 at 19:08

Boldizsar · Answer 1 · 2017-02-14T19:21:16.183

You can iterate through your form and collect it's values in an array, which you can encode in JSON format.

<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit" onclick="logJsonInputs()">
</form>   


<script type="text/javascript">
function logJsonInputs() {
    var nameFormElements = document.getElementById("name_form").elements;
    var inputs = [];
    for(var i = 0; i < nameFormElements.length; i++) {
        var element = nameFormElements[i];
        inputs[element.name] = element.value;
    }

    var jsonInputs = JSON.stringify(inputs);
    console.log(jsonInputs);
}
</script>

</body>
</html>

@HariOmSrivastava this is actually the full code. What would you need that would be missing ? — Artemis, Feb 14 '17 at 19:19

IrishGeek82 · Answer 2 · 2017-02-14T19:24:11.080

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
        function stringifyForm(formObject)
        {
            var jsonObject    = {};
            var inputElements = formObject.getElementsByTagName("input"); 
                inputElements = Array.prototype.slice.apply(inputElements);        //Because I want to use forEach and getElementsByTagName returns an object.
                inputElements.forEach(function(e,i,a)
                                      {
                                        if (e.type != "submit")
                                        {
                                            jsonObject[e.name] = e.value;
                                        }
                                      }
                                     );


            $.post("https://www.apiaas.com/consume.php",
                   {
                    "data":jsonObject
                   },
                   function(data)
                   {
                     console.log(data);
                   }
                   );
        }

        function jquerySolution(formObject)
        {
            var jsonObject = JSON.stringify( $(formObject).serializeArray() );        

            $.post("https://www.apiaas.com/consume.php",
                   {
                    "data":jsonObject
                   },
                   function(data)
                   {
                     console.log(data);
                   }
                   );            
        }
    </script>
</head>
<body>

<form onsubmit="jquerySolution(this);return false;">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <button type="submit" value="Submit">Submit</button>
</form> 


</body>
</html>

This is one possible solution of many. This does not leverage JQuery, which would make the process easier. I am only sending the resultant JSON Object to the console; however, you could send the object to some end-point using an AJAX call. http://stackoverflow.com/questions/11338774/serialize-form-data-to-json — IrishGeek82, Feb 14 '17 at 19:15
Updated solution to include a JQuery based solution including a simple post example. — IrishGeek82, Feb 14 '17 at 19:24

Save form data in JSON using jquery without Php

2 Answers2