Jquery $.post() - Possible to do a full page post request?

Question

I know I can do an out of band Post request with jQuery and the $.post() syntax. However, I'm interested to know if it is possible for jQuery to cause a post request on the whole page (as when a form is submitted) so that a brand new page is loaded. Is this possible?

There is no form element in the DOM, so I can't do form.submit().

What's wrong with `myFormElement.submit()`? Or better yet, when the user clicks the submit button, *just let the browser submit the form*, no JavaScript needed. — Crescent Fresh, Nov 10 '09 at 15:08
I was hoping to be able to do this without a form in the DOM (in the same way that I can do an out of band post without a form in the DOM). But I guess not. — UpTheCreek, Nov 10 '09 at 15:50
You don't actually have a `
` element? You should mention that in the question. — Crescent Fresh, Nov 10 '09 at 15:51

score 30 · Answer 1 · edited May 19 '12 at 08:22

30

I use this function when I need to send data and don't have form in the DOM:

function postData(actionUrl, method, data) {
    var mapForm = $('<form id="mapform" action="' + actionUrl + '" method="' + method.toLowerCase() + '"></form>');
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            mapForm.append('<input type="hidden" name="' + key + '" id="' + key + '" value="' + data[key] + '" />');
        }
    }
    $('body').append(mapForm);
    mapForm.submit();
}

And I call it like this:

var data= { 'property1': 666, 'property2': 'I am a boy' };
postData('http://urltopostdata.to', 'post', data);

edited May 19 '12 at 08:22

Daedalus

7,586
5
36
61

answered May 18 '12 at 22:35

Kent-Remi Gabrielsen

406
4
3

2

This worked for me. Thanks for using .hasOwnProperty() to make sure that you were using a property from the data object, not the prototype (I had to look up why: http://stackoverflow.com/questions/684672/loop-through-javascript-object) – Karl Wenzel Dec 13 '13 at 22:13

score 2 · Accepted Answer · answered Feb 16 '11 at 14:28

2

Think this plugin should do the trick: http://www.mimiz.fr/javascript/jquery/en-jquery-postdatas-plugin/?lang=en

answered Feb 16 '11 at 14:28

mcintyre321

12,996
8
66
103

score 0 · Answer 3 · answered Nov 10 '09 at 14:59

0

Not sure if I got your question, but if you just want to redirect the client after posting, just direct the client in the callback function of the $.post like

jQuery.post( url, {}, function() { location.href = "somewhere_else.html"; } )

answered Nov 10 '09 at 14:59

Marco

2,329
1
21
25

1

Kind of - what I mean is, under a normal form post, the post parameters are sent to the server, and the server responds with an html document which replaces the current one. I would like to do the same thing with JQuery (so just one post to the server, not a post and then a seperate get, as your example would produce I think). – UpTheCreek Nov 10 '09 at 15:03
Oh, why don't you just post the form (without javascript) to that page and handle the request from there then? :) – Marco 0 secs ago – Marco Nov 10 '09 at 15:07
what about using jQuery to create a form and then post it :)? – marc.d Nov 10 '09 at 16:07
Oh, well if there is no form, I stand by my first reply, or what marc.d said. – Marco Nov 11 '09 at 11:20

score 0 · Answer 4 · answered Nov 10 '09 at 15:12

I think you're trying to re-implement the default behaviour. Just use the regular submit mechanism the browser provides.

If you need to check the data before you actually submit it to the server, bind a function to the onsubmit event and do your checks, then either interrupt the submit action by returning false or return true and let the browser do all the work. Does this make sense to you?

score 0 · Answer 5 · answered Nov 22 '11 at 12:19

I've used the following example to allow multiple buttons to submit serialized form data but with different options, e.g. Save and Save & Close. Even though I'm using jQuery to post serialized data the whole page reloads because i'm sending the ajax post response data back to "document.body".

<form id="myform">
<button id="button1" type="button" onclick="submitButton(true,false)" name="save" value="save">Save</button>
<button id="button1" type="button" onclick="submitButton(true,true)" name="close" value="close">Save and Close</button>
</form>

function submitButton(save,close) {
  $.ajax({url:'page.asp', data:''+$('#myform').serialize()+'&save='+save+'&close='+close+'',
  type: 'post',
  success: function(data){$(document.body).html(data);}
  });
}

You don't need a form element as you can use this with any element that has a unique id.

Also in answer to the comment "so just one post to the server, not a post and then a seperate get" - this method achieves that. — Andy Davies, Nov 22 '11 at 12:23

Jquery $.post() - Possible to do a full page post request?

5 Answers5

Linked