Form values are not coming in the PHP file

Question

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"];

Answer 1

I managed to solve by adding the lines:

var inputs = parent_fieldset.find('input[type="text"], select, textarea');
var serializedData = inputs.serialize();
$.post('cadastrar.php', serializedData, function(response) {

if(response == 1){
             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 );  
                });
}else{
   parent_fieldset.fadeOut(400, function() { 
       $("#erro").html("<div class='alert alert-danger'><i class=\"icofont icofont-broken\" style=\"font-size: 20px\"></i> OPS... TIVEMOS UM PROBLEMA DO LADO DE CÁ!<br>Se o erro persistir, entre em contato com [email protected].<br><button type=\"button\" class=\"btn btn-danger\" onclick=\"window.location.href='pre-matricula/'\">Voltar</button></div>");
   }); 
}       

});