Question

I have this code below. I expected after submitting the form it goes to “/frontend_dev.php/coche1/new” but it never goes (i added a die(“enter”) in the corresponding method, but “enter” is not showed) …

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js'></script>

<script type="text/javascript">
$(document).ready(function () {
    $('.formulario').submit(function () {
        form_data = $.param($(this).serializeArray());
        $.ajax({
            url: "/frontend_dev.php/coche1/new",
            type: "POST",
            data: form_data,
            success: function () {
                alert("Data Saved: ");
            }
        });
    });
});
</script>


<form class="formulario" id="1">
    <input type="submit" value="Save">
    <label for="coche1_marca">Marca</label>
    <input type="text" id="coche1_marca" value="FJSDF" name="coche1[marca]">  
    <label for="coche1_modelo">Modelo</label>
    <input type="text" id="coche1_modelo" value="FJSDÑF" name="coche1[modelo]">  
</form>

Any help?

Regards

Javi

Answer 1

You need to have a return false at the end of your .submit() handler. Otherwise it fires the AJAX but then immediately submits the form as well, which causes the page to reload since there’s no action on the form itself. Adding return false shows that the AJAX fires as expected.