0
I am finishing a project of which the form is step by step. I used the template below for this:
It is working correctly, but every step I am saving in the database, in case the internet or the user light falls. The only problem is that I am not able to take the form values to the registration page.php. I have tried it in the following ways:
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 in that 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);
}
});
Below is the complete and original code of 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 taking the traditional way:
$nome = $_POST["Nome"];
$sobreNome = $_POST["Sobrenome"];
$email = $_POST["Email"];
already tried to put a date { Name: 'a', Surname: 'b', Email: 'c' } in the ajax type='POST' there that you created to test if you are going to another page the data?
– Paulo Roberto Rosa
Hello Paulo. But how would I get the name of these fields within the project code ?
– user24136
in the
cadastrar.php
thereby<?php echo $_POST['Nome']; ?>
if you want to show in html or play inside somewhere in js– Paulo Roberto Rosa
Actually the problem is not in php but in jquery which does not pass the values to the file register.php
– user24136
Sorry Paulo. I wasn’t clear on my last question. "But how would I get the name of these fields inside the Jquery code in the project ?"
– user24136
So... if your jQuery code is inside a tag
<script>
that is inside a file.php
vc can simply declare a Javascript variable receiving the php value in this way:var nome = "<?php echo $_POST['Nome']; ?>";
– Paulo Roberto Rosa
Right. Thank you Paulo, but I managed to solve in jquery itself. I will post the answer.
– user24136