Unable to send json data with jquery from form values

Question

I am creating a json object in which I am pulling fields from form and then using jquery Ajax POST to send the data. But when I see my network tab after pressing submit I basically get the json headers but all the values that should have been pulled from the form are blank except the values I am hardcoding. Note that my json data also has a nested json of type room.

Below is my jquery part:-

 var formData={
        "checkInDate": $("#checkInDate").val(),
        "checkOutDate": $("#checkOutDate").val(),
        "roomsWanted":$("#roomsWanted").val(),
        "room":{
            roomType: $("input[name=roomType]:checked").val(),
            roomProperty:"non-smoking"
        }

    };
$("#checkAvailabilityForm").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: 'post',
            url: '',
            dataType: 'json',
            data: JSON.stringify(formData),
            contentType: 'application/json',
            success: function(dataRecieved){
                var dataRecieved= $.trim(dataRecieved);
                if(dataRecieved === ''){

                }else{

                }
            }

        });
    });

thedarklord47 · Accepted Answer · 2015-12-15 01:51:39Z

1

Move your declaration of formData inside of the .submit() function. The way you have it now the page loads, and then var formData = ... immediately sets the value for formData (to the values of the new empty form).

Your code should look like this:

$("#checkAvailabilityForm").submit(function(e){
    e.preventDefault();

    var formData={
        "checkInDate": $("#checkInDate").val(),
        "checkOutDate": $("#checkOutDate").val(),
        "roomsWanted":$("#roomsWanted").val(),
        "room":{
            roomType: $("input[name=roomType]:checked").val(),
            roomProperty:"non-smoking"
        }
    };

    $.ajax({
        type: 'post',
        url: '',
        dataType: 'json',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function(dataRecieved){
            var dataRecieved= $.trim(dataRecieved);
            if(dataRecieved === ''){

            }else{

            }
        }

    });
});

answered Dec 15, 2015 at 1:51

thedarklord47

3,3723 gold badges34 silver badges56 bronze badges

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

1 Comment

Rajat Bansal Over a year ago

thanks a lot. such a simple error. had been scratching my head for almost an hour.

stalin · Accepted Answer · 2015-12-15 01:51:48Z

0

You don't need to stringify your json just past the json as it

data: formData

answered Dec 15, 2015 at 1:51

stalin

3,5142 gold badges28 silver badges26 bronze badges

2 Comments

Rajat Bansal Over a year ago

I had done that but it doesnt show anything and infact doesnt represent it as json as well. This is how I see it in developer console of the browser and the values coming from form are still blank. Looks like this "checkInDate=&checkOutDate=&roomsWanted=&room%5BroomProperty%5D=non-smoking"

Rajat Bansal Over a year ago

actually you were right too because i had the var declared outside submit as suggested by Dark Lord above

Collectives™ on Stack Overflow

Unable to send json data with jquery from form values

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related