Home/ Questions/Q 6926001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:51:45+00:00

I am currently trying to create a multi-page form that uses both jQuery and

  • 0

I am currently trying to create a multi-page form that uses both jQuery and PHP together to error check. The issue I have is that I am relatively new to jQuery, and don’t know how to move to the second form rather than just display a success message from a PHP array.

I have used the example from ( http://www.youtube.com/watch?v=BwExOhVaUyk ) as my guide. Its an example that uses the ajax_submit to process when form is ready, if it is successful the PHP script runs and error checks and then throws back a successful message.

I do not want the success message. I want if successful to move to second page, but not sure how to do this.

The following is the ajax code

// make our ajax request to the server
function submitForm(formData) {
    $.ajax({    
        type: 'POST',
        url: 'feedback.php?images=' + encs.toString(),      
        data: formData,
        dataType: 'json',
        cache: false,
        timeout: 7000,
        success: function(data) {           

            if(data.error == true){

            $('form #response').removeClass().addClass('error').html(data.msg).fadeIn('fast');                                      

            } else{
                $("#rightcolumn").fadeOut(500, function(){

                    //NOTE THIS IS THE LINE THAT BRINGS BACK THE SUCCESSFUL MESSAGE STORED IN data.msg (taken from array in php file).

                    $("#rightcolumn").append().html(data.msg).fadeIn(500);
                });

            }



        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

            $('form #response').removeClass().addClass('error')
                        .html('<p>There was an<strong> ' + errorThrown +
                              '</strong> error due to a<strong> ' + textStatus +
                              '</strong> condition.</p>').fadeIn('fast');           
        }

THE PHP

$return['error'] = false;
            $return['msg'] = "<html>";
            $return['msg'] .="<head>"; 
            $return['msg'] .="</head>"; 
            $return['msg'] .= "<div id=\"coverrightb\">";
            $return['msg'] .= "<body>";
            $return['msg'] .= "<h2>Successful Registration <img id=\"thumbsup\" src=\"images/icons/thumbsup.png\" alt=\"ThumbsUp\" /></h2>";
            $return['msg'] .= "<br />"; 
            $return['msg'] .= "<p>Thanks for registering " .$firstname .". Your details are below.</p>";
            $return['msg'] .= "<br />"; 
echo json_encode($return);

I want it to simply move on to second page, not sure how to do this. Would be really grateful for some guidance. I’m learning PHP and jQuery but been stuck on this for several weeks.

Many thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can redirect users by changing window.location to the desired URL:

        success: function(data) {           
        if(data.error == true){
            $('#response').removeClass().addClass('error').html(data.msg).fadeIn('fast');
        } else{
            $("#rightcolumn").fadeOut(500, function(){

                //NOTE THIS IS THE LINE THAT BRINGS BACK THE SUCCESSFUL MESSAGE STORED IN data.msg (taken from array in php file).
                window.location = 'form-page-2.php';//note that this line will stop running the JavaScript on this page, so the next line will not run

                $("#rightcolumn").append().html(data.msg).fadeIn(500);
            });

        }
    },

    Another solution would be to load the new form into the same page via AJAX so the user doesn’t have to load a whole new page:

        success: function(data) {           
        if(data.error == true){
            $('#response').removeClass().addClass('error').html(data.msg).fadeIn('fast');
        } else{
            $("#rightcolumn").fadeOut(500, function(){

                //NOTE THIS IS THE LINE THAT BRINGS BACK THE SUCCESSFUL MESSAGE STORED IN data.msg (taken from array in php file).

                $("#rightcolumn").load('form-page-2.php #only-the-form', function () {
                    $(this).fadeIn(500);
                });
            });

        }
    },

    Some documentation for ya:

    • 0