Sending a JSON object to a server using AJAX

Question

I'm working on an app that needs to serialize form data to JSON objects and send them to a server using AJAX asynchronously(as the server accepts only JSON objects). There are two forms to consider:

frontend.html

<div class="login">

     <h>Login</h>
     <form id="login_form_id" onsubmit="sign_in_client()">
        <label>Email: </label><input id="email0" type="email" name="l_email" required>
        <br>
        <label>Password: </label><input id="password0" type="password" name="l_password" required>
        <br><br>
        <input type="submit" value="Submit">
     </form>

   </div>

   <div class="signup">

     <h>Signup</h>
      <form id="signup_form_id" onsubmit="sign_up_client()">
         <label>First Name: </label><input id="fname1" type="text" name="s_fname" required>
         <br>
         <label> Last Name: </label><input id="lname1" type="text" name="s_lname" required>
         <br>
         <label> City: </label><input id="city1" type="text" name="s_city" required>
         <br>
         <label> Country: </label><input id="country1" type="text" name="s_country" required>
         <br>
         <label> Male: </label><input id="gender1" type="radio" name="sex" value="male" required>
         <br>
         <label> Female: </label><input type="radio" name="sex" value="female" required>
         <br>
         <label> Email: </label><input id="email1" type="email" name="s_email" required>
         <br>
         <label> Password: </label><input id="password1" type="password" name="s_password" required>
         <br>
         <label> Repeat Pas: </label><input id="password2" type="password" name="s_rpassword" required>
         <br>
         <label>  </label><input type="submit" value="Submit">
      </form>        

   </div>

The code that handles form input parsing is bellow:

frontend.js

function sign_up_client()
{
    var xmlhttp;
    var fields = {};

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("frontEnd").innerHTML=xmlhttp.responseText;
        }
      }
    // Open connection to server asynchronously to the sign_up route function
    xmlhttp.open("POST", "sign_up", true);
    // Set the content type to JSON objects
    xmlhttp.setRequestHeader("Content-type","application/json");
    // Send the form parameters needed for a sign-up operation
    // Serialize them into a JSON object first
    $("signup_form_id").find("input, textarea, select").each(function() {
    var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
    if (inputType !== "BUTTON" && inputType !== "SUBMIT") {

    }
    xmlhttp.send(inputType);
    });

}

The code for parsing the form data has been copied from this question. It's not very clear to me how the JSON object is being constructed. Are buttons and submit types included or not in the above example? Is the form whose inputs need to be parsed correctly picked(by id)?

At the end of the function is inputType a proper JSON object ready to be sent as is?

Edit #1:

frontend.html

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css" href="client.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="client.js"></script>
<script type="text/javascript" src="serverstub.js"></script>


</head>

<body>

<div class="welcome">

   <img src="wimage.png" alt="Twidder Icon;" >

   <div class="login">

     <h>Login</h>
     <form id="signin_form_id" onsubmit="sign_in_client()">
        <label>Email: </label><input type="email" name="l_email" required>
        <br>
        <label>Password: </label><input id="password0" type="password" name="l_password" required>
        <br><br>
        <input type="submit" value="Submit">
     </form>

   </div>

   <div class="signup">

     <h>Signup</h>
      <form onsubmit="sign_up_client()">
         <label>First Name: </label><input id="fname1" type="text" name="s_fname" required>
         <br>
         <label> Last Name: </label><input id="lname1" type="text" name="s_lname" required>
         <br>
         <label> City: </label><input id="city1" type="text" name="s_city" required>
         <br>
         <label> Country: </label><input id="country1" type="text" name="s_country" required>
         <br>
         <label> Male: </label><input id="gender1" type="radio" name="sex" value="male" required>
         <br>
         <label> Female: </label><input type="radio" name="sex" value="female" required>
         <br>
         <label> Email: </label><input id="email1" type="email" name="s_email" required>
         <br>
         <label> Password: </label><input id="password1" type="password" name="s_password" required>
         <br>   
         <label> Repeat Pas: </label><input id="password2" type="password" name="s_rpassword" required>
         <br>
         <label>  </label><input type="submit" value="Submit">
      </form>        

   </div> 

