[Javascript] Unobtrusive onsubmit

[Paul Novitski]

Hey Terry,

At 2/18/2009 11:03 AM, Terry Riegel wrote:
>I am working through an unobtrusive bit of javascript and wonder if
>anyone might be able to lend a hand.
>
>   <FORM ACTION="../cgi-bin/mycgi.pl" ID="testform" NAME="testform"
>onSubmit="return TestDataCheck()">
>
>I would like to take this onSubmit out of the form declaration and put
>it in an startup function that runs on load.
>
>So I have this...
>document.getElementById('testform').onsubmit=TestDataCheck;
>I am not sure of the syntax that would duplicate the return part of
>the obtrusive JS.
>I have tried this...
>document.getElementById('testform').onsubmit=return TestDataCheck;
>
>How would I get it to invalidate the action of the form and just do
>something else?


The short answer is that if the javascript function triggered by 
onSubmit returns FALSE, the form won't submit.

Here's one way to do it (below).  This code won't crash if it's run 
in a browser that doesn't support DOM-aware javascript nor if the 
'testform' object isn't found.

And of course it should go without saying that since you can't trust 
that javasrcipt will be present to test your form data you need to do 
it again server-side.

Paul
_______________________


HTML:
<form action="../cgi-bin/mycgi.pl" id="testform" ...>


JavaScript:

// tell js to initialize the form when the page loads
AddEvent(window, "load", FormInit);


//=========================
function FormInit()
//=========================
// intialize the form
{
                 // go away if DOM not supported
                 if (!document.getElementById) return;

         // apply onsubmit behavior to form object
         oForm = document.getElementById('testform');

                 if (oForm)
                 {
                         AddEvent(oForm, "submit", TestDataCheck);
                 }
}


//=========================
function TestDataCheck(evt)
//=========================
// test the data when the form is submitted
{
         // cancel event-bubbling
                 if (evt) { event = evt; }
         event.cancelBubble = true;

         // test the data...
         bSuccess = ValidateForm();

                 // display error messages as needed
                 if (!bSuccess)
                 {
                         ...
                 }

         // if checks failed return FALSE to cancel form submission
         // if checks are OK return TRUE to allow form submission
         return bSuccess;
}


//=========================
function AddEvent(oElement, sEventName, fnFunction)
//=========================
// add an event to the DOM
{
         if (oElement)
         {
                 if (oElement.attachEvent)
                 {
                         oElement.attachEvent("on" + sEventName, fnFunction);
                 }
                 else
                 {
                         oElement.addEventListener(sEventName, 
fnFunction, true);
                 }
         }
}