Многостраничная форма с использованием 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');   
     }

РНР

$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
.load(): http://api.jquery.com/load

источник

2011-12-13 21:03:21 Jasper

Большое спасибо за Ваш отзыв. У меня есть трехстраничная форма. Форма а) основные данные пользователя, б) о них больше и в) хобби/интересы. В настоящее время я могу получить только первую форму, которая будет отправлена успешно с показанным сообщением о успехе. Я попробую ваше решение и отправлю вторую форму. Я надеюсь, что это сработает, но я думаю, что php может потребоваться изменить. Я дам вам знать. Thankyou на данный момент – skippy

@skippy, поэтому вы захотите связать перенаправления. При проверке формы 'a', если она успешна, переадресуйте пользователя на' b' и от 'b' до' c'. Это может быть жестко закодировано на другую страницу или если вы хотите сделать это динамически, вы можете использовать свой PHP-скрипт для определения формы и отправки идентификатора для следующей формы в качестве ответа сервера (так что ваш вызов AJAX получит это информацию в функции «обратного вызова» успеха, и вы можете динамически загружать нужную форму для пользователя). – Jasper

Спасибо, много, Джаспер, после того, как месяц пытался обработать одну строку кода и помог мне понять, как использовать это между второй и третьей формой! – skippy

Я не слишком ясно, что вы хотите, но если вы просто хотите, чтобы перенаправить на другую страницу с другой формой, то на обратный вызов запроса AJAX, используют window.location Javascript редирект.

источник

2011-12-13 21:02:38 Mike

Многостраничная форма с использованием AJAX, JQuery и PHP

ответ

Смежные вопросы