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

frickettz · 10-29-2012, 03:07 AM

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:

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" />
</form>

And the jQuery function I want to run onsubmit:

Code:

            $(document).ready(function(){ 

                //This is the ajax code for submitting the Newsletter Forms.
                jQuery.fn.newsletterSubmit = function(newsletterForm){  

                    $.ajax({  
                        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??

devnull69 · 10-29-2012, 01:24 PM

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

Code:

$('#newsletter_signup_footer').newsletterSubmit();

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

Code:

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

Code:

onsubmit="newsletterSubmit('newsletter_signup_footer');"