Estoy tratando de enviar un formulario usando Ajax. Por lo tanto, gracias a stackoverflow, evito que el formulario se envíe normalmente usando event.preventDefault(); pero esto no ayudará, porque siempre me redirigen a mi archivo sendMail.php.

Aquí está mi código:

$(document).on('submit', '.mailForm', function(e) {
{
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function()
        {
            $("#sendBox").show('slow');
        }
    });
    return false;
});

Editar: Aquí está mi forma:

<form role="form" class="mailForm" action="sendmail.php" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-user"></i></div>
                        <input class="form-control" type="text" id="fName" placeholder="<? LangText("Name", "Nom", "Name"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-envelope-o"></i></div>
                        <input class="form-control" type="email" id="fMail" placeholder="<? LangText("E-Mail Adresse", "Adresse électronique", "email adress"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-users"></i></div>
                        <input class="form-control" type="text" id="fCompany" placeholder="<? LangText("Firma", "Entreprise", "Company"); ?>" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-file-text-o"></i></div>
                        <textarea class="form-control" rows="5" id="fText" required="required"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-default" id="submitMail"><? LangText("Absenden", "Envoyer", "Send"); ?></button>
            </form>
1
PoTTii 31 ago. 2014 a las 00:57

3 respuestas

La mejor respuesta

En lugar de:

$(document).on('submit', '.mailForm', function(e) {

Tratar:

$(".mailForm").submit(function(){
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function()
        {
            $("#sendBox").show('slow');
        }
    });
    return false;
});
0
Madmenyo 30 ago. 2014 a las 21:02

Debe vincular un evento en el botón 'Enviar' del formulario.

            $('.trigger_buttton').on('click', function(e) {
            {
                e.preventDefault();
                $.ajax({
                    url: $('.mailForm').attr('action'),
                    type: $('.mailForm').attr('method'),
                    data: $('.mailForm').serialize(),
                    success: function()
                    {
                        $("#sendBox").show('slow');
                    }
                });
            });
0
kappaallday 30 ago. 2014 a las 21:15

Intente usar el .submit () en su lugar.

$(".mailForm").submit(function(e)
{

  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: $(this).serialize(),
    success: function()
    {
        $("#sendBox").show('slow');
    }
  });
 return false;
});
0
Telford Computer-DoctorLtd 30 ago. 2014 a las 21:04