У меня есть форма, которая выглядит следующим образом в файле PHP (внутри плагина Wordpress). Форма также обрабатывается внутри этого же файла.Отправить форму в шагах через AJAX
Я хочу сохранить эту форму в «шагах». Например, пользователь будет выбирать 4-5 вариантов на стр. 1, затем я хочу, чтобы AJAX публиковал выбор. Затем пользователь переходит на страницу 2, варианты снова сохраняются и т. Д. На последней странице будет CAPTCHA для окончательного представления (если это даже имеет значение, я не знаю в этом конкретном случае).
Я хочу использовать весь интерфейс как одну форму, а затем скрыть/показать каждую страницу внутри <div>
с помощью 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>
Посмотрите: http://www.smarttutorials.net/multi-step-signup-form-using-jquery-ajax-php-html5-and-css3/ –