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
– lshettyl, Commented Sep 18, 2015 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
– Sebi, Commented Sep 18, 2015 at 11:43
No, inputType is the tagName of the last matched element in the set => one of input, textarea, select — lshettyl
– lshettyl, Commented Sep 18, 2015 at 11:57

lshettyl · Accepted Answer · 2015-09-18 12:41:56Z

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, 2015 at 12:41

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

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

8 Comments

Sebi Over a year ago

Just a small question: can you specify exactly the form by id instead of its container?

Sebi Over a year ago

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. jsfiddle.net/mvtafmj8/5

lshettyl Over a year ago

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 Over a year ago

And yes, you can specify any valid selector you like.

lshettyl Over a year ago

You need to make changes accordignly rather than blindly using my code => http://jsfiddle.net/zmyfhxdh/

|

Rayon · Accepted Answer · 2015-09-18 12:03:40Z

1

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>

edited Sep 18, 2015 at 12:03

answered Sep 18, 2015 at 11:34

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

7 Comments

lshettyl Over a year ago

datastring is a string and OP wants to send a JSON object to the server!

Sebi Over a year ago

@Rayin Dabre like @ lshettyl mentioned, it would be preferable to send a JSON object instead of a string.

Rayon Over a year ago

@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..

Sebi Over a year ago

@ Rayon Dabre The server can only work with JSON objects.

Rayon Over a year ago

@Sebi, What would be the key for input value in that case ?

|

Collectives™ on Stack Overflow

Sending a JSON object to a server using AJAX

2 Answers 2

8 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related