Jquery/Ajax form Post data is not working

Question

I'm not expert with Jquery. I've built a 4 steps html form like

<form id="msform" enctype="multipart/form-data">
    <fieldset id="publish1" data-check-id="1">
        //some inputs
    </fieldset>
    <fieldset id="publish2" data-check-id="2">
        //some inputs
    </fieldset>
    <fieldset id="publish3" data-check-id="3">
        //some inputs
    </fieldset>
    <fieldset id="publish4" data-check-id="4">
        <input type="submit" class="submit action-button pull-right top-35" value="Publish"/>
    </fieldset>
</form>

and after writing some Jquery validation in my .js file, I've tried to pass my data to a php file through ajax. My formData function looks like this:

<script>
    function formData() {
        var serializedValues = jQuery("#msform").serialize();
        var form_data = {
            action: 'ajax_data',
            type: 'post',
            data: serializedValues,
        };
        jQuery.post('mypath/insert.php', form_data); //where data should be sent
        return true;
    }
</script>

Searching around I've tried to build the php file receiving data with this structure:

<?php
if (isset($_POST['data'])) {
    post_things();
    return true;
}

function post_things() {
    $title = trim($_POST['form_title']);
    // where form_title is the input[name] of what I want get, serialised into jquery serializedValues variable
    //other similar inputs
    //do something with $title and other $variables
}
?>

I've initialized validation and ajax functions doing something as following:

<script>
    $(document).ready(function () {
        msform_init(); //this validate form step by step (it's working!)
        $('#msform').submit(function (event) {
            if (form_completeCheck() && true) { //This check if something empty
                formData();
                if (formData() && true) {
                    window.location.replace("//some redirection to success");
                } else {
                    window.location.replace("//some redirection to failure");
                }
            } else {
                event.preventDefault();
            }
        })
    })
</script>

The problem is that when I click on submit I got redirected to a page where the url is mypath? ALL_MY_DATA_SERIALISED. Where is my error? I can't see it due to my ignorance. Is in the jquery/ajax functions, in the php file or in my html? Thank you in advance for your help.

Answer 1

You just need to do event.preventDefault() in the top of your event listener:

$('#msform').submit(function(event){
  event.preventDefault();        
  if(form_completeCheck() && true){ //This check if something empty
    formData();
    if(formData() && true){
        window.location.replace("//some redirection to success");
    } else {
        window.location.replace("//some redirection to failure");
    }
  }

})