Open URL while passing POST data with jQuery

Question

Is it possible using jQuery to change the page URL while passing post data to the new page?

Answer 1

If you mean that you want to change the current page URL, well then you can add a new <form> to the current page, add hidden input elements to it, and then submit it.

$('body').append($('<form/>')
  .attr({'action': yourNewURL, 'method': 'post', 'id': 'replacer'})
  .append($('<input/>')
    .attr({'type': 'hidden', 'name': 'param1', 'value': "hello"})
  )
  .append($('<input/>')
    .attr({'type': 'hidden', 'name': 'param2', 'value': "world"})
  )
).find('#replacer').submit();

Or something similar

Answer 2

If you are POSTing data not in a form (because you could simply set the form's action to the current page) and the data being posted isn't directly related to the content of the next page, you can use the callback function of jQuery's .post() method to redirect the user:

$.post( '/Page2', { 'foo' : 'bar' }, function() {
    window.location.href = '/Page2';
});

This seems like an unlikely situation, maybe you could comment with more details about the data being passed and its relation to the content of Page2?

Answer 3

Try the following function. Works for me. JSON compatible.

/**
 * Function that will redirect to a new page & pass data using submit
 * @param {type} path -> new url
 * @param {type} params -> JSON data to be posted
 * @param {type} method -> GET or POST
 * @returns {undefined} -> NA
 */
function gotoUrl(path, params, method) {
    //Null check
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //Fill the hidden form
    if (typeof params === 'string') {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", 'data');
        hiddenField.setAttribute("value", params);
        form.appendChild(hiddenField);
    }
    else {
        for (var key in params) {
            if (params.hasOwnProperty(key)) {
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("type", "hidden");
                hiddenField.setAttribute("name", key);
                if(typeof params[key] === 'object'){
                    hiddenField.setAttribute("value", JSON.stringify(params[key]));
                }
                else{
                    hiddenField.setAttribute("value", params[key]);
                }
                form.appendChild(hiddenField);
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
}

Demo usage

    <script>
        $('#GotoNextPage').on('submit', function(evt){
            evt.preventDefault();

            //Make the data
            var sampleData = new Object();
            sampleData.currentPage = 'We are here';
            sampleData.currentUid = 5;

            gotoUrl("actionPage.php", {'cmd':'nextPage', 'data':sampleData});
        });
    </script>

Hope this helps!

Answer 4

Save variables into $_SESSION by using jquery post method

jquery code

$.post("save_session.php", { out: output }) .done(function(data) {  
location.href='your_link.php';
});

Php code (save_session.php)

$_SESSION["variables"]=$_POST["out"];

Php code (your_link.php)

$output=$_SESSION["variables"];