通過AJAX提交表單步驟

Question

我在PHP文件（在Wordpress插件中）中有一個如下所示的表單。表單也在同一個文件內處理。

我想將此表單保存爲「步驟」。例如，用戶將在第1頁上選擇4-5個選項，然後我希望AJAX發佈選擇。然後用戶進入第2頁，再次保存選擇等。最後一頁將有最後提交的驗證碼（如果更重要，我不知道在這個特定情況下）。

我想將整個界面作爲一個表單使用，然後使用jQuery隱藏/顯示<div>中的每個頁面。

我想知道：

1）如何提交使用AJAX的用戶選擇這種特定類型的形式。

2）在「步驟」中瀏覽此表單的最有效方式是什麼？

3）我還希望每個頁面在表單驗證時都能獨立運行。是否有可能做到這一點？

  <form id="quotation_form" name="form" action="#" method="post"> 
       <div id="page1"> 
       <div id="step0_header" class="steps-headers" onClick="step0ToggleClick();">Step 1<span style="margin-left:30px;">Sun Exposure</span></div> 
       <div id="step0" class="quotation-steps"><strong>Describe the sun exposure of your planter...</strong><br/> 
        <div class="radio-container"><input type="radio" name="sun_exposure" id="sun_exposure_sunny_most" value="sunny_most"<?php checked('sunny_most',$_POST['sun_exposure']); ?> /><label class="label-quotation-steps">Sunny most of the day</label><br class="clear"/></div> 
        <div class="radio-container"><input type="radio" name="sun_exposure" id="sun_exposure_shady_morning" value="shady_morning"<?php checked('shady_morning',$_POST['sun_exposure']); ?> /><label class="label-quotation-steps">Shady Morning (Sunny Afternoon)</label><br class="clear"/></div> 
        <div class="radio-container"><input type="radio" name="sun_exposure" id="sun_exposure_sunny_morning" value="sunny_morning"<?php checked('sunny_morning',$_POST['sun_exposure']); ?> /><label class="label-quotation-steps">Sunny Morning (Shady Afternoon)</label><br class="clear"/></div> 
        <div class="radio-container"><input type="radio" name="sun_exposure" id="sun_exposure_shady_most" value="shady_most"<?php checked('shady_most',$_POST['sun_exposure']); ?> /><label class="label-quotation-steps">Shady most of the day</label><br class="clear"/><br class="clear"/></div> 
       </div> 

       <div id="step1_header" class="steps-headers" onClick="step1ToggleClick();">Step 2<span style="margin-left:30px;">Height</span></div> 
        <div id="step1" class="quotation-steps"><strong>What is the height of your planter?</strong><br /> 
        <div class="radio-container"><input type="radio" name="height" id="height_1" value="height_1"<?php checked('height_1',$_POST['height']); ?>/><label class="label-quotation-steps">8 to 14 inches</label><br class="clear"/></div> 
        <div class="radio-container"><input type="radio" name="height" id="height_2" value="height_2"<?php checked('height_2',$_POST['height']); ?>/><label class="label-quotation-steps">15 to 20 inches</label><br class="clear"/></div> 
        <div class="radio-container"><input type="radio" name="height" id="height_3" value="height_3"<?php checked('height_3',$_POST['height']); ?>/><label class="label-quotation-steps">21 inches or more</label><br class="clear"/><br class="clear"/></div> 
        </div> 

        <input type="button" name="get_quote" id="get_quote" value="Save choices and continue..." class="request_quotation_btn" /> 
        <input type="hidden" name="submit" value="true" /> 
       </div> <!-- #page1 --> 

       <div id="page2"> 
       <!-- Page2 stuff will go here, and is located in this same form. --> 
       </div> 
      </form> 

Answer 1

我最近偶然發現了一些整潔的代碼實現形式嚮導。 （所以步驟：1,2,3） http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/

看看演示的源代碼。真正的庫函數是通過使用這個插件http://malsup.com/jquery/form/稱爲formToWizard.js

1. 。 （當然，你也可以使用普通的js）

2. 這也是由圖書館提供的。 （#link 1）

3. 取決於您的 驗證機制。