2015-07-02 1 views
0

Это похоже на такую ​​простую вещь, но я не смог найти адекватное руководство для меня для жизни. Я только смог найти информацию о последовательных запросах AJAX, независимо от ввода пользователя, like this или this.Как сделать несколько запросов AJAX после ввода пользователем?

Что я пытаюсь сделать, это создать опрос, чтобы после того, как пользователь ответил на вопрос, веб-сайт заменяет вопрос на следующий вопрос и т. Д.

Вот что я до сих пор (в файле .php):

В <head>, у меня есть функция для каждого последующего элемента вызова:

<script type="text/javascript"> 
    function nextPage(url) { 
     $("#consent-form").empty(); 
     $("#consent-form").load(url); 
    } 
</script> 

Может быть, это просто не так, как это делается , Понятия не имею. Как я уже сказал, я не смог найти адекватной помощи по этому поводу. Насколько я могу судить, empty() не должен удалять форму # согласия, а только ее содержимое и дочерние элементы, что является именно тем поведением, которое я хочу.

Это начальный HTML и PHP для DIV я хочу поменять после каждого ответил на вопрос:

<div id="consent-form"> 

    <?php 

     // Check for a valid email address. 
     $email = $emailErr = ""; 

     if ($_SERVER["REQUEST_METHOD"] == "POST") { 
      if (empty($_POST["email"])) { 
       $emailErr = "* Your email address is required."; 
      } else { 
       $email = test_input($_POST["email"]); 
       if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
        $emailErr = "* Please enter a valid email address."; 
       } else { 
        $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; 
        $query = "INSERT INTO survey VALUES ('" . $email . "','" . $actual_link . "','','')"; 
        mysql_query($query); 
        echo '<script type="text/javascript">' 
         , 'nextPage("survey.php");' 
         , '</script>' 
         ; 
        } 
       } 
      } 

     function test_input($data) { 
      $data = trim($data); 
      $data = stripslashes($data); 
      $data = htmlspecialchars($data); 
      return $data; 
     } 
    ?> 
    <p> 
    [Consent form text] 
    </p> 
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    Please enter your email address: <input type="text" name="email" value="<?php echo $email;?>"> 
    <span class="error"> <?php echo $emailErr;?></span> 
    <br> 
    <input type="submit" value="Begin Study"> 
    </form> 
    </div> 

Я уверен, что вы можете сказать, что я пытаюсь сделать некоторые формы проверки там ,

Это успешно вводит содержимое следующей страницы ("survey.php") в div формы согласия. «Survey.php» включает в себя следующее, используя функцию СледующаяСтраница(), показанную выше:

$("#csp_form").on('submit', function() { 
    nextPage("other.php"); 
}); 

Но это не может впрыскивать согласие-формы DIV с «other.php».

Теперь, однако, даже валидация формы не работает. Согласно Firebug, библиотека jquery вызвала какую-то ошибку, даже когда я комментирую все функции jquery и javascript, и она застряла в какой-то постоянной операции загрузки. (Эта проблема исправлена.)

Я собираюсь начать бросать вещи. Я пробовал много разных других методов, но никто из них не работал, и я потерял их. Надеюсь, этой последней версии будет достаточно, чтобы получить руководство по этому вопросу.

Извините, что так долго, но обычно люди жалуются, что информации слишком мало, поэтому я хотел убедиться, что все включено.

EDIT:

По желанию, вот тока полное содержание survey.php (с текстовым содержанием изменено в целях обеспечения конфиденциальности):

<script type="text/javascript"> 
    $("#icecream_form").on('submit', function() { 
     nextPage("other.php"); 
     return false; 
    }); 
</script> 

<br> 
<h2>What's your favorite ice cream flavor?</h2> 
<form method="post" id="icecream_form"> 
    <input type="radio" name="icecream" value="vanilla"> Vanilla 
    <br> 
    <input type="radio" name="icecream" value="chocolate"> Chocolate 
    <br> 
    <input type="radio" name="icecream" value="other"> Something else 
    <br> 
    <input type="radio" name="icecream" value="none" checked> I don't have a favorite. 
    <br> 
    <br> 
    <input type="submit" name="icecream_submit" value="Go" onsubmit="return(false)"> 
</form> 

После удара представить содержимое с согласия-формы возвращается с сообщением об ошибке из формы электронной почты («Пожалуйста, введите адрес электронной почты»), подразумевая, что электронная почта была отправлена ​​снова. Я не могу понять, как это возможно, если все вещи из этого div действительно были заменены материалом в survey.php.

+1

Добавьте 'return false' в обработчик отправки, чтобы предотвратить отправку формы по умолчанию. – Barmar

+1

Какая ошибка при сборке библиотеки jquery? – Barmar

+1

FYI, вам не нужно использовать '.empty()' before '.load()', поскольку последний заменяет все в DIV. – Barmar

ответ

0

Я считаю, что проблема была в том, что мне не хватало $(document).ready(function() { до $("#icecream_form").on('submit', function() {. Это позволило на самом деле работать return false;.

Однако я также поменял валидацию формы PHP на версию jQuery и удалил функцию nextPage() вместо того, чтобы иметь только каждую страницу с собственной .load(), поэтому эти вещи также могут иметь значение.

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