Code Answer: Really simple question: grabbing the onSubmit event for a form

Hi there,

I have a really simple question. I want to know how to grab the onSubmit event from a form to do some form validation, because I don't have access to it directly. (I'm writing a Wordpress plugin for comments, so don't have direct access to the form tag or the submit button.)

I've got so frustrated trying to do this for my plugin that I've written a Hello World version - below. I want it to show the 'Hello World' alert when I load the page, and the "form submitted" alert when I click on the submit button. Instead, it shows both pop-ups when the page loads. What am I doing wrong???

Here is my code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Hello World</title>
    </head>
    <body>
    <h2>Test</h2>
    <form action="#" method="post" id="commentform">

    <p><input type="text" name="author" id="author" size="22" tabindex="1" />
    <label for="author"><small>Name (required)</small></label></p>

    <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

    </form>

    <script type="text/JavaScript">
    <!--
    alert("Hello world");

    var formCheck = document.getElementById("commentform");

    formCheck.onSubmit = doMapping(); 

    function doMapping() {
        alert("form submitted");
        return false;
    }

    -->
    </script>     

    </body>
    </html>

From stackoverflow

Change this:
```
formCheck.onSubmit = doMapping()
```
to this:
```
formCheck.onSubmit = doMapping
```
When you add parenthesis to the end of a function you execute that function. When you assign a function (or pass it as a parameter to another function) you need to omit the parenthesis as that is the way to retrieve a function pointer in JavaScript.

Edit: You will also need to move the declaration of the doMapping function above the assignment of that function to the onsubmit event like this (good catch tvanfosson!):
```
function doMapping() {
        alert("form submitted");
        return false;
    }

formCheck.onSubmit = doMapping();
```
However if the doMapping function is not used elsewhere you can declare the doMapping function as an anonymous function like this:
```
formCheck.onSubmit = function() {
        alert("form submitted");
        return false;
    }
```
which seems a bit cleaner to me.

tvanfosson : I think you'll also have to change the order since doMapping may need to be defined before you assign it as the onSubmit handler.

Andrew Hare : Thanks - I edited my answer to address your point.

Using jQuery.

$(document).ready( function() {
    $('#commentform').submit( function() {
        alert('form submitted');
        return false;
    });
});

Thank you! Actually I solved it another way, using both Andrew's suggestion and the window.onload event - I think the problem was partly because the element hadn't actually loaded.
```
window.onload = function(){
    if (document.getElementById("commentform")){
        document.getElementById("commentform").onsubmit = doMapping;
    }
}

function doMapping(){
            alert("form submitted");
            return false;
}
```
Rashack : Note thought that the onload event is fired after the whole page has been loaded. So should there be an image that takes long to load - usually something like google analytics your event handler will not be assinged before the user hits submit.

Rashack : The jQuery answer handles that...

Code Answer

Sunday, April 17, 2011

Really simple question: grabbing the onSubmit event for a form

0 comments:

Post a Comment

Blog Archive