CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   How to pass my form ID to a function that runs onsubmit? (http://www.codingforums.com/showthread.php?t=279961)

frickettz 10-29-2012 03:07 AM

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:
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');"


All times are GMT +1. The time now is 06:16 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.