CODEWITHSUNDEEP
javascriptdom-events
user93353
user93353

Reputation: 14039

Adding a second submit handler

I am trying to modify an existing web page which looks like this:

<script type="text/javascript" src="s1.js"></script>

s1.js has something like this:

window.onDomReady = DomReady;

function DomReady(fn)
{
    if(document.addEventListener)
    {
        document.addEventListener("DOMContentLoaded", fn, false);
    }
    else
    {
        document.onreadystatechange = function(){chState(fn);};
    }
}

function chState(fn)
{
    if(document.readyState == "interactive" || document.readyState == "complete")
        fn();
}


window.onDomReady(addHndlrs);

function addHndlrs()
{
    var forms = document.getElementsByTagName("form");
    for(var i = 0; i < forms.length; i++) 
    {
        var form = forms[i];
        if(form.addEventListener)
        {
            form.addEventListener("submit", DoValidate, false);
        }
        else if (form.attachEvent)
        {
            form.attachEvent("onsubmit", DoValidate);
        } 
    
        Other stuff.
    
    }

When I click Submit on the form, DoValidate does get called.

I am trying to modify this page to add another submit handler which is called after the first one.

I copied the above code, changed function names and put into s2.js:

window.onDomReady = DReady;

function DReady(fn)
{
    if(document.addEventListener)
    {
        document.addEventListener("DOMContentLoaded", fn, false);
    }
    else
    {
        document.onreadystatechange = function(){Chk1State(fn);};
    }
}

function Chk1State(fn)
{
    if(document.readyState == "interactive" || document.readyState == "complete")
        fn();
}

window.onDomReady(myready);

function myready()
{
    var forms = document.getElementsByTagName("form");
    for(var i = 0; i < forms.length; i++) 
    {
        var form = forms[i];
        if(form.addEventListener) 
        {
            form.addEventListener("submit", mynewhandler, false);
        }
        else if (form.attachEvent) 
        {
            form.attachEvent("onsubmit", mynewhandler);
        }
    }

}

In the form html, I added a reference to it:

<script type="text/javascript" src="s1.js"></script>
<script type="text/javascript" src="s2.js"></script>

My new submit handler never gets called. I debugged it through Firebug - I see DReady being called and my DOM Ready handler being registered. However myready never gets called, so my submit handler never gets registered.

What am I missing here? I tried changing order of inclusion of s1.js and s2.js but that doesn't seem to help. I want to do this without modifying s1.js

Upvotes: 0

Views: 732

Answers (1)

Kamyar Nazeri
Kamyar Nazeri

Reputation: 26474

The code you provided seems to be fine! Have checked in Chrome 25, FireFox 19 and IE 10!

Normally I find it easier to just modify the code at runtime (not the source file), thanks to JavaScript being dynamic typed, you could overwrite the DoValidate function with your own, passing it the original DoValidate through closure in the s2.js:

var originalValidate = DoValidate;
DoValidate = function () {
    originalValidate();
    alert("my handler");
};

Upvotes: 4

Related Questions