我在 PHP 和 js 方面没有太多经验，但我想要一个多步骤表单，并在网上找到了一个免费示例，我以为我可以自定义和使用，但是提交按钮不会将我带到操作页面。我尝试过故障排除，我发现如果我删除一个脚本（html 中的最后一行）<script src="https://www.jqueryscript.net/demo/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3/js/jquery.easing.min.js">，那么表单可以完美运行，但样式却很混乱。当我返回它时，表单看起来又好了，但它不会提交。我希望表格能够提交并保持原样。这是我第一次发帖，我希望我遵循了指导方针，我的问题是可以理解的。提前致谢
$(function() {
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
next_fs.show();
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
scale = 1 - (1 - now) * 0.2;
left = (now * 50)+"%";
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 1000,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
previous_fs.show();
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
scale = 0.8 + (1 - now) * 0.2;
left = ((1-now) * 50)+"%";
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 1000,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})
}); @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin: 0;
padding: 0;
}
body{
font-family: Raleway;
}
h3{
color: #002e6d;
font-size:18px;
line-height:28.8px;
font-weight:700;
margin:0px 0px 30px;
}
#title {
color: #002e6d;
font-size:18px;
line-height:28.8px;
font-weight:700;
margin:0px 0px 30px;
}
#msform{
width: 85%;
margin: 50px auto;
position: relative;
}
#msform fieldset{
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
position: absolute;
}
#msform fieldset:not(:first-of-type){
display: none;
}
#msform fieldset{
text-align: left;
}
#msform textarea{
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: Raleway;
color: #2C3E50;
font-size: 13px;
}
#msform input{
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: Raleway;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button{
width: 100px;
background: #002e6d;
font-weight: 400;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus{
box-shadow: 0 0 0 2px white, 0 0 0 3px #002e6d;
}
.fs-title{
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
font-weight:500;
}
.fs-subtitle{
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 0px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: #D2D2D2;
text-transform: capitalize;
font-size: 16px;
width: 25%;
float: left;
position: relative;
}
#progressbar li.active {
color: #002e6d;
}
#progressbar li:before{
content:'' ;/*counter(step)*/
counter-increment: step;
width: 50px;
line-height: 50px;
display: block;
font-size: 18px;
color:#fff ;
background: transparent;
border-radius: 100%;
margin: 0 auto 5px auto;
border: 2px solid #ECECEC;
}
#progressbar li:nth-child(1):before{
content:"\f129" ;
font-family: 'FontAwesome';
color: #002e6d;
}
#progressbar li:nth-child(2):before{
content:"\f015" ;
font-family: 'FontAwesome';
color: #80858a;
border: 2px solid #80858a;
}
#progressbar li:nth-child(3):before{
content:"\f007" ;
font-family: 'FontAwesome';
color: #80858a;
border: 2px solid #80858a;
}
#progressbar li:nth-child(4):before{
content:"\f15c" ;
font-family: 'FontAwesome';
color: #80858a;
border: 2px solid #80858a;
}
#progressbar li:after {
content: '';
width: 73%;
height: 2px;
background: #ECECEC;
position: absolute;
left: -35%;
top: 25px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before {
border: 2px solid #002e6d;
color: white;
background-color:#002e6d;
/* content: "\f164";*/
}
#progressbar li.active:after {
background: #002e6d;
color: white;
}
.form_holder {
text-align: center;
margin: 30px 0 0;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div class="form_holder">
<h2 class="fs-title" style="color: red;">MULTISPTEP FORM</h2>
<hr>
<form id="msform" action="page2.php" method="POST">
<ul id="progressbar">
<li class="active">step1</li>
<li>step2</li>
<li>step3</li>
<li>step4</li>
</ul>
<fieldset>
<h3>SOME HEADER</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 class="fs-title" id="title">First</h2>
<h3 class="fs-subtitle">Step 1 of 4</h3>
<input type="password" name="1" placeholder="input1" required="" />
<input type="password" name="2" placeholder="input2" required="" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Second</h2>
<h3 class="fs-subtitle">Step 2 of 4</h3>
<input type="text" name="3" placeholder="input3" required="" />
<input type="text" name="4" placeholder="input4" required="" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Third</h2>
<h3 class="fs-subtitle">Step 3 of 4</h3>
<input type="text" name="5" placeholder="input5" required="" />
<input type="text" name="6" placeholder="input6" required="" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Fourth</h2>
<h3 class="fs-subtitle">Step 4 OF 4</h3>
<input type="text" name=7 placeholder="input7" required="" />
<input type="text" name="8" placeholder="input8" required="" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<!--input type="submit" name="submit" class="submit action-button" value="Submit" />-->
<button type="submit" class="submit action-button">Submit</button>
</fieldset>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3/js/jquery.easing.min.js"></script>
<script src="./script.js"></script>
</body>
</html>答案 0 :(得分：1)
你不是在发送表格，只是告诉什么都不做。
$(".submit").click(function(){
//do anything else before submit
//here
//then just submit
$("#msform").submit();
})
答案 1 :(得分：0)
因此，执行 .submit() 会以常规方式触发提交功能。相反，你应该这样做
$('#msform').submit(function (e) {
e.preventDefault() // to bypass the page refresh
console.info($(this).serialize()); // to see what you're posting / if anything
// do ajax or anything else you want here, just remember that $(this) references the form
}