Javascript &引用；邮政「；提交多步骤表单后，路由不起作用
我有一个4阶段的表单，用户在其中输入数据，我想使用POST命令。因此，数据可以保存在mongo数据库中，并且可以在另一个页面上使用 使用单个表单POST命令时效果良好Javascript &引用；邮政「；提交多步骤表单后，路由不起作用,javascript,jquery,forms,post,ejs,Javascript,Jquery,Forms,Post,Ejs,我有一个4阶段的表单，用户在其中输入数据，我想使用POST命令。因此，数据可以保存在mongo数据库中，并且可以在另一个页面上使用 使用单个表单POST命令时效果良好 <form action="/addInfoForm" method="post"> Question: <input type="text" name="something" /><br /> <inpu
<form action="/addInfoForm" method="post">
Question: <input type="text" name="something" /><br />
<input type="submit" name="submit" value="Submit me!" />
</form>
问题：
<%- include('../template/header') -%>
<div class="wrapper">
<%- include('../template/sidebar') -%>
<div class="main-panel">
<%- include('../template/navbar') -%>
<div class="content">
<div class="container-fluid">
<!-- your content here -->
<!--Start MultiStep Form -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id="msform" method="POST" action="/addInfoForm">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<!-- Basic Info(1) -->
<fieldset>
<h2 class="fs-title"">Employee Basic Information</h2>
<div class="text-left">
<label for="emp_name">Employee Name</label>
<input type="text" name="emp_name"/>
<div class="row">
<div class="col-md-6">
<label for="f_name">Father's Name</label>
<input name="f_name"></input>
</div>
<div class="col-md-6">
<label for="m_name">Mother's Name</label>
<input type="text" name="m_name"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="emp_deg">Designation</label>
<input type="text" name="emp_deg" ></input>
</div>
<div class="col-md-6">
<label for="n_id">National ID</label>
<input type="text" name="n_id"></input>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="reg">Religion</label>
<select name="reg" >
<option value="" disabled selected hidden>Choose a Religion</option>
<option value="">Islam</option>
<option value="">Hindu</option>
<option value="">Christian</option>
<option value="">Buddha</option>
<option value="">Others</option>
</select>
</div>
<div class="col-md-4">
<label for="gen">Gender</label>
<select name="gen" >
<option value="" disabled selected hidden>Choose a Gender</option>
<option value="">Male</option>
<option value="">Female</option>
<option value="">Others</option>
</select>
</div>
<div class="col-md-4">
<label for="dob">Date of Birth</label>
<input type="date" name="dob" placeholder="Date of Birth"></input>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="blood">Blood Group</label>
<select name="blood" required>
<option value="" disabled selected hidden>Choose Here</option>
<option value="">A+</option>
<option value="">AB+</option>
<option value="">B+</option>
<option value="">0+</option>
<option value="">A-</option>
<option value="">AB-</option>
<option value="">B-</option>
<option value="">0-</option>
<option value="">Others</option>
</select>
</div>
<div class="col-md-4">
<label for="district">District</label>
<select name="district" required>
<option value="" disabled selected hidden>Choose a District</option>
<option value="কক্সবাজার">কক্সবাজার</option>
<option value="হবিগঞ্জ">হবিগঞ্জ</option>
</select>
</div>
<div class="col-md-4">
<label for="marital_Status">Marital Status</label>
<select name="marital_Status" required>
<option value="" disabled selected hidden>Choose Here</option>
<option value="">Married</option>
<option value="">Unmarried</option>
<option value="">Widowed</option>
<option value="">Divorced</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Employee Email</label>
<input type="text" name="email"/>
</div>
<div class="col-md-6">
<label for="phone">Employee Phone</label>
<input type="text" name="phone"/>
</div>
</div>
</div>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<!-- Spouse Info(2) -->
<fieldset>
<h2 class="fs-title">Employee Spouse Information</h2>
<div class="text-left">
<label for="emp_spouse_name">Employee Spouse Name</label>
<input type="text" name="emp_spouse_name"/>
<div class="row">
<div class="col-md-6">
<label for="ocp">Employee Spouse Occupation</label>
<input type="text" name="ocp" ></input>
</div>
<div class="col-md-6">
<label for="s_deg">Employee Spouse Designation</label>
<input type="text" name="s_deg" ></input>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="s_org">Employee Spouse Organization</label>
<input type="text" name="s_org" ></input>
</div>
<div class="col-md-6">
<label for="org_address">Organization Address</label>
<input type="text" name="org_address" ></input>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="s_district">Spouse Home District</label>
<select name="">
<option value="" disabled selected hidden>Choose a District</option>
<option value="কক্সবাজার">কক্সবাজার</option>
<option value="হবিগঞ্জ">হবিগঞ্জ</option>
</select>
</div>
<div class="col-md-6">
<label for="s_phone">Personal Phone Number</label>
<input type="text" name="s_phone"></input>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<!-- Address Info(3) -->
<fieldset>
<h2 class="fs-title">Employee Address Information</h2>
<h2 class="fs-title">Present Address</h2>
<!-- Present Address -->
<div class="text-left">
<div class="row">
<div class="col-md-4">
<label for="pre_house">Village/House & Road</label>
<input type="text" name="pre_house"/>
</div>
<div class="col-md-4">
<label for="pre_postOffice">Post-Office</label>
<input type="text" name="pre_postOffice"/>
</div>
<div class="col-md-4">
<label for="pre_policeStation">Police Station</label>
<input type="text" name="pre_policeStation"/>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="pre_district">District</label>
<input type="text" name="pre_district"/>
</div>
<div class="col-md-4">
<label for="pre_upazilla">Upazila</label>
<input type="text" name="pre_upazilla"/>
</div>
<div class="col-md-4">
<label for="telephone">Resident Telephone</label>
<input type="text" name="pre_telephone"/>
</div>
</div>
</div>
<h2 class="fs-title">Permanent Address</h2>
<!-- Permanent Address -->
<div class="text-left">
<div class="row">
<div class="col-md-4">
<label for="per_house">Village/House & Road</label>
<input type="text" name="per_house"/>
</div>
<div class="col-md-4">
<label for="per_postOffice">Post-Office</label>
<input type="text" name="per_postOffice"/>
</div>
<div class="col-md-4">
<label for="per_policeStation">Police Station</label>
<input type="text" name="per_policeStation"/>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="per_district">District</label>
<input type="text" name="per_district"/>
</div>
<div class="col-md-4">
<label for="per_upazilla">Upazila</label>
<input type="text" name="per_upazilla"/>
</div>
<div class="col-md-4">
<label for="per_telephone">Resident Telephone</label>
<input type="text" name="per_telephone"/>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<!-- Disciplinary Action(4) -->
<fieldset>
<h2 class="fs-title">Employee Disciplinary Action</h2>
<div class="text-left">
<label for="occurance">Occurance</label>
<textarea name="occurance"></textarea>
<label for="occ_date">Occuring Date</label>
<input type="date" name="occ_date" />
<label for="occ_action">Action & Punishment</label>
<textarea name="occ_action"></textarea>
<div class="row">
<div class="col-md-6">
<label for="memo_no">Memo No.</label>
<input type="text" name="memo_no" />
</div>
<div class="col-md-6">
<label for="memo_date">Memo Date</label>
<input type="date" name="memo_date" />
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="submit" name="submit" value="Submit" class="submit action-button" />
</fieldset>
</form>
</div>
</div>
<!-- End of MultiStep Form -->
</div>
</div>
<%- include('../template/footer') -%>
</div>
</div>
<%- include('../template/footerlink') -%>
<!-- MultiStep Form jQuery-->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
// $(".submit").click(function(){
// alert("Please");
// return true;
// })
</script>