I'm trying to code an AJAX contact form that sends an email. I'm following a tutorial found here.

I'm having trouble preventing my browser from navigating to the url indicated on my form's action attribute.

Here's my javascript code:

$(function(){
    var form = $('#ajaxMail');
    var formSuccess = $('#successMail');
    var formError = $('#errorMail');

    $(form).submit(function(event){
        event.preventDefault();

        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response){
            $(successMail).removeClass('standbyMessage');
            $(successMail).addClass('pletedMessage');

            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        )}
        .fail(function(response){
            $(errorMail).removeClass('standbyMessage');
            $(errorMail).addClass('pletedMessage');
        )};
    }
});

HTML CODE

<form name="ajaxMail" id="ajaxMail" action="mailer.php" method="POST">
  <input type="text" id="name" name="name" placeholder="<?php echo $plName; ?>" required>
  <input type="text" id="email" name="email" placeholder="<?php echo $plEmail; ?>" required>
  <textarea id="message" name="message" cols="63" rows="8" placeholder="<?php echo $plMessage; ?>" required></textarea>
  <input type="submit" id="submitMail" value="<?php echo $plSend; ?>">
</form>
<div id="successMail" class="alert alert-success standbyMessage" role="alert"><strong>Correo electronico</strong> enviado correctamente.</div>
<div id="errorMail" class="alert alert-danger standbyMessage" role="alert"><strong>Correo electronico</strong> no pudo enviarse, intente de nuevo mas tarde</div>

I'm trying to code an AJAX contact form that sends an email. I'm following a tutorial found here.

I'm having trouble preventing my browser from navigating to the url indicated on my form's action attribute.

Here's my javascript code:

$(function(){
    var form = $('#ajaxMail');
    var formSuccess = $('#successMail');
    var formError = $('#errorMail');

    $(form).submit(function(event){
        event.preventDefault();

        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response){
            $(successMail).removeClass('standbyMessage');
            $(successMail).addClass('pletedMessage');

            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        )}
        .fail(function(response){
            $(errorMail).removeClass('standbyMessage');
            $(errorMail).addClass('pletedMessage');
        )};
    }
});

HTML CODE

<form name="ajaxMail" id="ajaxMail" action="mailer.php" method="POST">
  <input type="text" id="name" name="name" placeholder="<?php echo $plName; ?>" required>
  <input type="text" id="email" name="email" placeholder="<?php echo $plEmail; ?>" required>
  <textarea id="message" name="message" cols="63" rows="8" placeholder="<?php echo $plMessage; ?>" required></textarea>
  <input type="submit" id="submitMail" value="<?php echo $plSend; ?>">
</form>
<div id="successMail" class="alert alert-success standbyMessage" role="alert"><strong>Correo electronico</strong> enviado correctamente.</div>
<div id="errorMail" class="alert alert-danger standbyMessage" role="alert"><strong>Correo electronico</strong> no pudo enviarse, intente de nuevo mas tarde</div>

• javascript
• jquery
• ajax
• forms

• 1 Could you also post your HTML. Have you checked the console for any errors? Also, form will be a jQuery object, so you don't need to wrap it again - eg. you can just use form.serialize() instead of $(form).serialize(), although that isn't causing this problem. – Rory McCrossan Commented Sep 22, 2014 at 6:43
• Try after remove event.preventDefault(); – Amit Commented Sep 22, 2014 at 6:44
• Can you try renaming your event argument to e, ie function(e) and e.preventDefault()? I could definitely be wrong but using the full keyword as an argument name makes me uneasy. – Phil Commented Sep 22, 2014 at 6:51
• 2 Ah, you have syntax errors. There's mismatched braces and parentheses all over the place. Start using your browser's developer console. – Phil Commented Sep 22, 2014 at 6:57
• @FerSalas: the closing braces of done and fail module has syntactical error as phil as suggested. – dreamweiver Commented Sep 22, 2014 at 7:00

3 Answers 3

Add return false;

$(form).submit(function(event){
    event.preventDefault();

    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response){
        $(successMail).removeClass('standbyMessage');
        $(successMail).addClass('pletedMessage');

        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
    )}
    .fail(function(response){
        $(errorMail).removeClass('standbyMessage');
        $(errorMail).addClass('pletedMessage');
    )};

    return false;
}

you have wrong closing brackets between submit,done and close check that

corrected script:

$(document).ready(function(){
    var submitform = $('#ajaxMail');
    var formSuccess = $('#successMail');
    var formError = $('#errorMail');

    $(submitform).on('submit',function(event){
        event.preventDefault();

        var formData = $(submitform).serialize();
        $.ajax({
            type: 'POST',
            url: $(submitform).attr('action'),
            data: formData
        })
        .done(function(response){
            $(successMail).removeClass('standbyMessage');
            $(successMail).addClass('pletedMessage');

            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        })
        .fail(function(response){
            $(errorMail).removeClass('standbyMessage');
            $(errorMail).addClass('pletedMessage');
        });
    });
});

You need to use jQuery to bind to the "submit" event and prevent the default action. It would be a little more efficient if your form and nickname input used id's in addition to their names:

Try this

<script type="text/javascript">
    jQuery(function($){
      $("form[name=input]").submit(function(e){
        e.preventDefault(); // Keep the form from submitting
        var form = $(this);

        // Use the POST method to post to the same url as
        // the real form, passing in newNickname as the only 
        // data content
        $.post( form.attr('action'), { newNickname: form.find(':text').val() }, function(data){
          alert(data); // Alert the return from the server
        }, "text" );
      });
    });
</script>