jQuery form submit to a remote Node server API

Question

(a quick disclaimer that I don't think you need to know much about Node or Express to answer this question! It's very much an issue on the jQuery form submission's end)

I have a form set up on Wordpress, whose data I want to send to my Node.js process. The node process is located at http://localhost:5000/agm/saveNewUser and accepts POST commands, which I've verified is working. The Node server sits on top of Express.

I'm having trouble getting the data from my front-end form to Node. The form looks like this:

<form class="form-horizontal classy-form franklin-book ng-pristine ng-valid" id="signup" role="form">
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputName">
        Name </label>
        <div class="col-md-10">
            <input class="form-control" id="inputName" type="text" mouseev="true" keyev="true">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputEmail">
         Email
        </label>
        <div class="col-md-10">
            <input class="form-control" id="inputEmail" type="email">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputLocation">
         Location
        </label>
        <p>
        </p>
        <div class="col-md-10">
            <input class="form-control" id="inputLocation" type="text">
        </div>
    </div>
    <div class="radio">
        <label><input id="optionsRadios1" type="radio" checked="checked" name="optionsRadios" value="option1">Start the course from Monday</label>
    </div>
    <div class="radio">
        <label><input id="optionsRadios2" type="radio" name="optionsRadios" value="option2">Start the course from today</label>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <button id="formSubmit" class="btn btn-default" type="submit"><br>
             Get in contact</button>
        </div>
    </div>
</form>

The form submits like so, using the jQuery Form Plugin:

 $('#signup').ajaxForm({
    url: 'http://localhost:5000/agm/saveNewUser/', 
    type: 'post'
 })

My Node server is simply set up as:

exports.saveNewUser = function (req, res) {
    console.log("Saving a new user");
    console.log(req);
    console.log(res);
   // These console.logs are just to debug so I can see if the form data is being posted correctly
};

At present, my Node console logs a whole bunch of stuff but nothing to do with the actual input from the form. I've tried:

$('#signup').ajaxForm({url: 'http://localhost:5000/agm/saveNewUser/', type: 'post', data: $('#signup').serialize()})

But this results in the form not hitting my node server at all.

What happens when you take the jquery form plugin out of the equation? `$.post(`http://localhost:5000/agm/saveNewUser/`, {foo: 'foo'});` is anything logged? — Will, Mar 11 '14 at 05:38
@Will Fixed a few issues. The data is coming fine now into `Node`'s `req.body` as `{foo:'bar'}`. Suggestions on how to get my form's data in here? — JVG, Mar 11 '14 at 05:50
Next debugging step: Fill out the form, don't submit it and then in your browser console do `$('#signup').serialize()`. Does it look like you expect? Sorry, I don't anything about the form plugin you're using. It's easy enough to do async form submission with out a plugin though (if that's the problem). — Will, Mar 11 '14 at 05:56
see also http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — Will, Mar 11 '14 at 05:58
Couldn't you simply submit the form as POST using the method attribute in form tag? — Foreever, Mar 11 '14 at 06:28
@Jascination, consider using Express's "bodyParser" middleware. http://expressjs.com/api.html#req.body — Andrew Theken, Mar 11 '14 at 14:19

score -1 · Answer 1 · answered Mar 11 '14 at 14:12

-1

I don't know how jQuery Form Plugin works, but you cannot send AJAX request to different port due to Same origin policy.

answered Mar 11 '14 at 14:12

dave-cz

413
4
22

You can do an AJAX POST to any origin. It is also possible to configure the target server to emit CORS headers which are specifically designed to allow AJAX GET requests Cross-Origin. Or, if it's supported, JSONP can be used. – Andrew Theken Mar 11 '14 at 14:17

jQuery form submit to a remote Node server API

1 Answers1