I'm finalizing a project of which the form is step by step. I used the template below for this:
It'sworkingproperly,butwitheachstepI'msavingtothedatabase,incasetheinternetortheuser'slightfalls.TheonlyproblemisthatIamnotabletotaketheformvaluestothepageregister.php.I'vetriedthefollowingways:
if(next_step){var$form=$(this);var$inputs=$form.find("input, select, button, textarea");
var serializedData = $form.serialize();
$.post('cadastrar,php', serializedData, function(response) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
console.log("Response: "+response);
});
}
and also this way:
var values = $(this).serialize();
$.ajax({
url: "cadastrar.php",
type: "post",
data: values ,
success: function (response) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
Here is the complete and original code for the file:
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/*
Fullscreen background
*/
$.backstretch("assets/img/backgrounds/1.jpg");
$('#top-navbar-1').on('shown.bs.collapse', function(){
$.backstretch("resize");
});
$('#top-navbar-1').on('hidden.bs.collapse', function(){
$.backstretch("resize");
});
/*
Form
*/
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
}
});
// previous step
$('.f1 .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.f1'), 20 );
});
});
// submit
$('.f1').on('submit', function(e) {
// fields validation
$(this).find('input[type="text"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
HTML
<fieldset>
<h4>Cadastre-se:</h4>
<div class="form-group">
<label class="sr-only" for="Nome">Primeiro Nome:</label>
<input type="text" name="Nome" placeholder="Primeiro Nome" class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="Sobrenome">Sobrenome:</label>
<input type="text" name="Sobrenome" placeholder="Sobrenome" class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="Email">E-mail</label>
<input type="text" name="E-mail" placeholder="E-mail" class="f1-email form-control" id="f1-email">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Próximo</button>
</div>
</fieldset>
In PHP I'm catching the traditional way:
$nome = $_POST["Nome"];
$sobreNome = $_POST["Sobrenome"];
$email = $_POST["Email"];