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
– A. Wolff, Commented May 1, 2014 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
– akaphenom, Commented May 1, 2014 at 13:05
Just one thing, you should declare var firstname = $('#firstname').val(); inside submit handler — A. Wolff
– A. Wolff, Commented May 1, 2014 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 — JasonWilczak
– JasonWilczak, Commented May 1, 2014 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
– akaphenom, Commented May 1, 2014 at 13:10

James Duffy · Accepted Answer · 2014-05-01 13:12:36Z

1

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.

answered May 1, 2014 at 13:12

James Duffy

1,41710 silver badges17 bronze badges

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

Comments

JasonWilczak · Accepted Answer · 2014-05-01 13:21:38Z

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 1, 2014 at 13:21

answered May 1, 2014 at 13:05

JasonWilczak

2,4132 gold badges22 silver badges39 bronze badges

4 Comments

akaphenom Over a year ago

I hadn't needed to add the content type to other jQuery.ajax posts, nor stringify the JSON - Let me give this a shot

JasonWilczak Over a year ago

Sure thing, we do it a lot for MVC applications, which might require the ajax to be setup differently.

akaphenom Over a year ago

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.

JasonWilczak Over a year ago

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

Collectives™ on Stack Overflow

Post Json via from a form Submit with jQuery

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related