Форма не отправляет ввод при нажатии кнопки отправить

ProgramBox

Форма не отправляет ввод при нажатии кнопки отправить

Post author:admin
Запись опубликована:20 января, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

Вопрос:

У меня нет большого опыта в PHP и js, но я хотел многоступенчатую форму и нашел бесплатный образец в Интернете, я думал, что смогу настроить и использовать, однако кнопка «Отправить» не приведет меня на страницу действий. Я попытался устранить неполадки и обнаружил, что если я удалю скрипт (4-я последняя строка в 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>

1. как вы размещаете свои файлы?

2. Ну, эта строка здесь js $(".submit").click(function(){ return false; }) удаляет функцию отправки для каждой кнопки отправки, на которой есть класс «отправить», так как она возвращает значение false. Вам следует либо удалить эту часть сценария, либо запустить функцию отправки вручную.

3. Вы возвращаетесь false , когда нажата кнопка отправить. Почему? Если я удалю эту часть фрагмента кода (полностью удалю обработчик щелчка), форма отобразится так, как ожидалось.

4. Кроме того, этот вопрос не имеет ничего общего с PHP.

5. @DanielD спасибо за ответ. Позвольте мне любезно спросить, как запустить его вручную или откуда, куда я должен его удалить. Я знаю, что это все равно что заставлять тебя делать работу. Я новичок в javascript

Ответ №1:

Вы не отправляете форму, просто говорите ничего не делать.

 

$(".submit").click(function(){   
//do anything else before submit
  //here
//then just submit
    $("#msform").submit();

})

Ответ №2:

Таким образом, выполнение .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
}

Метки: Форма не отправляет ввод при нажатии кнопки отправить

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

как мне заменить x-й символ с правого конца строки с помощью javascript?

Как мне отобразить отдельные элементы в списке автозаполнения?

asp.net — Множественный выбор поля выбора Рекомендации по дизайну количества