手順 1でボタンをクリックしたまま、
対応するテーブルに挿入し、挿入されたIDを取得します
挿入された id 値をフォームの非表示の型に保持します。
手順 2でボタンをクリックしたまま、
- 挿入されたテーブル行データのそれぞれの列とその値を、フォームに保持したIDで更新する必要があります
すべてのステップが完了するまで、同じプロセスを続けます。
<script>
$(document).ready(function() {
$("#next").click(function() {
var currentStep = $('#currentStep').val(); // based on the step you need use some switch or conditional block to pass data and store it accordingly.
// insertedId ==0 means you need to insert into table, if it not you need update the column in table
var formdata = {insertedId:$("#insertedId").val(),currentStep:currentStep, first:$("#first").val()};
$.ajax({
type: "POST",
url: "form.php",
dataType:'json',
data: formdata
})
.done(function( data ) {
var NextStep =parseInt(currentStep)+1;
$("#currentStep").val(NextStep);
$("#insertedId").val(data.insertedId);
$("#step"+currentStep).hide();
$("#step"+NextStep).show();
});
});
});
</script>
HTML:
<div id="step1">Step 1:
<input type="text" name="first" id="first" value="">
</div>
<div id="step2" style="display:none;">Step 2:
<input type="text" name="last" id="last" value="">
</div>
<input type="hidden" name="insertedId" id="insertedId">
<input type="hidden" name="currentStep" id="currentStep" value="1">
<button id="next">Next</button>