如何提交表單使用AJAX和返回輸入的彙總值

Question

我有一個多形式，並且正在使用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> 

Answer 1

你不需要解決此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

EDIT 2

的<form>之外創建一個按鈕，並替換阿賈克斯與此：

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