Question

I am trying to call a jquery function on clicking a button in the form and here is the code I am using

Button code :

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

Form starting code

 <form method="post" action="" id="contactForm">

The jquery code

<script type="text/javascript">
$(document).ready(function() {

    //if submit button is clicked
    $('input[name=submit_button]').submit(function () {     


alert("testing")

.....

I tried everything to get the submit button to call the jquery function but to no avail ( I tried using submit() or click() ).

What might I be doing wrong ( This form is located on a html page)

Edit : Just inserted the code of the Jquery function I am trying to run ,I am actually trying to call a php script using ajax and then hide the form and provide a success message if the form is submitted successfully

$(document).ready(function() {

    //if submit button is clicked
    $('#submit_button').submit(function () {        

            alert("testing")    /*get the email value*/

var name = $('input[name=name]');
        var email = $('input[name=email]');
        var subject= $('input[name=subject]');
        var message = $('textarea[name=message]');


 data = 'name=' + name.val() + '&email=' + email.val() + '&subject=' + 
        subject.val() + '&message='  + encodeURIComponent(message.val());


        //disabled all the text fields
        $('.text').attr('disabled','true');



        //start the ajax
        $.ajax({
            //this is the php file that processes the data and send mail
            url: "mai.php", 

            //GET method is used
            type: "POST",

            //pass the data         
            data: data,     



            //success
            success: function () {              

                    $('.contact_form').fadeOut('slow');                 

                    //show the success message
                    $('.simple-sucess').fadeIn('slow');

                //if process.php returned 0/false (send mail failed)
                } 



        });

        //cancel the submit button default behaviours
        return false;
    }); 
}); 
</script> 

Answer 1

Well, the name should be in quotes:

$('input[name="submit_button"]')

http://api.jquery.com/attribute-equals-selector/

value [..] An attribute value. Quotes are mandatory.

You should probably be using an ID anyway, though.

Also, I don’t think you’re meant to be using .submit on the button. Try using .click instead, or .submit on the form.