jquery - submit post synchronously (not ajax)

Question

I have a page (page 1) that accepts post requests, does some stuff and displays some data at the end.

From another page (page 2), I want to redirect to page 1 when a button is clicked, of course sending all relevant data required by page 1 via POST.

I can, of course, use the old hack of having an invisible form on the page, stuffing in all the data I need using jquery, just after the user clicked the button, and submit() it automatically. But that looks cumbersome - it's much nicer to use syntax similar to $.post, rather than starting to manipulate html. $.post would be perfect, were it to actually redirect to the page and not make the request asynchronously (I can't just redirect to page 1 after the ajaxy post has completed since page 1 needs the data to display something).

Is there some way to do what I want with jquery, or are ugly invisible forms the only way out?

P.S

I know there are other convoluted ways of achieving what I want, for instance using $.post and just planting the respond's html in the page we're currently on, but I just want to know if there's a straightforward way of doing this with jquery

score 15 · Answer 1 · answered Oct 02 '10 at 15:39

15

This gave me an idea for a little jQuery function to mimic the $.post behavior as you described. It still uses invisible forms in the background, but the syntax for it is relatively clean and straightforward.

$(document).ready(function(){
    $('#myButton').PostIt('post.php', {foo:'bar', abc:'def', life:42});
    $('#myOtherButton').PostIt('post.php', dataObjectFromSomewhereElse);
});

$.fn.PostIt = function(url, data){

  $(this).click(function(event){

        event.preventDefault();

        $('body').append($('<form/>', {
          id: 'jQueryPostItForm',
          method: 'POST',
          action: url
        }));

        for(var i in data){
          $('#jQueryPostItForm').append($('<input/>', {
            type: 'hidden',
            name: i,
            value: data[i]
          }));
        }

        $('#jQueryPostItForm').submit();
    });
}

answered Oct 02 '10 at 15:39

Greg W

5,219
1
27
33

I realize it's just an example, but according to the spec, the keys in your JSON object should be strings and as such surrounded by quotation marks. That sort of thing caused me a lot of headache when I first encountered JSON. ;-) – Flo Nov 16 '10 at 09:20
Interesting. I've never had to put quotes around my JSON keys unless the key itself was a reserved word like 'class' or something. I suppose putting quotes around everything is one way to guarantee you never have that problem, but I kind of prefer the way it looks sans quotes. – Greg W Nov 22 '10 at 15:50
More info on that subject: http://stackoverflow.com/questions/2348867/why-are-some-object-literal-properties-quoted-and-others-not – James McCormack May 11 '11 at 11:18
Also see the section "Creating New Elements" in the jQuery docs here: http://api.jquery.com/jQuery/ – James McCormack May 11 '11 at 11:19
2

@Flo That's not JSON it's just a JavaScript object. – crizCraig Jul 09 '11 at 03:28

crizCraig · Answer 2 · 2012-07-07T21:45:25.423

9

I adapted Greg W's code to a straight function that you can call in your code:

function postIt(url, data){

    $('body').append($('<form/>', {
      id: 'jQueryPostItForm',
      method: 'POST',
      action: url
    }));

    for(var i in data){
      $('#jQueryPostItForm').append($('<input/>', {
        type: 'hidden',
        name: i,
        value: data[i]
      }));
    }

    $('#jQueryPostItForm').submit();
}

edited Jul 07 '12 at 21:45

answered Jul 09 '11 at 03:42

crizCraig

8,487
6
54
53

1

You have to remove line event.preventDefault(); – Alexey Smolyakov May 12 '12 at 15:13

score 0 · Answer 3 · answered Oct 02 '10 at 15:13

If you you have to issue a POST request, then the invisible form is one of your better options.

If you application will work with a GET request, I would encode the data into the querystring and do a.

document.location.href =

You can use jQuery.serialize to generate the query string.

score 0 · Accepted Answer · answered Nov 16 '10 at 08:56

0

I guess the answer is there's no straight forward way. For a general function that adds this capability, see Greg W's answer.

answered Nov 16 '10 at 08:56

olamundo

23,991
34
108
149

score -2 · Answer 5 · answered Oct 02 '10 at 15:23

html:

<form id="myform" method="get" acction="page2">
   <!-- data -->
</form>

js:

$('#myform').bind('submit', function(ev) {

  ev.stopPropagation();

  var ok = true;
  //manipulate html and 'ok'

  return ok;   // if ok == false, don't execute post


});

jquery - submit post synchronously (not ajax)

5 Answers5