Как отправить форму с помощью AJAX и вернуть сводку значений ввода - PullRequest
Новая
       0

Как отправить форму с помощью AJAX и вернуть сводку значений ввода

0 голосов
/ 11 мая 2011

У меня есть многочастная форма, и я использую плагин формы jQuery.

Когда пользователь заполняет раздел формы и нажимает кнопку «продолжить», я хотел бы отправить эту информацию на сервер, а затем предоставить сводку предоставленной информации на той же странице.С моим текущим кодом я получаю ошибку, если все поля не заполнены перед отправкой.Я предполагаю, что мой PHP полностью неверен и что информация, которую я ввел после «data:», также неверна.

Любые предложения о том, как заставить это работать должным образом?

PHP: 

$return['message'] = array(); 

if ($_POST['markName1']) {
$return['message'][]='Text' . $_POST['markName1'];
}

if ($_POST['markDescription1']) {
$return['message'][]='More text' . $_POST['markDescription1'];
}

 if ($_POST['YesNo1']) {
$return['message'][]='' . $_POST['YesNo1'];
}

echo json_encode($return);

jQuery: 

$(form).ajaxSubmit({                
   type: "POST",
   data: {
          "markName1" : $('#markName1').val(),
          "markDescription1" : $('#markDescription1').val()
                       },
   dataType: 'json',
   url: './includes/ajaxtest3.php',
 //...
   error: function() {alert("error!");},                    
   success: $('#output2').html(data.message.join('<br />'))
//...

HTML: 

<form id="mark-form">
 <div class="markSelection">
    <input type="checkbox" >
      <label for="standardCharacter"></label>
              <span class="markName-field field">
                <label for="markName1" ></label>
                <input type="text" name="markName1" id="markName1">
              </span>   
         <label for="markDescription1"></label>
         <textarea id="markDescription1" name="markDescription1"></textarea>
       <ul class="YesNo">
         <li>
           <input type="radio" name="YesNo1" value="Yes">
             <label for="Yes">Yes</label>
         </li>
         <li>
           <input type="radio" name="YesNo1" value="No">
           <label for="No">No</label>
         </li>
       </ul>
  </div>
  <div class="step-section">
    <p>
    <span class="next-step">
      <button id="submit-second" class="submit" type="submit" name="next">Next</button>
    </span>
   </p>
 </div>
</form>

1 Ответ

0 голосов
/ 11 мая 2011

Вам не нужны кавычки вокруг этого markName1:$('#markName1').val() или markDescription1 : $('#markDescription1').val()

Попробуйте поставить это для вашего успешного обратного вызова 

success: function(html) {
        alert(html);
    }

Вы должны изменить свой PHP на это: 

$markName1 = $_POST['markName1'];
$markDescription1 = $_POST['markDescription1'];
$YesNo1 = $_POST['YesNo1'];

if(!empty($markName1)){
echo 'Text' . $markName1;
}
if(!empty($markDescription1)){
echo 'More Text' . $markDescription1;
}
if(!empty($YesNo1)){
echo $YesNo1;
}

Примечание Я изменил тип данных функции успеха на html

РЕДАКТИРОВАТЬ 2

создайте кнопку вне <form> и замените ваш ajax следующим: 

$('#submit-button').click(function() {
    $.post('./includes/ajaxtest3.php', $('#mark-form').serialize(), function(html) {
        document.getElementById('someDiv').write(html);
    }
    });
...