如何以多步骤表单提交表单并插入DB
我用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";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
// What should do after this step to connect to isset function?
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
}
</script>
<?php
// I want to reach here after form submission
if (isset($_POST["licensesubmit"]))
{
echo '<pre>' . print_r($_POST, TRUE) . '</pre>';
die();
?>
从本质上讲，javascriptshowTab函数是相同的，但我修改为使用类名。当您达到条件n == ( tabs.length - 1 )时，将按钮的type从常规button更改为submit-如果用户向后移动导致条件发生更改，则将按钮再次更改为常规按钮。
<?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 lang='en'>
<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
)