Jquery ajax form not submitting. going straight to error function

Question

I have a form where users can sign up to a newsletter but i can't get it to submit properly.

When i click the submit button, i get an alert saying "Failure" so the ajax request is going straight to the error catchment in the ajax request.

In my php, I get all the $_POST variables and insert them into the database and I know that script is working. I just want to return the message back to the ajax success so that the message can be displayed to the user.

I have looked everywhere for a solution and can't find one.

<?php
    echo "done";
?>

and the form with jquery

<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#mlbutton').click(function() {

            var name = $('#mlName').val();
            var email = $('#mlEmail').val();

            $.ajax({
                type:'POST', 
                url: 'storeAddress.php',
                data:$('#addressform').serialize(),
                success: function(response) {
                    $('#addressform').find('#response').html(response);
                    alert(response);
                },
                complete: function() {
                    $('#addressform').each(function() {
                        this.reset();
                    });
                },
                error: function(){
                    alert('failure');
                }
            });
        });
    });
</script>
</head>
<body>
<form id="addressform">
    <div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div>
    <div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div>
    <div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="dffhfdh" class="button-signup" /></div>
    <p id="response" style="text-align: left"> </p>
</form>
</body>
</html>

Update

Added e.preventDefault(); //call prevent default on event

This now stops the failure message but it appears that the php file is not called. I have tested the php file and because no email address supplied I get a message i was expecting. If i just click the form without entering an email address, I am expecting the same message but nothing. If i do enter an email address, I would expect the email to be in database but nothing happens. It is like the php file is not being called

Try to use some sort of developer tools in your browser to see the request and response (for example, try to click F12 in your browser). — Alex

Kevin Bowersox Kevin Bowersox · Accepted Answer · 2013-09-06T15:04:36

The could should prevent the default action of the form.

$('#mlbutton').click(function(e) { //added event as argument
    e.preventDefault(); //call prevent default on event
    var name = $('#mlName').val();
    var email = $('#mlEmail').val();

    $.ajax({
        type:'POST', 
        url: 'storeAddress.php',
        data:$('#addressform').serialize(),
        success: function(response) {
            $('#addressform').find('#response').html(response);
            alert(response);
        },
        complete: function() {
            $('#addressform').each(function() {
                this.reset();
            });
        },
        error: function(){
            alert('failure');
        }
    });
});

Jquery ajax form not submitting. going straight to error function

2 Answers