如何以多步驟形式提交表單并插入數據庫我制作了一個類似于多步驟上一個下一個按鈕的表單，也是使用js制作的?，F在我想提交表單并在 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 關注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消