Come si chiama una funzione jquery all'immissione di un modulo?

Question

Ho una forma che è dato qui di seguito:

<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> 

Sto cercando di estrarre i dati da questo modulo tramite jQuery in modo che io può passare al file php e inviare una e-mail, ma la funzione di jQuery è non essere invitato cliccando il codice button.The è il seguente:

$(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; 
    }); 
}); 

Tutte le idee su quello che potrebbe essere sbagliato?

Grazie

Answer 1

Si dovrebbe utilizzare un blocco document.ready e non utilizzare submit-button clic; invece utilizzare $.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(); 

     } 
    }) 

    }) 
}) 

Date un'occhiata al jQuery Form Plugin, whic ha metodi come ajaxSubmit() per ridurre il vostro lavoro.

Answer 2

Usa onsubmit per il controllo di un modulo viene inviato:

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

Answer 3

inserire il codice javascript in

$(document).ready({ 

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

     //Do stuff here 

    }); 

}); 

Answer 4

Prima di tutto, prova a eseguire il debug del codice - Chrome include una console integrata (Ctrl + Shift + J) e Firefox ha l'impressionante componente aggiuntivo FireBug. È quindi possibile utilizzare console.log("Message"); ovunque per verificare se la funzione ha raggiunto quell'area.

È che il alert("email" + email) funziona?

Assicuratevi di avvolgere tutto in $().ready({ /* your code */ });. In questo momento il tuo codice è probabilmente in esecuzione prima del il resto del documento viene caricato e, quindi, quando tenta di trovare il pulsante per associare l'evento a, non riesce e l'evento non viene associato a nulla.

Oltre a $('.submit-button').click(...) è possibile utilizzare $('#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() `e il passaggio di nessun gestore di eventi attiva effettivamente l'invio del modulo, questo funziona anche per tutti gli altri eventi).

Spero che questo aiuti!