Làm cách nào để gọi một hàm jquery khi gửi biểu mẫu?

Question

Tôi có một hình thức được đưa ra dưới đây:

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

Tôi cố gắng để trích xuất các dữ liệu từ hình thức này qua jquery để tôi có thể vượt qua nó vào file php và gửi email nhưng chức năng jquery là không được gọi khi nhấp vào nút. Mã được cung cấp bên dưới:

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

Bất kỳ ý tưởng nào về những gì tôi có thể làm sai?

Cảm ơn

Answer 1

Bạn nên sử dụng một khối document.ready và không sử dụng submit-button nhấp chuột; thay vì sử dụng $.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(); 

     } 
    }) 

    }) 
}) 

Hãy nhìn vào các jQuery Form Plugin, whic có phương pháp như ajaxSubmit() để giảm công việc của bạn.

Answer 2

Sử dụng onsubmit để kiểm tra một mẫu được gửi:

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

Answer 3

Đặt mã javascript của bạn trong

$(document).ready({ 

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

     //Do stuff here 

    }); 

}); 

Answer 4

Trước hết, hãy thử gỡ lỗi mã của bạn - Chrome có sẵn giao diện điều khiển gọn gàng (Ctrl + Shift + J) và Firefox có trình bổ sung FireBug tuyệt vời. Sau đó, bạn có thể sử dụng console.log("Message"); bất kỳ nơi nào để kiểm tra xem chức năng có đạt đến khu vực đó hay không.

Có phải đó là alert("email" + email) không?

Đảm bảo bao bọc mọi thứ trong $().ready({ /* your code */ });. Ngay bây giờ mã của bạn có thể đang chạy trước khi phần còn lại của tài liệu được tải và, do đó, khi cố gắng tìm nút để ràng buộc sự kiện, nó không thành công và sự kiện không bị ràng buộc với bất kỳ điều gì.

Ngoài $('.submit-button').click(...) bạn có thể sử dụng $('#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() `và không xử lý sự kiện nào thực sự kích hoạt việc gửi biểu mẫu, điều này cũng phù hợp với tất cả các sự kiện khác).

Hy vọng điều này sẽ hữu ích!