Sending form without refreshing

Question

I have a problem I would like you guys to help me figure it out please.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#myform").validate({
        debug: false,
        rules: {

        },
        messages: {

        },
        submitHandler: function(form) {
            $.post('goCarnet.php', $("#myForm").serialize(), function(data) {
                $('#results').show("fast").html(data);
            });
        }
    });
});
</script>

<form method="post" action="" id="myForm" class="form-horizontal">
    <label class="field-label col-md-3 text-left">Nombre de carnets : </label>
    <div class="col-md-9">
        <select name="nbr" id="multiselect1">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <label>&nbsp; De &nbsp;</label>
        <select name="total" id="multiselect2">
            <option value="25" selected>25</option>
            <option value="50">50</option>
        </select>
        <label>&nbsp; chèques</label>
    </div>
    <div class="text-right">
        <button type="submit" class="btn btn-sm btn-default btn-primary"> Commander </button>
    </div>
</form>
</div>
<div id="results" style="display:none" class="alert alert-success" role="alert"></div>

The form is now refreshing the same page without any result, but I'd like it to paste the data from the php file. PS : this exact same code works on another project like a charm.

Answer 1

I would do it like this preventDefault...

$(document).ready(function() {
    $('#myForm').on('submit', function(event)
    {
        $.post('goCarnet.php', $(this).serialize(), function(data)
        {
            $('#results').show("fast").html(data);
        });
        event.preventDefault();
    });
});