</div>   

</body>
</html>

frontend.js

function sign_up_client()
{
    var xmlhttp;
    var jsonObject = {};

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    // Open connection to server asynchronously towards the sign_up route function
    xmlhttp.open("POST", "sign_in", true);
    // Set the content type to JSON objects
    xmlhttp.setRequestHeader("Content-type","application/json");
    // Send the form parameters needed for a sign-up operation
    // Serialize them into a JSON object first
    $("form").on("submit", function() {
        var jsonObject = {};
        $(".signup").find("input, textarea, select").map(function(index, elem) {
            //Ingore types such as button, submit and radio
            elem.type.match(/button|submit|radio/i) === null &&
            (jsonObject[elem["name"]] = elem.value || "")
            //If type = radio, grab the selected radio's value
            elem.type.match(/radio/i) !== null &&
            elem.checked && (jsonObject[elem["name"]] = elem.value || "")

        });

        alert (JSON.stringify(jsonObject, null, 4));
        return false;
    });
    alert (JSON.stringify(jsonObject, null, 4));
    // Send the JSON object
    xmlhttp.send(jsonObject);
}

function sign_in_client()
{
    var xmlhttp;
    var jsonObject = {};

    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    // Open connection to server asynchronously towards the sign_up route function
    xmlhttp.open("POST", "sign_in", true);
    // Set the content type to JSON objects
    xmlhttp.setRequestHeader("Content-type","application/json");
    // Send the form parameters needed for a sign-up operation
    // Serialize them into a JSON object first
    $("form").on("submit", function() {
        var jsonObject = {};
        $(".login").find("input, textarea, select").map(function(index, elem) {
            //Ingore types such as button, submit and radio
            elem.type.match(/button|submit|radio/i) === null &&
            (jsonObject[elem["name"]] = elem.value || "")
            //If type = radio, grab the selected radio's value
            elem.type.match(/radio/i) !== null &&
            elem.checked && (jsonObject[elem["name"]] = elem.value || "")

        });

        alert (JSON.stringify(jsonObject, null, 4));
        return false;
    });
    alert (JSON.stringify(jsonObject, null, 4));
    // Send the JSON object
    xmlhttp.send(jsonObject);
}

First off, use `$.ajax` from jQuery as you're using it anyway. The example you have ingores if the input type is either button or submit. — lshettyl, Sep 18 '15 at 11:33
@ lshettyl so the input is ignored if it is either button or submit but at that point in the code is inputType a JSON object or not? Does it contain all input fields except button and submit? — Sebi, Sep 18 '15 at 11:43
No, `inputType` is the tagName of the last matched element in the set => one of `input, textarea, select` — lshettyl, Sep 18 '15 at 11:57

Rayon · Answer 1 · 2015-09-18T12:03:40.850

Try this example:

In below code, jQuery ajax syntax is used as it appear more simplified to me. To fetch the values from form fields, serialize method is used.

