CODEWITHSUNDEEP
jqueryjquery-selectors
Doug Fir
Doug Fir

Reputation: 21322

Trigger function on form button submit

I have a form with a number of text inputs and a submit button at the end. On submit I'd like to trigger a function and I'm having difficulty.

The form is below and I have tried the following:

$('#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

But with no luck.

Here is the form:

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

How would I trigger a function on someone clicking the submit button at the end?

Upvotes: 0

Views: 1956

Answers (4)

Sergio
Sergio

Reputation: 28845

Not clear what you mean with "I'm having difficulty".

It might be that you don't stop the form submission so you can run your function. In that case you need to use .preventDefault(). I suggest you also wrap your function in a ready function so your code will run when the page has loaded all html.

like:

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

Demo here

Upvotes: 2

Camo
Camo

Reputation: 1778

maybe you can try doing something like this:

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

});

or

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

});

Upvotes: 1

zigdawgydawg
zigdawgydawg

Reputation: 2046

The following will be triggered anytime the form is submitted:

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

Upvotes: 1

Carsten Massmann
Carsten Massmann

Reputation: 28246

what about 

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

Upvotes: 1

Related Questions