javascript - 按下提交按钮时表单未提交输入

问题描述

我在 PHP 和 js 方面没有太多经验，但我想要一个多步骤表单，并在网上找到了一个免费示例，我认为我可以自定义和使用，但是提交按钮不会将我带到操作页面。我已经尝试过故障排除，我发现如果我删除一个脚本（html 中的第 4 行），<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>

标签： javascripthtmljquerycss

javascript - 按下提交按钮时表单未提交输入

问题描述

解决方案

推荐阅读