Post Json via from a form Submit with jQuery

Question

HTML

<form id="join">
<div class="content">
    <h2>Join the Dodilio Exchange</h2>
    <ul>
        <li><input id="firstname" type="text" placeholder="Fast Name" name="firstname" required></li>
    </ul>
 </div>
 </form>

JS

    var register = function (firstname) {

        var obj = {
            "firstname": firstname
        }

        $.ajax({
            type: "POST",
            dataType: 'json',
            data: obj,
            url: "/rest/register/?format=json",
            success: function (data) {
                console.log('success')
                //window.location.href = '/ideas'
            }
        });
    }


    var joinForm = $('#join');
    var firstname = $('#firstname').val()

    joinForm.submit(function(e){
        console.log('submit')
        e.preventDefault();

        register(firstname)


        return false;
    })

BUT it is Posting a traditional form:

POST http://127.0.0.1:8000/rest/register/?format=json HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 233
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://127.0.0.1:8000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8000/jointheexchange.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

firstname=&lastname=&

I am not super strong with jQuery, and I have looked at a few examples of this on the web and stack and honestly cannot see what I am dong wrong / differently. PLease help - thx.

Is submit handler bound? Does 'submit' appear in console? If no, then use document ready handler or set code once FORM is available in DOM — A. Wolff, May 01 '14 at 13:03
Yes it does. Thank you for prompting that bit of information. I am stuck but not for not trying, and honestly this case is a touch embarrassing for me. — akaphenom, May 01 '14 at 13:05
Just one thing, you should declare `var firstname = $('#firstname').val();` inside submit handler — A. Wolff, May 01 '14 at 13:07
Yes, where is your javascript being set? Is it wrapped in a document.ready? Your form submit override seems to be valid [JQuery .submit](https://api.jquery.com/submit/) — JasonWilczak, May 01 '14 at 13:07
Outside of the Form this code seems to work. But there is no reason it shouldn't work in the form... — akaphenom, May 01 '14 at 13:10
The submit handler seem to be hooked up correctly, as all logs I have are printed, so I don;t think it is a document.ready thing. — akaphenom, May 01 '14 at 13:15
@akaphenom But here, when submiting FORM, `firstname` is an empty string. Check it and see, i shoudln't be wrong. See James Duffy's answer below — A. Wolff, May 01 '14 at 13:17
I agree that the empty string looked problematic, but in the JS it did have value (i logged it at one point). The answer was the stringify which I hadn't needed before - don't understand why it is necessary in the form. — akaphenom, May 01 '14 at 13:23

score 1 · Answer 1 · answered May 01 '14 at 13:12

It looks to me like var firstname = $('#firstname').val() is getting set on page load. You want to move it inside your submit handler so its value is assigned when the form is submitted:

var joinForm = $('#join');

joinForm.submit(function(e) {
    console.log('submit');
    e.preventDefault();

    var firstname = $('#firstname').val();

    register(firstname);

    return false;
})

Also, you were missing a few semi-colons in the above code, so I would double check the rest of your code for syntax errors.

JasonWilczak · Accepted Answer · 2014-05-01T13:21:38.250

0

I believe you need to stringify your JSON object.

var dataToSend = JSON.stringify(obj);

Then, I believe, you need to update your ajax method to mention the content type is json:

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            data: dataToSend,
            url: "/rest/register/?format=json",
            success: function (data) {
                console.log('success')
                //window.location.href = '/ideas'
            }
        });

I made a Fiddle of it and it appears to be working, if you have fiddler running you can see the data as :{"firstname":"test"}

edited May 01 '14 at 13:21

answered May 01 '14 at 13:05

JasonWilczak

2,303
2
21
37

I hadn't needed to add the content type to other jQuery.ajax posts, nor stringify the JSON - Let me give this a shot – akaphenom May 01 '14 at 13:06
Sure thing, we do it a lot for MVC applications, which might require the ajax to be setup differently. – JasonWilczak May 01 '14 at 13:10
My problem was fixed with the JSON.stringify, which is a shocker, because outside of a form I don't seem to need to do that. the contentType seemed too have no impact on my post (positive or negative), I guess it is better to be explicit and include it? Thank you for pointing out the what should have been obvious. – akaphenom May 01 '14 at 13:21
content type is supposed to indicate what you are sending and data type is what you are expecting to receive. So, if you are expecting html, you shouldn't set data type as json. Quick explanation here: [Stackoverflow](http://stackoverflow.com/questions/18701282/what-is-content-type-and-datatype-in-an-ajax-request) – JasonWilczak May 01 '14 at 13:23

Post Json via from a form Submit with jQuery

2 Answers2