I know that a submit button in HTML can submit a form which opens the target page, but how do I cause a jQuery ajax call to POST information to a new page and also display the new page. I am submitting information that is gathered by clicking elements (which toggle a new class called "select") and then identifiers from these items with the new class are added to a string and POSTed to the new page. This new page will use this data to provide a summary of the selections from the previous page. I currently can get it to POST the data to a new PHP page but it seems to be the ajax function simply remains on the current page (which is great for some things, just not this), not redirecting to the new page. how might I go about doing this?

here's the script section:

//onload function
$(function() {

//toggles items to mark them for purchase
//add event handler for selecting items
$(".line").click(function() {
    //get the lines item number
    var item = $(this).toggleClass("select").attr("name");
    });

$('#process').click(function() {
    var items = [];

    //place selected numbers in a string    
    $('.line.select').each(function(index){
            items.push($(this).attr('name'));
            });

    $.ajax({
            type: 'POST',
            url:  'additem.php',
            data: 'items='+items,
            success: function(){
                $('#menu').hide(function(){
                    $('#success').fadeIn();             
                    });
                }   
            });
    });
    return false;
});

any pointers would be great!! thanks

edit: thanks for the help, I've changed my script to :

//onload function
    $(function() {

    //toggles items to mark them for purchase
    //add event handler for selecting items
    $(".line").click(function() {
        //get the lines item number
        var item = $(this).toggleClass("select").attr("name");
        });    

$('#process').click(function() {
    var items = [];

    //place selected numbers in a string    
    $('.line.select').each(function(index){
            items.push($(this).attr('name'));
            });
    $('#items').attr('value',items);
    $('#form').submit()

    });
    return false;
});  

I know that a submit button in HTML can submit a form which opens the target page, but how do I cause a jQuery ajax call to POST information to a new page and also display the new page. I am submitting information that is gathered by clicking elements (which toggle a new class called "select") and then identifiers from these items with the new class are added to a string and POSTed to the new page. This new page will use this data to provide a summary of the selections from the previous page. I currently can get it to POST the data to a new PHP page but it seems to be the ajax function simply remains on the current page (which is great for some things, just not this), not redirecting to the new page. how might I go about doing this?

here's the script section:

//onload function
$(function() {

//toggles items to mark them for purchase
//add event handler for selecting items
$(".line").click(function() {
    //get the lines item number
    var item = $(this).toggleClass("select").attr("name");
    });

$('#process').click(function() {
    var items = [];

    //place selected numbers in a string    
    $('.line.select').each(function(index){
            items.push($(this).attr('name'));
            });

    $.ajax({
            type: 'POST',
            url:  'additem.php',
            data: 'items='+items,
            success: function(){
                $('#menu').hide(function(){
                    $('#success').fadeIn();             
                    });
                }   
            });
    });
    return false;
});

any pointers would be great!! thanks

edit: thanks for the help, I've changed my script to :

//onload function
    $(function() {

    //toggles items to mark them for purchase
    //add event handler for selecting items
    $(".line").click(function() {
        //get the lines item number
        var item = $(this).toggleClass("select").attr("name");
        });    

$('#process').click(function() {
    var items = [];

    //place selected numbers in a string    
    $('.line.select').each(function(index){
            items.push($(this).attr('name'));
            });
    $('#items').attr('value',items);
    $('#form').submit()

    });
    return false;
});  

• javascript
• jquery
• html
• forms

2 Answers 2

First of all I discourage using ajax here as you are not using it for the purpose for which it is intended to, and you are forcing it to do a reload.

You can do something like this in the success of ajax

success: function(){
           window.location = "the new url you wanted to load";       
         } 

Edit:

Why not do a normal post with form action attribute set to the page you want to post to and you can access all the variables of the form in that posted page, or alternatively you can concatenate or store in array all your values and store this array in a hidden variable and access this variable in the posted script.

Ajax posts by definition won't to a page load. But you can do whatever you want in your success handler. So just change the document location there:

success: function(){
    $('#menu').hide(function(){
        $('#success').fadeIn();             
    });

    window.location = 'http://www.example./elsewhere';
}

Oftentimes a POST will return a HTTP 301 or 302 redirect. In that case, you can get the returned header information from the XHR object, which is passed into the callback functions.

plete: function( xhr ) { 
    // assume we got a redirect; the new URL will be in the Location header
    window.location = xhr.getResponseHeader( 'Location' );
}