Php 通过AJAX分步提交表单

我在PHP文件（Wordpress插件内部）中有一个如下所示的表单。表单也在同一个文件中处理

我想在“步骤”中保存此表单。例如，用户将在第1页上选择4-5个选项，然后我希望AJAX发布选项。然后用户进入第2页，再次保存选项，等等。最后一页将有最终提交的验证码（如果这很重要，我不知道在这种情况下）

我希望将整个界面作为一个表单使用，然后使用jQuery隐藏/显示

中的每个页面

我想知道：

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>

步骤1阳光照射
描述你的花盆的阳光照射…

/>晴朗的早晨（晴朗的下午）

/>白天大部分时间都是阴凉的
第2步高度
你的花盆有多高？

/>15至20英寸
我最近偶然发现了一些实现表单向导的简洁代码。（按步骤1、2、3）

看一下演示的源代码。实际的库名为
formToWizard.js

通过使用这个插件。（当然，您也可以使用纯js）

这也是由图书馆提供的。（#链接1）

取决于你的
验证机制

看看：