使用AJAX，JQuery和PHP的多頁表格

我目前正在嘗試創建一個多頁面表單，它同時使用jQuery和PHP進行錯誤檢查。我遇到的問題是我對jQuery相對比較陌生，不知道如何轉到第二種形式，而不是僅僅顯示來自PHP數組的成功消息。使用AJAX，JQuery和PHP的多頁表格

我用（http://www.youtube.com/watch?v=BwExOhVaUyk）的例子作爲我的指南。它是一個使用ajax_submit在表單準備就緒時進行處理的示例，如果成功，PHP腳本將運行並進行錯誤檢查，然後返回成功的消息。

我不想要成功的訊息。我想如果成功移動到第二頁，但不知道如何做到這一點。

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');   
     }

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);

我想將它移動到第二頁，不知道如何做到這一點。會很感激一些指導。我正在學習PHP和jQuery，但在這個問題上停留了好幾個星期。

非常感謝

來源

2011-12-13 skippy

您可以通過更改window.location到所需的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); 
      }); 

     } 
    },

另一種解決方案是新的形式加載到通過AJAX在同一頁面，因此用戶不必加載一個全新的頁：

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); 
       }); 
      }); 

     } 
    },

有些文檔爲雅：

window.location：https://developer.mozilla.org/en/DOM/window.location
：http://api.jquery.com/load

來源

2011-12-13 21:03:21 Jasper

非常感謝您的寶貴意見。我有一個三頁的表格。形成a）基本的用戶細節，b）關於他們的更多信息，以及c）愛好/興趣。目前我只能得到第一個成功提交的表單，並顯示成功消息。我會嘗試你的解決方案併發回第二個表格。我希望這可以工作，但我認爲PHP可能需要改變。我會讓你知道的。謝謝你現在 – skippy 2011-12-13 21:14:47

我不是你想要的東西太清楚，但如果你只是想重定向到另一個網頁的另一種形式，然後在Ajax請求的回調，使用window.location JavaScript重定向。

來源

2011-12-13 21:02:38 Mike

使用AJAX，JQuery和PHP的多頁表格

回答

相關問題