¿Cómo llamo a una función jquery al enviar un formulario?

Question

que tienen una forma que se indica a continuación:

<form method="post" id="contactForm" action=""> 
       <fieldset class="contactFieldset"> 
        <ul> 
         <li> 
          <label for="contactName" class="leftLabel">*Name:</label> 
          <input type="text" name="contactName" id="contactName" class="contactInput required" value="" /> 

         </li> 
         <p></p> 
         <li> 
          <label for="email" class="leftLabel">*Email:</label> 
          <input type="text" id="email" name="email" class="contactInput email required" value="" /> 
         </li> 
         <span class="simple-success">I'll be in touch soon</span> 
         <li> 
          <label for="subject" class="leftLabel">*Subject:</label> 
          <input type="text" name="subject" id="subject" class="contactInput required" value="" /> 
         </li> 
         <p></p> 
         <li> 
          <label for="message" class="leftLabel">Message:</label> 
          <textarea rows="10" cols="40" id="message" name="message" class="contactTextarea required"></textarea> 

         </li> 
         <p></p> 
         <li> 


          <input type="image" src="images/submitbutton.png" alt="Submit button" name="submit_button" class="submit_button" id="submit_button"> 

         </li> 
        </ul> 
       </fieldset> 
      </form> 

Estoy tratando de extraer los datos de este formulario a través de jQuery para que pueda pasarlo al archivo php y enviar un correo electrónico, pero la función de jQuery es no se llama al hacer clic en el código button.The es la siguiente:

$(function() { 
    $('.error').hide(); 
    $('.simple-sucess').hide(); 

    $(".submit_button").click(function() { 





     /*get the email value*/ 

     var email = $("input#email").val(); 
     var name = $("input#contactName").val(); 
     var subject = $("input#subject").val(); 
     var message=$("input#message").val(); 
    // alert("email"+email); 

/* Check if the email is good or bad */ 

var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi); 
    apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1; 
    var badEmail = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2); 

/*If the email is bad ,display the error message*/ 

if (email=="" || !goodEmail || badEmail) { 

     $("email").focus(); 
     return false; 
    } 


     var dataString = 'email='+ email + '\n Name='+ name+ '\n Subject='+ subject+ '\n message='+ message; 
     alert (dataString); 

     $.ajax({ 
     type: "POST", 
     url: "mai.php", 
     data: dataString, 
     success: function() { 
     $('.simple-sucess').fadeIn(100).show(); 
     $('.contact_form').fadeOut(100).hide(); 
     $('.simple_error').fadeOut(100).hide(); 


     } 
    }); 
    return false; 
    }); 
}); 

alguna idea sobre lo que podría estar haciendo mal?

Gracias

Answer 1

Debe utilizar un bloque document.ready y no utilice submit-button hacer clic; en lugar de utilizar $.submit()

$(document).ready(function() { 
    $("your form selector here").submit(function() { 


    // do the extra stuff here 
    $.ajax({ 
    type: "POST", 
     url: "mail.php", 
     data: $(this).serialize(), 
     success: function() { 
     $('.simple-sucess').fadeIn(100).show(); 
     $('.contact_form').fadeOut(100).hide(); 
     $('.simple_error').fadeOut(100).hide(); 

     } 
    }) 

    }) 
}) 

Tome un vistazo a la jQuery Form Plugin, whic tiene métodos como ajaxSubmit() para reducir su trabajo.

Answer 2

Uso onsubmit para el control de un formulario se envía:

$('#contactForm').on('submit', function() { 
    alert('You submitted the form!'); 
}); 

Answer 3

Deja tus código Javascript en

$(document).ready({ 

    $('#contactForm').submit(function() { 

     //Do stuff here 

    }); 

}); 

Answer 4

Primero, intenta depurar tu código: Chrome tiene una consola ordenada incorporada (Ctrl + Shift + J) y Firefox tiene el increíble complemento FireBug. Luego puede usar console.log("Message"); en cualquier lugar para verificar si la función ha llegado a esa área.

¿Eso es alert("email" + email) trabajando?

Asegúrese de envolver todo en $().ready({ /* your code */ });. En este momento su código probablemente se está ejecutando antes de el resto del documento está cargado y, por lo tanto, cuando intenta encontrar el botón para vincular el evento, falla y el evento no se ata a nada.

Además de $('.submit-button').click(...) puede usar $('#contactForm').submit(function() { /* code that's now in the click handler */ }. This would make the code a little more fail-safe, in case you might want to rename or remove that button, or if you want to manually submit the form from a piece of code. (Running $ ('# contactForm'). Submit() `y pasar el controlador de eventos no desencadena el envío del formulario, esto también funciona para todos los demás eventos).

Espero que esto ayude!