Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2012
    Thanked 0 Times in 0 Posts

    How to pass my form ID to a function that runs onsubmit?

    Hi all,

    I have 2 separate forms that I would like to execute the same function on, but only on one of them when the form is submitted.

    The function will manipulate the input field of only the form which was submitted.

    Here's what I'm working with now:

    Form Code:
    <form method="post" id="newsletter_signup_footer" onsubmit="newsletterSubmit(newsletter_signup_footer);">
                                    <input id="addNewsletterFooter" name="email_newsletter" type="text" value="TYPE YOUR EMAIL HERE" value="TYPE" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if (this.value=='') this.value = this.defaultValue" class="newsletter_bottom_field" /><input type="image" src="images/sign_up.png" id="submit" name="submit" value"Submit" class="submit" />
    And the jQuery function I want to run onsubmit:

                    //This is the ajax code for submitting the Newsletter Forms.
                    jQuery.fn.newsletterSubmit = function(newsletterForm){  
                            type: "POST",  
                            url: "newsletter.ajax.php",  
                            data: $("#" + newsletterForm).serialize(),  
                            dataType: "json",  
                            success: function(msg){  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").removeClass('error');  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").removeClass('success');  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").addClass(msg.status);  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").val(msg.message);  
                            error: function(){  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").removeClass('success');  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").addClass('error');  
                                $("#" +newsletterForm+ " [name='" + msg.inputName +"']").val("There was an error, please try again.");  
                        //make sure the form doesn't post  
                        return false;  
    So in the form I have onsubmit="newsletterSubmit(newsletter_signup_footer);" Which I want to run the function on submit. And I'm passing the ID of the form to that function I'm calling.

    When I hit submit on that form I get an error message though: Uncaught ReferenceError: newsletterSubmit is not defined

    Any idea what I'm doing wrong??

  2. #2
    Senior Coder
    Join Date
    Dec 2010
    Thanked 570 Times in 563 Posts
    Two major problems

    1 - You are defining jQuery.fn.newsletterSubmit. This will turn the method newsletterSubmit() into a plug-in that should be called as a method of a jQuery object. Something in the lines of
    You won't need the parameter for newsletterSubmit then, because the keyword "this" would already refer to the jQuery object.

    If you don't want a plug-in, you can define newsletterSubmit() as a normal function
    function newsletterSubmit(newsletterForm) {
    2 - You are not passing the id "newsletter_signup_footer" to the method, you are passing a variable with the name "newsletter_signup_footer". If you want to pass the id as a string, you should enclose it in quotes


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts