Javascript 如何使用PHP向数据库提交多步骤表单
我正在尝试使用多步骤表单this link:（）构建调查/问卷，但我似乎无法让它将输入提交到我的数据库Javascript 如何使用PHP向数据库提交多步骤表单,javascript,php,html,jquery,css,Javascript,Php,Html,Jquery,Css,我正在尝试使用多步骤表单this link:（）构建调查/问卷，但我似乎无法让它将输入提交到我的数据库 $connect = new PDO("mysql:host=localhost;dbname=treasure", "root", ""); $message = ''; if(isset($_POST["email"])) { sleep(5); $query = " INSERT INTO personal_information (fname, lname, age, dob
$connect = new PDO("mysql:host=localhost;dbname=treasure", "root", "");
$message = '';
if(isset($_POST["email"]))
{
sleep(5);
$query = "
INSERT INTO personal_information
(fname, lname, age, dob, gender, relationship) VALUES
(:fname, :lname, :age, :dob, :gender, :relationship)
";
$user_data = array(
':fname' => $_POST["fname"],
':lname' => $_POST["lname"],
':age' => $_POST["age"],
':dob' => $_POST["dob"],
':gender' => $_POST["gender"],
':relationship' => $_POST["relationship"]
);
$statement = $connect->prepare($query);
if($statement->execute($user_data))
{
$message = '
<div class="alert alert-success">
Registration Completed Successfully
</div>
';
header("Location:survey_dashboard.php");
}
else
{
$message = '
<div class="alert alert-success">
There is an error in Registration
</div>
';
}
}
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
</style>
<body>
<form id="regForm" method="post">
<div class="text-center mb-4">
<h1 class="h4 text-gray-900 ">Personal Information</h1>
<p><center>(Please answer all questions as accuractely and honestly as possibly)</center></p>
</div>
<br>
<!-- One "tab" for each step in the form: -->
<div class="tab">
<label> What Is Your Name:</label>
<p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
</div>
<div class="tab">
<label>What Is Your Age:</label>
<input type="number" name="age" value="" min="1">
</div>
<div class="tab">
<label>What Is Your Date Of Birth:</label>
<input type="date" id="dob" name="dob">
</div>
<center><div class="tab">what is your gender:
<div class="col-sm-2"><br>
<select class="form-control inputstl" id="gender" name="gender">
<option selected disabled> Select </option>
<option> Male </option>
<option> Female</option>
<option> Other</option>
</select>
</div>
</div></center>
<center><div class="tab">what is your relationship Status:
<div class="col-sm-2"><br>
<select class="form-control inputstl" id="relationship" name="relationship">
<option selected disabled> Select </option>
<option> Single Never Married </option>
<option> Domestic Partnership</option>
<option> Married</option>
<option> Seperated</option>
<option> Prefer Not to say</option>
<option> None Of The Above</option>
</select>
</div>
</div></center>
<center><div class="tab">
<p>we care about the quality of our survey data and hope to receive the most
accurate measures of your opinions, so it is important to us that you thoughtfully
provide your best answer to each question in the survey, Do you commit to providing
your thoughtful and honest answers to the questions in the survey?</p>
</div></center><br>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</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";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
</body>
</html>
$connect=new-PDO（“mysql:host=localhost；dbname=treasure”、“root”、“根”）；
$message=''；
如果（isset（$_POST[“email”]））
{
睡眠（5）；
$query=”
在个人信息中插入
（fname、lname、年龄、出生日期、性别、关系）值
（：fname，：lname，：age，：dob，：gender，：relationship）
";
$user\u data=数组(
“：fname'=>u POST[“fname”]，
':lname'=>$\u POST[“lname”]，
'：age'=>u POST[“age”]，
':dob'=>u POST[“dob”]，
“：gender”=>$\u POST[“gender”]，
':relationship'=>$\u POST[“relationship”]
);
$statement=$connect->prepare（$query）；
如果（$statement->execute（$user\u data））
{
$message='1
注册已成功完成
';
标题（“位置：survey_dashboard.php”）；
}
其他的
{
$message='1
注册中有一个错误
';
}
}
?>
* {
框大小：边框框；
}
身体{
背景色：#f1f1；
}
#正则表达式{
背景色：#ffffff；
保证金：100像素自动；
字体系列：雷威；
填充：40px；
宽度：70%；
最小宽度：300px；
}
h1{
文本对齐：居中；
}
输入{
填充：10px；
宽度：100%；
字号：17px；
字体系列：雷威；
边框：1px实心#AAAAA；
}
/*标记在验证时出错的输入框：*/
输入无效{
背景色：#ffdddd；
}
/*默认情况下隐藏所有步骤：*/
.标签{
显示：无；
}
钮扣{
背景色：#4CAF50；
颜色：#ffffff；
边界：无；
填充：10px 20px；
字号：17px；
字体系列：雷威；
光标：指针；
}
按钮：悬停{
不透明度：0.8；
}
#prevBtn{
背景色：#bbbbbb；
}
/*制作圆圈，指示表格的步骤：*/
.步骤{
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbbbbb；
边界：无；
边界半径：50%；
显示：内联块；
不透明度：0.5；
}
.step.active{
不透明度：1；
}
/*标记已完成且有效的步骤：*/
.一步完成{
背景色：#4CAF50；
}
个人信息
（请尽可能准确、诚实地回答所有问题）
你叫什么名字？
您的年龄：
您的出生日期：
您的性别：
挑选
男性
女性
其他
您的关系状况如何：
挑选
未婚
国内伙伴关系
已婚的
分开
宁愿不说
以上都没有
我们关心调查数据的质量，并希望收到最多的数据
准确衡量您的意见，因此，您深思熟虑对我们很重要
为调查中的每个问题提供最佳答案，您是否承诺提供
您对调查中问题的深思熟虑和诚实回答？
以前的
下一个
var currentTab=0；//当前选项卡设置为第一个选项卡（0）
显示选项卡（当前选项卡）；//显示当前选项卡
功能显示选项卡（n）{
//此函数将显示表单的指定选项卡。。。
var x=document.getElementsByClassName（“选项卡”）；
x[n].style.display=“块”；
//…并修复上一个/下一个按钮：
如果（n==0）{
document.getElementById（“prevBtn”）.style.display=“无”；
}否则{
document.getElementById（“prevBtn”）.style.display=“inline”；
}
如果（n==（x.length-1））{
document.getElementById（“nextBtn”）.innerHTML=“提交”；
}否则{
document.getElementById（“nextBtn”）.innerHTML=“Next”；
}
//…并运行一个功能，该功能将显示正确的步进指示器：
固定步进指示器（n）
}
函数nextPrev（n）{
//此函数将确定要显示的选项卡
var x=document.getElementsByClassName（“选项卡”）；
//如果当前选项卡中的任何字段无效，请退出该功能：
如果（n==1&&！validateForm（））返回false；
//隐藏当前选项卡：
x[currentTab].style.display=“无”；
//将当前选项卡增加或减少1：
currentTab=currentTab+n；
//如果您已到达表单的末尾。。。
如果（currentTab>=x.length）{
//…表格将在以下时间提交：
document.getElementById（“regForm”）.submit（）；
返回false；
}
//否则，显示正确的选项卡：
显示选项卡（当前选项卡）；
}
函数validateForm（）{
//此函数用于验证表单字段
变量x，y，i，valid=true；
x=document.getElementsByClassName（“选项卡”）；
y=x[currentTab].getElementsByTagName（“输入”）；
//检查当前选项卡中每个输入字段的循环：
对于（i=0；iif(isset($_POST["email"]))
if(isset($_POST["fname"]))