表单分成4部分怎么让每一部分提交都能提交到数据库里

Question

表单分成4部分怎么让每一部分提交都能提交到数据库里

之前写的是这样的：

    
<form action="surveyajax.php?action=survey_add"  method="post" onsubmit="return checkFromD();">
        
<h1><label for="mode"><strong>1.第一部分</strong></label></h1>
问题1：<input type="text" name="q1" value="" required /><br />
...<br />
问题10：<input type="text" name="q10" value="" required />
        
        
<h1><label for="mode"><strong>2.第二部分</strong></label></h1>
问题11：<input type="text" name="q11" value="" required /><br />
...<br />
问题20：<input type="text" name="q20" value="" required />
        
        
<h1><label for="mode"><strong>3.第三部分</strong></label></h1>
问题21：<input type="text" name="q21" value="" required /><br />
...<br />
问题30：<input type="text" name="q30" value="" required />
        
<h1><label for="mode"><strong>4.第四部分</strong></label></h1>
问题31：<input type="text" name="q31" value="" required /><br />
...<br />
问题40：<input type="text" name="q40" value="" required />


<input type="submit" name="btnSubmit" value="提交" id="btnSubmit" /> 
</form>

surveyajax.php内容：

if($action == "survey_add") 
{
$data = GetSqlArray($_POST);
$href=$data[url];
$href2 = '/survey_add.html';

$datas[q1] = $data[q1];
$datas[q2] = $data[q2];
$datas[q3] = $data[q3];
$datas[q4] = $data[q4];
$datas[q5] = $data[q5];
$datas[q6] = $data[q6];
$datas[q7] = $data[q7];
$datas[q8] = $data[q8];
$datas[q9] = $data[q9];
$datas[q10] = $data[q10];
$datas[q11] = $data[q11];
$datas[q12] = $data[q12];
$datas[q13] = $data[q13];
$datas[q14] = $data[q14];
$datas[q15] = $data[q15];
$datas[q16] = $data[q16];
$datas[q17] = $data[q17];
$datas[q18] = $data[q18];
$datas[q19] = $data[q19];
$datas[q20] = $data[q20];
$datas[q21] = $data[q21];
$datas[q22] = $data[q22];
$datas[q23] = $data[q23];
$datas[q24] = $data[q24];
$datas[q25] = $data[q25];
$datas[q26] = $data[q26];
$datas[q27] = $data[q27];
$datas[q28] = $data[q28];
$datas[q29] = $data[q29];
$datas[q30] = $data[q30];
$datas[q31] = $data[q31];
$datas[q32] = $data[q32];
$datas[q33] = $data[q33];
$datas[q34] = $data[q34];
$datas[q35] = $data[q35];
$datas[q36] = $data[q36];
$datas[q37] = $data[q37];
$datas[q38] = $data[q38];
$datas[q39] = $data[q39];
$datas[q40] = $data[q40];

     
$datas['time'] = date("Y-m-d H-i-s");
$datas[ip] = getenv(REMOTE_ADDR);
$sql = AddSql($datas,'tb_survey',array("sub"));
if($sql[MessageID]==1){

ShowMessages($href2,'successful');
}else {
echo "<script>alert('error!');history.go(-1)</script>";
}
} 
    

以上是一个表单，表单里包括文本框、多选、单选等，以上这样保存没问题，能保存到数据库里，现在需要把上面拆分成4个部分，要求第一个部分填完点保存能保存到数据库里，保存后自动跳到第二部分，填完第二部分点保存能把第二部分保存到第一部分的这条数据的后面字段，保存后自动跳到第三部分，以此类推，直到第四部分保存完。

用什么办法？

怎么做，麻烦帮我写下代码，前端后端的代码都帮我详细写一下

Answer 1

直接放不同容器里面显示隐藏，最后再一起提交保存，搞假的话上一步下一步可以直接显示成保存，最后一步再提交保存
而且你前端checkFromD这个验证函数也要改过。。具体代码是什么要贴出来，简单逻辑如下

<style>
    .hide {
        display: none
    }
</style>
<form action="surveyajax.php?action=survey_add" method="post" onsubmit="return checkFromD();">
    <div>
        <h1><label for="mode"><strong>1.第一部分</strong></label></h1>
        问题1：<input type="text" name="q1" value="" required /><br />
        ...<br />
        问题10：<input type="text" name="q10" value="" required />
        <input type="submit"  value="提交" class="btnNext"/>
    </div>
    <div class="hide">
        <h1><label for="mode"><strong>2.第二部分</strong></label></h1>
        问题11：<input type="text" name="q11" value="" required /><br />
        ...<br />
        问题20：<input type="text" name="q20" value="" required />
        <input type="submit" value="提交" class="btnNext" />
    </div>
    <div class="hide">

        <h1><label for="mode"><strong>3.第三部分</strong></label></h1>
        问题21：<input type="text" name="q21" value="" required /><br />
        ...<br />
        问题30：<input type="text" name="q30" value="" required />
        <input type="submit" value="提交" class="btnNext" />
    </div>
    <div class="hide">
        <h1><label for="mode"><strong>4.第四部分</strong></label></h1>
        问题31：<input type="text" name="q31" value="" required /><br />
        ...<br />
        问题40：<input type="text" name="q40" value="" required />


        <input type="submit" name="btnSubmit" value="提交" id="btnSubmit" />
    </div>
</form>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    $('.btnNext').click(function () {
        $(this).parent().addClass('hide').next().removeClass('hide');

        return false;
    })
</script>