Passing variables with POST to another page with Jquery

Question

I am relatively new to Jquery and I was wondering how would one post variables to another page and then redirect? I used ajax function, the redirect works fine, but no variables are captured in POST (they are empty)

function linkWO() {

    $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "LinkTagOut.aspx",
            dataType: "json",
            data: "{id=1}",
            complete:
            function () {
                window.location = "LinkTagOut.aspx";
            }

    });
}

in my aspx file

<a href="javascript:void(0);" onclick="return linkWO();"><span>Link</span></a>

gnomixa - I may be way off base here, but it looks to me like you might be misunderstanding the purpose of the ajax call. It sounds as though you want to POST some values to a page, as though you were submitting a form (as opposed to asynchronously, meaning you don't navigate away from your current page). Is that correct? — Ender, Dec 03 '10 at 23:43
yes, you are right. is that possible without submitting a form? — sarsnake, Dec 04 '10 at 00:08

karim79 · Answer 1 · 2010-12-03T23:07:21.810

4

$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "LinkTagOut.aspx",
        dataType: "json",
        data: { id: 1 }, // or the string: 'id=1'
        complete:
        function () {
            window.location = "LinkTagOut.aspx";
        }

});

From the $.ajax documentation (data option):

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

Also, make sure to return false from the end of the submit handler (or whatever fires the ajax call) to ensure that a 'normal' redirect is not happening.

edited Dec 03 '10 at 23:07

answered Dec 03 '10 at 23:00

karim79

339,989
67
413
406

@karim what is the difference between his code and your code apart from data hash // – kobe Dec 03 '10 at 23:02
@gov - the data parameter is the significant difference. It needs to either be an object or a string. He was passing a weird object-ish which would *not* work. – karim79 Dec 03 '10 at 23:05
@gnomixa - POST could be empty if the page redirects *before* the ajax call happens, which could be the case if you are not returning false at the end of the appropriate event handler. – karim79 Dec 03 '10 at 23:08
thanks, please elaborate what the appropriate event handler would be in this case. all i want to do it pass a variable using POST to another page. should be rather simple. – sarsnake Dec 03 '10 at 23:11
`$("form").submit(function() { $.ajax( { options ) }; return false; });` – karim79 Dec 03 '10 at 23:12
I posted my full code. i am still unclear what should return false. – sarsnake Dec 03 '10 at 23:17
@gnomixa - put `return false` right at the end of `linkWO()`, before the final closing brace. – karim79 Dec 03 '10 at 23:19
are you sure that POST works with redirect? i couldn't find such references online....does this code actually works for you? – sarsnake Dec 03 '10 at 23:23
@gnomixa , you are doing something wrong you need to use form.sumbit if you want to carry the data to another page , on the success you are just redirecting to another page , how do you expect that page to hav data....// – kobe Dec 03 '10 at 23:28
@gnomixa , do a form post on the success of ajax http://api.jquery.com/jQuery.post/ – kobe Dec 03 '10 at 23:29
thanks Gov, can i control inside JS code where the form submits to? I am modifying someone's code and don't want to alter their html too much. It's asp.net, so forms usually submit to the same page they originate from....any input here? – sarsnake Dec 03 '10 at 23:35
All i want to do is pass variable to another page with POST...is it possible to achieve with Jquery? Seems unnecessarily hard. – sarsnake Dec 03 '10 at 23:37
why don you just pass as query string here window.location = "LinkTagOut.aspx?variabletopass=test"; – kobe Dec 03 '10 at 23:45
that's what I am resorting to. and it works. The thing is though that I would have to do extra validation then. Since users will often fiddle with the URL. But ya, seems like that's what I should do. – sarsnake Dec 03 '10 at 23:52
@gnomixa , shall i post my comment as answer...let me know if it is ok – kobe Dec 03 '10 at 23:57
sure, but i would like to confirm for future reference that the only way possible to pass POST vars to another page using Jquery is the old way (form submit)? – sarsnake Dec 04 '10 at 00:06
@gnomixa , see you can do it in two forms assume you have a sumbit button , you write your jquery code for form submit through ajax which takes care of posting the to the other page. But here you have another call through ajax to the page , that particulary functionality you may need to do in another method and call it in the click event of submit and return true or false , once this method retruns true that means you are done with ajax and finally you can do a form post. – kobe Dec 04 '10 at 00:13

score 2 · Accepted Answer · edited Jul 01 '19 at 09:53

2

This answer is just for a quick fix

why don't you just pass as query string here

window.location = "LinkTagOut.aspx?variabletopass=test";

<form id="target" action="destination.html">
  <input type="text" value="Hello there" />
  <input type="submit" value="Go" />
</form>
<div id="other">
  Trigger the handler
</div>

$('#target').submit(function() {
$.post('ajax/test.html', function(data) {      
});
  return false;
});

edited Jul 01 '19 at 09:53

Konu

3
6

answered Dec 04 '10 at 00:10

kobe

15,671
15
64
91

as a note: given my scenario, see comments above, this was the most appropriate way of doing it. – sarsnake Dec 04 '10 at 00:24
in asp net normally the form submits to its originating page. So that's why I chose to pass the variables using querystring. One, of course could submit the form to its page, then deal with the POSTed variables there and then redirect to destination.html. But I chose the easy way. – sarsnake Dec 04 '10 at 00:41

score 0 · Answer 3 · edited Jun 10 '13 at 14:16

0

If you like to code less do this:

include jquery.redirect.min.js in your javascript (js) folder.

Load file AFTER JQUERY loading script:

<script type='text/javascript' src='jquery.js'> 
</script>

<script type='text/javascript' src='jquery.redirect.min.js'>
</script>

Simply replace desired parameters on the next line (copy/paste) in your javascript code:
```
$().redirect('targeturl.html', {'post_var_1': 'value1', 'post_var_2': 'value2'});
```

This is the simplest and the fastest method I have found for posting variables to another page without using the form tag. Good luck!

edited Jun 10 '13 at 14:16

Shadow The GPT Wizard

66,030
26
140
208

answered Jun 10 '13 at 14:04

Alejo Toro

71
1
3

1

The trick with code in a list is appending additional four spaces (8 spaces total) to format it as code. – Shadow The GPT Wizard Jun 10 '13 at 14:17
how do you get the variables in second page? I mean, between two .html files – madsongr Apr 13 '20 at 17:01

score 0 · Answer 4 · answered Dec 03 '10 at 23:06

Have a look at the "data" option on this doc page: http://api.jquery.com/jQuery.ajax/

Your problem is that you are trying to pass a json string (and it is valid to pass a string), but if you pass a string, jQuery is expecting a parameterized query string. If you want to pass a json object, it should not be a string.

However, note that json objects passed this way will be converted to a parameterized query string by jQuery, so if it's not inconvenient (as in this case, where you only have one value), you might as well just pass it that way to begin with and save the script some work.

Passing variables with POST to another page with Jquery

4 Answers4

Linked