#html #jquery #forms #multi-step
#HTML #jquery ( jquery ) #формы #многоступенчатая
Вопрос:
- У меня есть форма, в которой мне нужно, чтобы вы действовали в несколько этапов. Проблема, с которой я столкнулся, заключается в том, что кнопка «Предыдущая» работает некорректно, когда я нажимаю на нее, она перенаправляет на предыдущее поле, но, по-видимому, она перезагружает страницу или перенаправляет на «Страница не найдена» и не показывает, что уже заполнено. Каждое поле — это шаг.
- Другая проблема, с которой сталкивается форма, заключается в том, что когда она доходит до последнего поля, страница также перезагружается и не позволяет заполнить поле (которое является флажком) и не нажимает на кнопку «ОТПРАВИТЬ»…
Это ссылка на мою страницу (я загрузил ее на flywheel, потому что я использую WordPress, они должны использовать имя пользователя: flywheel и пароль: red-car, когда при вводе ссылки отображается подсказка)
Это html-код формы:
<form action="" class id="subscribe-form">
<fieldset id="user-email">
<div class="form-group">
<label for="email">Tu correo electrónico es:</label>
<input type="email" name="email" id="email">
</div>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-name">
<div class="form-group">
<label for="text">Y tu nombre es:</label>
<input type="text" name="name" id="text">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-tel">
<div class="form-group">
<label for="tel">Tienes un teléfono con número:</label>
<input type="tel" name="telephone" id="tel">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-country">
<div class="form-group">
<label for="country">Estás ubicado en el país:</label>
<input type="text" name="country" id="country">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-language">
<div class="form-group">
<label for="language">Y tu idioma es:</label>
<input type="text" name="language" id="language">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-terms-conditions">
<div class="form-group">
<input type="checkbox" name="terms-conditions" id="terms-conditions">
<label for="terms-conditions">Por favor acepta los terminos y condiciones</label>
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<input type="submit" value="ENVIAR">
</fieldset>
</form>
Я использую плагин jquery для проверки некоторых полей, и это код, который включает в себя работу кнопки «ДАЛЕЕ» (которая работает нормально) и кнопки «ПРЕДЫДУЩИЙ» (которая вызывает у меня проблему)
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".btn-next").click(function(){
var form = $("#subscribe-form");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
email: {
required: true,
minlength: 3,
},
name: {
required: true,
usernameRegex: true,
minlength: 3,
},
telephone: {
required: true,
},
country: {
required: true,
},
language: {
required: true,
},
},
messages: {
name: {
required: "Tu nombre es necesario",
},
email: {
required: "Tu email es requerido",
},
telephone: {
required: "Es necesario llenar este campo",
},
country: {
required: "Por favor indica tu Pais",
},
language: {
required: "Llena el campo por favor",
},
}
});
if (form.valid() === true) {
if ($('#user-email').is(":visible")) {
current_fs = $('#user-email');
next_fs = $('#user-name');
} else if($('#user-name').is(":visible")) {
current_fs = $('#user-name');
next_fs = $('#user-tel');
} else if($('#user-tel').is(":visible")) {
current_fs = $('#user-tel');
next_fs = $('#user-country');
} else if($('#user-country').is(":visible")){
current_fs = $('#user-country');
next_fs = $('#user-language');
} else if($('#user-language').is(":visible")){
current_fs = $('#user-language');
next_fs = $('#user-terms-conditions');
} else if($('#user-terms-conditions').is(":visible")){
current_fs = $('#user-terms-conditions');
}
next_fs.show();
current_fs.hide();
}
});
//===============This is the part of the code for the 'PREV' button====================
$('.btn-prev').click(function() {
if($('#user-email').is(":visible")) {
current_fs = $('#user-email');
} else if ($('#user-name').is(":visible")){
current_fs = $('#user-name');
next_fs = $('#user-email');
} else if ($('#user-tel').is(":visible")){
current_fs = $('#user-tel');
next_fs = $('#user-name');
} else if ($('#user-country').is(":visible")){
current_fs = $('#user-country');
next_fs = $('#user-tel');
} else if ($('#user-language').is(":visible")){
current_fs = $('#user-language');
next_fs = $('#user-country');
} else if ($('#user-terms-conditions').is(":visible")){
current_fs = $('#user-terms-conditions');
}
next_fs.show();
current_fs.hide();
});
});
Пожалуйста, помогите мне в этом
Ответ №1:
Потому что тип кнопки по умолчанию — отправить. Когда вы нажимаете на предыдущую кнопку, форма отправляется. Я думаю, что добавление ‘type =»button»‘ ко всем кнопкам решит проблему.
<button type="button" class="btn-prev">...</button>