How to handle JavaScript events in the form

If you want to add some custom event handling code, you can use the custom code feature of Simfatic Forms.

Here is one simple example. The following Javascript code changes the background color if a non digit character is typed in to the input field:

document.getElementById('mytext').onkeyup = function()
{
    if(this.value.match(/[^\d]/g))
    {
        this.style.backgroundColor='red';
    }
    else
    {
        this.style.backgroundColor='white';
    }
}

Using jQuery

Simfatic Forms supports jQuery, a powerful Javascript library. This page shows you how to handle events unobtrusively using jQuery.

Imagine you want to change the background color of a text box on setting the focus, follow these steps:

First, find the ID of the input element: select the element in the 'draw the form' page. The element's ID is displayed in the bottom

The following snippet of code changes the background color on focus change.

    //on focus event handler
    $('#mytext').bind('focus',function()
    {
        $(this).css('background-color','yellow');
    });
    //on 'focus lost' event handler
    $('#mytext').bind('blur',function()
    {
        $(this).css('background-color','white');
    });    
 

The 'focus' event handler changes the background color to yellow. On focus loss, we change the 

background color to white.

Notice how the ID of the element is used to handle the events only for that element

Now, this custom code can be put in the Draw the form->Custom code box

Similarly, you can handle any type of events (onchange, keyup) on any element or group of elements in your form.

Use Firebug( getfirebug.com ) with Firefox browser to debug your custom code

Switch to 'client side only' mode temporarily to test the custom code locally. (The option is in Form:General page, 'Form processing' tab)