CODEWITHSUNDEEP
javascriptjqueryjsonajax
Rajat Bansal
Rajat Bansal

Reputation: 183

Unable to send json data with jquery from form values

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{

                }
            }

        });
    });

Upvotes: 1

Views: 145

Answers (2)

stalin
stalin

Reputation: 3474

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

data: formData

Upvotes: 0

thedarklord47
thedarklord47

Reputation: 3332

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{

            }
        }

    });
});

Upvotes: 1

Related Questions