How to get POST variables in jQuery

Question

Possible Duplicate:
how to get GET and POST variables with JQuery?

I have the following HTML:

<form action='.' method='post'>{% csrf_token %}
    <div class="parameters">
        Show
            <select name="earnings_filter">
                <option value="all">Total earnings</option>
                <option value="hd">HD earnings</option>
                <option value="sd">SD earnings</option>
            </select>
        <input type="submit" name="submit" class="submit float-right" value="submit" id="submit_financials"/>
    </div>
</form>

I need to do an ajax call with this, which I'm triggering on:

$("#submit_financials").live('click', function(){
    ...
});

Is there a way to get the variables that are submitted in POST, for example which option was selected (and there are about 10 other variables I need to get). Or do I need to use the jQuery selectors to get the value of each?

thecodeparadox · Accepted Answer · 2012-06-04T18:30:06.980

$("#submit_financials").live('click', function(){
    $.ajax({
      url: '', // script url to send
      method: 'POST', // method of sending
      data: $('form').has(this).serialize(),  // .serialize() make query string with form inputs name and value
      dataType:'json',  // expected data format returned from server, you may have something else
      success: function(response) {
          // response contains data returned from server
      }
    });
});

It would be better replace live() with .on() if you're using jQuery > 1.7 and it'd be better if possible. So you can write it

$("#container").on('click', '#submit_financials', function(){
    $.ajax({
      url: '', // script url to send
      method: 'POST', // method of sending
      data: $('form').has(this).serialize(),  // .serialize() make query string with form inputs name and value
      dataType:'json',  // expected data format returned from server, you may have something else
      success: function(response) {
          // response contains data returned from server
      }
    });
});

Here #container point to holder of #submit_financials that belong to DOM at page load.

score 1 · Answer 2 · answered Jun 04 '12 at 18:17

1

If all the values are in input elements on the form...

$("#formId").serialize()

answered Jun 04 '12 at 18:17

Todd Gibson

1,005
7
16

score 1 · Answer 3 · answered Jun 04 '12 at 18:17

1

You could serialize the form and send to the server page

$.post("yourServerPage.php", $("form").serialize(),function(data){
  //Do whatever with the result from ajax server page.
});

answered Jun 04 '12 at 18:17

Shyju

214,206
104
411
497

score 0 · Answer 4 · answered Jun 04 '12 at 18:14

0

How about creating several input values of type hidden

<input type="hidden" id="sample_id" value="SOMETHING" />

give them ids and acces the data inside using:

$('#sample_id').val()

answered Jun 04 '12 at 18:14

Дамян Станчев

2,654
5
30
53

All of the inputs are selected by a user though -- how would I put them into a hidden type? – David542 Jun 04 '12 at 18:15
So you don't have any acces on some server-side language? If so - there's no way to access the POST data. – Дамян Станчев Jun 04 '12 at 18:16

score -1 · Answer 5 · edited May 23 '17 at 12:18

Unfortunately, POST variables are communicated in the request from the client to the server, but they are not automatically included in the response from the server back to the client. This is one of the things that sets them apart from GET variables.

If your data isn't excessively long, you may want to switch to the GET method instead. You can then retrieve the variables using a function like one listed in this question: How can I get query string values in JavaScript?

Alternatively, if you have access to the server-side code, you could include these variables in HTML returned; however this is another question entirely :)

How to get POST variables in jQuery

5 Answers5

Linked