$('form').on('submit', sign_up_client);
function sign_up_client(e) {
    e.preventDefault();
    var formJson = [];
    $(this).find(':input').each(function (index, elem) {
        var inputType = this.tagName.toUpperCase() === "INPUT" && 
        var formObj = {};
        if (inputType === "RADIO") {
            if ($(elem).is(":checked")) {
                formObj[$(elem).attr('name')] = $(elem).val();
                formJson.push(formObj);
            }
        }
        else if (inputType !== "BUTTON" && inputType !== "SUBMIT")
            formObj[$(elem).attr('name')] = $(elem).val();
            formJson.push(formObj);
        }
    });
    $.ajax({
        type: "POST",
        url: "test.php",
        data: formJson,
        dataType: "json",
        success: function (data) {
        },
        error: function () {
            alert('error handing here');
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">

  <h>Login</h>
  <form id="login_form_id" method="post">
    <label>Email:</label>
    <input id="email0" type="email" name="l_email" required>
    <br>
    <label>Password:</label>
    <input id="password0" type="password" name="l_password" required>
    <br>
    <br>
    <input type="submit" value="Submit">
  </form>

</div>

<div class="signup">

  <h>Signup</h>
  <form id="signup_form_id" method="post">
    <label>First Name:</label>
    <input id="fname1" type="text" name="s_fname" required>
    <br>
    <label>Last Name:</label>
    <input id="lname1" type="text" name="s_lname" required>
    <br>
    <label>City:</label>
    <input id="city1" type="text" name="s_city" required>
    <br>
    <label>Country:</label>
    <input id="country1" type="text" name="s_country" required>
    <br>
    <label>Male:</label>
    <input id="gender1" type="radio" name="sex" value="male" required>
    <br>
    <label>Female:</label>
    <input type="radio" name="sex" value="female" required>
    <br>
    <label>Email:</label>
    <input id="email1" type="email" name="s_email" required>
    <br>
    <label>Password:</label>
    <input id="password1" type="password" name="s_password" required>
    <br>
    <label>Repeat Pas:</label>
    <input id="password2" type="password" name="s_rpassword" required>
    <br>
    <label></label>
    <input type="submit" value="Submit">
  </form>

</div>

`datastring` is a string and OP wants to send a `JSON` object to the server! — lshettyl, Sep 18 '15 at 11:38
@Rayin Dabre like @ lshettyl mentioned, it would be preferable to send a JSON object instead of a string. — Sebi, Sep 18 '15 at 11:39
@Sebi, As i am making post request, OP can access data using `$_POST` at server side. If there is any other intention for `json` data then it makes sense.. — Rayon, Sep 18 '15 at 11:42
@Rayon Dabre The keys would be the input names "fname1":"input_form_field_value_for_first_name", "lname1":"input_form_field_value_for_last_name", and their values the actual input from the user. — Sebi, Sep 18 '15 at 11:49

score 1 · Accepted Answer · answered Sep 18 '15 at 12:41

1

Here is a quick way of constructing a JSON object from form fields for your specific case.

var o = {};
$(".signup").find("input, textarea, select").map(function(index, elem) {
    //Ingore types such as button, submit and radio
    elem.type.match(/button|submit|radio/i) === null &&
    (o[elem["name"]] = elem.value || "")
    //If type = radio, grab the selected radio's value
    elem.type.match(/radio/i) !== null &&
    elem.checked && (o[elem["name"]] = elem.value || "")

});

Now, you can send o as your JSON object.

Here is a demo for the same.

answered Sep 18 '15 at 12:41

lshettyl

8,166
4
25
31

Just a small question: can you specify exactly the form by id instead of its container? – Sebi Sep 18 '15 at 13:21
This example only works if both the javascript code and html code are in the same file. How can I refer to a form in a separate html file. http://jsfiddle.net/mvtafmj8/5/ – Sebi Sep 18 '15 at 13:56
It should work in all cases, doesn't matter whether or not the JS is in the same file. Do not use the same id multiples times as IDs are meant to be unique! – lshettyl Sep 18 '15 at 14:07
And yes, you can specify any valid selector you like. – lshettyl Sep 18 '15 at 14:13
I've added the updated code. The jsonObject is always null. The function is not even being executed. – Sebi Sep 18 '15 at 14:18
The first alert statement is never executed. I've also removed the ids from both forms – Sebi Sep 18 '15 at 14:37
1

You need to make changes accordignly rather than blindly using my code => [http://jsfiddle.net/zmyfhxdh/](http://jsfiddle.net/zmyfhxdh/) – lshettyl Sep 18 '15 at 14:41
Thanks, that did it. So in order to reference a form by its id the following syntax is needed $("#form_id") :P – Sebi Sep 18 '15 at 14:58

Sending a JSON object to a server using AJAX

2 Answers2