Функция триггера на кнопке формы submit

Question

У меня есть форма с несколькими текстовыми вводами и кнопка отправки в конце. На submit я хотел бы вызвать функцию, и у меня возникли трудности.

Форма ниже, и я попытался следующие:

$('#contactForm input.btn_submit').click(function(event){ // function here 

$('#contactForm input.btn_submit').click(function(event){ // function here 

$('#contactForm.report_row.input.btn_submit').click(function(event){ // function here 

Но не повезло.

Вот форма:

<form action="https://example.com/index.php/contact" method="post" id="contactForm" name="contactForm"> 
    <input type="hidden" /> 

    <div class="report_row"> 
     <strong>Your Name:</strong><br /> 
     <input type="text" id="contact_name" name="contact_name" value="" class="text" />    </div> 
    <div class="report_row"> 
     <strong>Your Email Address:</strong><br /> 
     <input type="text" id="contact_email" name="contact_email" value="" class="text" />    </div> 
    <div class="report_row"> 
     <strong>Your Phone Number:</strong><br /> 
     <input type="text" id="contact_phone" name="contact_phone" value="" class="text" />    </div> 
    <div class="report_row"> 
     <strong>Message Subject:</strong><br /> 
     <input type="text" id="contact_subject" name="contact_subject" value="" class="text" />    </div>        
    <div class="report_row"> 
     <strong>Message:</strong><br /> 
     <textarea id="contact_message" name="contact_message" rows="4" cols="40" class="textarea long" ></textarea>    </div>  
    <div class="report_row"> 
     <strong>Security Code:</strong><br /> 
     20 + 9 = <br /> 
     <input type="text" id="captcha" name="captcha" value="" class="text" />    </div> 
    <div class="report_row"> 
     <input name="submit" type="submit" value="Send Message" class="btn_submit" /> 
    </div> 
</form> 

Как бы вызвать функцию на кого-то, нажав кнопку отправки в конце?

Answer 1

Ниже будет срабатывать каждый раз, когда форма будет отправлена:

$(document).ready(function() { 
    $('#contactForm').submit(function() { 
     //... your code here 
    }); 
}); 

Answer 2

насчет

$('form').submit(function(){// ... 
            }); 

Answer 3

может быть, вы можете попробовать сделать что-то вроде этого:

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

}); 

или

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

}); 

Answer 4

Непонятно, что вы имеете в виду "У меня возникли трудности".

Возможно, вы не прекращаете отправку формы, чтобы выполнять свою функцию. В этом случае вам необходимо использовать .preventDefault(). Я предлагаю вам также включить вашу функцию в готовую функцию, чтобы ваш код запускался, когда страница загрузила весь html.

нравится:

$('#contactForm input.btn_submit').click(function(event){ 
    event.preventDefault(); 
    // rest of code 
    alert('Working!'); 
}); 

Demo here