I have a form in which I need you to function in multi steps. The problem I have is that the 'Prev' button does not work correctly, when I click it, it redirects to the previous field but apparently it reloads the page, or redirects to 'Page not found' and does not show what is already filled. Each field is a step.
Another problem that the form has, is that when it reaches the last field, the page is also reloaded and it does not allow to fill the field (which is a checkbox) and neither click on 'SEND' ...
This is the link of my page (I uploaded it to flywheel because I am using wordpress, they must use the username: flywheel and the password: red-car when the prompt is shown when entering the link)
This is the html of the form:
<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>
I am using the jquery plugin to validate some fields and this is the code that includes the operation of the 'NEXT' button (which works fine) and the 'PREV' button (which is giving me a problem)
$(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();
});
});
Please help me in this
Because the default type of button is submit. When you click on the prev button the form is submitted. I think adding 'type="button"' to all buttons will solve the problem.
<button type="button" class="btn-prev">...</button>