如何以多步骤形式提交表单并插入数据库我制作了一个类似于多步骤上一个下一个按钮的表单，也是使用js制作的。现在我想提交表单并在 php 中发送到数据库表单 HTML：<form action="method.php" method="post" name="htlregistration_F" id="htlregistration_F" enctype="multipart/form-data" > <section id="form_part1" class="tab" > <h3 class="bodytext bodyheading " ><strong>Applicant Details</strong></h3> <label class="bodytext">Applicant First Name<span class="redtext"> *</span> <input name="appfirstname_f" type="text" id="appfirstname_f" class="input form-control" maxlength="25" required> <span class="redtext" id="errorFirst" >(Max length 25 chars)</span> </label> </section> <section id="form_part4" class="tab " > <h3 class="bodytext bodyheading " ><strong>Contact Details</strong></h3> <label class="bodytext" >Phone (Mobile)<span class="redtext" id="errorMobile"> *</span> <input name="phmob_f" type="text" id="phmob_f" class="input form-control" minlength="10" maxlength="10" required=""> <span class="redtext">(Max length 10 chars)</span> </label> </section> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">« Previous</button> <button type="button" id="nextBtn" name="licensesubmit" onclick="nextPrev(1)">» Next </button> </div> </div> </form>我的页面脚本<script> var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the current tab function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; }
1 回答
Smart猫小萌
TA贡献1911条经验 获得超7个赞
本质上，javascriptshowTab函数是相同的，但我修改为使用类名。当您达到条件时，将按钮的 按钮从常规按钮n == ( tabs.length - 1 )更改为 - 如果用户向后移动条件发生变化，则将按钮再次更改回常规按钮。typebuttonsubmit
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/* to emulate `method.php` ... process FORM submission... */
if( isset( $_POST['licensesubmit'] ) ){
$_POST['banana']='curvy yellow fruit'; #this will only be visible IF isset( $_POST['licensesubmit'] ) is TRUE
}
exit( sprintf( '<pre>%s</pre>',print_r($_POST,true) ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Multi-stage form</title>
<style>
body *{font-family:monospace;box-sizing:border-box;}
section{border:1px solid gray;margin:1rem;width:calc( 100% - calc( 4rem + 2px ) );padding:1rem }
.tab{display:none;}
.visible{display:block;}
.stage1{background:whitesmoke;}
.stage2{background:rgba(0,255,0,0.1);}
.stage3{background:rgba(0,0,255,0.1);}
.stage4{background:rgba(255,0,0,0.1);}
</style>
<script>
function showTab(n) {
let prev=document.getElementById('prevBtn');
let next=document.getElementById('nextBtn');
let tabs = document.getElementsByClassName('tab');
Array.from( tabs ).forEach( tab=>{
if( tab.classList.contains('visible') )tab.classList.remove('visible');
})
tabs[ n ].classList.add('visible');
prev.style.display=( n==0 ) ? 'none' : 'inline';
if( n == ( tabs.length - 1 ) ) {
next.innerHTML = 'Submit';
next.type='submit';
} else {
next.innerHTML = 'Next';
next.type='button'
}
};
function nextPrev(i){
currentTab=currentTab + i;
showTab( currentTab );
};
let currentTab=0;
document.addEventListener('DOMContentLoaded',()=>{
showTab( currentTab );
});
</script>
</head>
<body>
<form method='post' name='htlregistration_F'><!-- removed action so that this form POSTS to the same page for demonstration -->
<section id='form_part1' class='tab stage1'>
<h3 class='bodytext bodyheading ' ><strong>Applicant Details</strong></h3>
<label class='bodytext'>Applicant First Name<span class='redtext'> *</span>
<input name='appfirstname_f' type='text' class='input form-control' maxlength='25' required />
<span class='redtext' id='errorFirst' >(Max length 25 chars)</span>
</label>
</section>
<section id='form_part2' class='tab stage2'>
<h3 class='bodytext bodyheading ' ><strong>Applicant Juggling ability</strong></h3>
<label class='bodytext'>Can you juggle hedgehogs?<span class='redtext'> *</span>
<input name='appjuggle' type='text' class='input form-control' maxlength='25' required />
<span class='redtext' >(Max length 25 chars)</span>
</label>
</section>
<section id='form_part3' class='tab stage3'>
<h3 class='bodytext bodyheading ' ><strong>Applicant ESP Level</strong></h3>
<label class='bodytext'>ESP ability<span class='redtext'> *</span>
<input name='appesp' type='text' class='input form-control' maxlength='25' required />
<span class='redtext' >(Max length 25 chars)</span>
</label>
</section>
<section id='form_part4' class='tab stage4'>
<h3 class='bodytext bodyheading ' ><strong>Contact Details</strong></h3>
<label class='bodytext' >Phone (Mobile)<span class='redtext' id='errorMobile'> *</span>
<input name='phmob_f' type='text' class='input form-control' minlength='10' maxlength='10' required />
<span class='redtext'>(Max length 10 chars)</span>
</label>
</section>
<div style='overflow:auto;'>
<div style='float:right;'>
<button type='button' id='prevBtn' onclick='nextPrev(-1)'>« Previous</button>
<button type='button' id='nextBtn' name='licensesubmit' onclick='nextPrev(1)'>» Next </button>
</div>
</div>
</form>
</body>
</html>
输出类似于：
Array
(
[appfirstname_f] => geronimo
[appjuggle] => fluently
[appesp] => none
[phmob_f] => 0141 353 3
[licensesubmit] =>
[banana] => curvy yellow fruit
)
- 1 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消