Java Script Quick Tutorial
4. Forms

Summary :

1. Getting 'Form1' information
2. Getting 'Form1.elements' information
3. Controling input : usefull functions
4. Controling input

1. Getting 'Form1' information
 

Form1 definition

Accessing 'Form1' by NUMBER :

Copy of the javascript code :

document.write ( "document.forms[0].action = " + document.forms[0].action + "<br>" );
document.write ( "document.forms[0].elements.count = " + document.forms[0].elements.count + "<br>" );
document.write ( "document.forms[0].elements[0].name = " + document.forms[0].elements[0].name + "<br>" );
document.write ( "document.forms[0].elements.length = " + document.forms[0].elements.length + "<br>" );
document.write ( "document.forms[0].encoding = " + document.forms[0].encoding + "<br>" );
document.write ( "document.forms[0].method = " + document.forms[0].method + "<br>" );
document.write ( "document.forms[0].target = " + document.forms[0].target + "<br>" );
document.write ( "document.forms[0].name = " + document.forms[0].name + "<br>" );

Result :

Accessing 'Form1' by NAME :

Copy of the javascript code :

document.write ( "Form1.action = " + Form1.action + "<br>" );
document.write ( "Form1.elements.count = " + Form1.elements.count + "<br>" );
document.write ( "Form1.elements[0].name = " + Form1.elements[0].name + "<br>" );
document.write ( "Form1.elements.length = " + Form1.elements.length + "<br>" );
document.write ( "Form1.encoding = " + Form1.encoding + "<br>" );
document.write ( "Form1.method = " + Form1.method + "<br>" );
document.write ( "Form1.target = " + Form1.target + "<br>" );
document.write ( "Form1.name = " + Form1.name + "<br>" );

Result :

2. Getting 'Form1.elements' information
 

6 ways to access elements in a form :

Copy of the javascript code :

document.write ( "Way 1 : Form1[0].name = " + Form1[0].name + "<br>" );
document.write ( "Way 2 : Form1['Edit1'].name = " + Form1['Edit1'].name + "<br>" );
document.write ( "Way 3 : Form1.Edit1.name = " + Form1.Edit1.name + "<br>" );
document.write ( "<br>" );

document.write ( "Way 4 : Form1.elements[0].name = " + Form1.elements[0].name + "<br>" );
document.write ( "Way 5 : Form1.elements['Edit1'].name = " + Form1.elements['Edit1'].name + "<br>" );
document.write ( "Way 6 : Form1.elements.Edit1.name = " + Form1.elements.Edit1.name + "<br>" );
document.write ( "<br>" );

document.write ( "Way - : Form1[Edit1].name = " + "doesn't work" + "<br>" );
document.write ( "Way - : Form1.elements[Edit1].name = " + "doesn't work" + "<br>" );

Result :

The RadioButton problem, when accesing by name :

• RadioButtons have the same name in a group, so it's impossible to access them by name.

Copy of the javascript code :

document.write ( "Way 1 : Form1[3].name = " + Form1[3].name + "<br>" );
document.write ( "Way 2 : Form1['RadioGroup1'].name = " + Form1['RadioGroup1'].name + "<br>" );
document.write ( "Way 3 : Form1.RadioGroup1.name = " + Form1.RadioGroup1.name + "<br>" );
document.write ( "<br>" );

document.write ( "Way 4 : Form1.elements[3].name = " + Form1.elements[3].name + "<br>" );
document.write ( "Way 5 : Form1.elements['RadioGroup1'].name = " + Form1.elements['RadioGroup1'].name + "<br>" );
document.write ( "Way 6 : Form1.elements.RadioGroup1.name = " + Form1.elements.RadioGroup1.name + "<br>" );
document.write ( "<br>" );

Result :

Accessing elements by NAME ( way 3 ) :

Copy of the javascript code :

document.write ( "Form1.Edit1.name =" + Form1.Edit1.name + "<br>" );
document.write ( "Form1.Edit1.value =" + Form1.Edit1.value + "<br>" );
document.write ( "<br>");

document.write ( "Form1.ScrollingTextBox1.name = " + Form1.ScrollingTextBox1.name + "<br>" );
document.write ( "Form1.ScrollingTextBox1.value = " + Form1.ScrollingTextBox1.value + "<br>" );
document.write ( "<br>");

document.write ( "Form1.Checkbox1.name = " + Form1.Checkbox1.name + "<br>" );
document.write ( "Form1.Checkbox1.value = " + Form1.Checkbox1.value + "<br>" );
document.write ( "<br>");

document.write ( "Form1.RadioGroup1.name = " + Form1.RadioGroup1.name + "<br>" );
document.write ( "Form1.RadioGroup1.value = " + Form1.RadioGroup1.value + "<br>" );
document.write ( "<br>");

document.write ( "Form1.DropDownMenu1.name = " + Form1.DropDownMenu1.name + "<br>" );
document.write ( "Form1.DropDownMenu1.value = " + Form1.DropDownMenu1.value + "<br>" );
document.write ( "<br>");

document.write ( "Form1.Button1.name = " + Form1.Button1.name + "<br>" );
document.write ( "Form1.Button1.value = " + Form1.Button1.value + "<br>" );

Result :

Accessing elements by NUMBER ( way 4 ) :

Copy of the javascript code :

document.write ( "Form1.elements.length = " + Form1.elements.length + "<br>" );
document.write ( "<br>");

for (var i = 0 ; i < Form1.elements.length ; i++ )
{
   document.write ( "Form1.elements[" + i + "] = " + Form1.elements[i] + "<br>" );
   document.write ( "Form1.elements[" + i + "].name = " + Form1.elements[i].name + "<br>" );
   document.write ( "Form1.elements[" + i + "].value = " + Form1.elements[i].value + "<br>" );
   document.write ( "<br>");
}

Result :

3. Controling input : usefull functions
 

Usefull functions : searchBadChars & searchNotOkChars

Copy of the javascript code :

function searchBadChars( i_badChars, iOpt_samePosQ, iOpt_spaceChar)
{
   var i_string = this.toString();

   if ( i_string == "" )
      return "" ;
   if ( i_badChars == "" )
      return "" ;

   var i_samePosQ = arguments.length >= 2
                  ? iOpt_samePosQ
                  : false ;
   var i_spaceChar = arguments.length >= 3
                   ? iOpt_spaceChar
                   : "_" ;

   var result = "" ;
   for( var i=0; i<i_string.length; i++)
   {
      if ( i_badChars.indexOf( i_string.charAt( i ) ) != -1 )
         result += i_string.charAt( i );
      else
      if ( i_samePosQ == true )
         result += i_spaceChar ;
   }

   return result ;
}

//-----

function searchNotOkChars( i_okChars, iOpt_samePosQ, iOpt_spaceChar)
{
   var i_string = this.toString();

   if ( i_string == "" )
      return "" ;
   if ( i_okChars == "" )
      return i_string ;

   var i_samePosQ = arguments.length >= 2
                  ? iOpt_samePosQ
                  : false ;
   var i_spaceChar = arguments.length >= 3
                   ? iOpt_spaceChar
                   : "_" ;

   var result = "" ;
   for( var i=0; i<i_string.length; i++)
   {
      if ( i_okChars.indexOf( i_string.charAt( i ) ) == -1 )
         result += i_string.charAt( i );
      else
      if ( i_samePosQ == true )
      result += i_spaceChar ;
   }

   return result ;
}

//----- Adding 2 new methods to String object.
String.prototype.searchBadChars = searchBadChars ;
String.prototype.searchNotOkChars = searchNotOkChars ;

Usefull function : alert_ifNothingChecked

Copy of the javascript code :

function alert_ifNothingChecked ( i_form, i_start, i_count, i_groupName )
{
   //----- Nothing checked ?
   if ( arguments.length <= 4 )
   {
      //----- Check by number.
      for ( var i=0; i<i_count; i++ )
         if ( i_form.elements[i_start+i].checked == true )
            return true ;
   }
   else
   {
      //----- Check by name.
      for ( var i=4; i<arguments.length; i++ )
         if ( arguments[i].checked == true )
            return true ;
   }

   //----- Messages.
   var eng_message = "You must check at leat one '" ;
   var esp_message = "Tiene que ? por lo menos un '" ;
   var fra_message = "Il faut cocher au moins un '" ;

   //----- Set focus & show the alert message.
   i_form.elements[i_start].focus();
   alert ( fra_message + i_groupName + "'." );
   i_form.elements[i_start].focus();

   //----- Nothing checked.
   return false ;
}

Usefull function : alert_ifNoRadioChecked

Copy of the javascript code :

function alert_ifNoRadioChecked ( i_form, i_start, i_count, i_groupName )
{
   //----- At least one radio checked ?
   for ( var i=0; i<i_count; i++ )
      if ( i_form.elements[i_start+i].checked == true )
         return true ;

   //----- Message.
   var eng_message = "You must check at leat one '" ;
   var esp_message = "Tiene que ? por lo menos un '" ;
   var fra_message = "Il faut cocher au moins un '" ;

   //----- Set focus & show the alert message.
   i_form.elements[i_start].focus();
   alert ( fra_message + i_groupName + "'." );
   i_form.elements[i_start].focus();

   //----- No radio checked.
   return false ;
}

Usefull function : alert_editError

Copy of the javascript code :

function alert_editError ( edit , fieldName , errorMessage )
{
   //----- Mesages.
   var eng_message = "Error on field '" ;
   var esp_message = "Error en campo el campo '" ;
   var fra_message = "Erreur sur le champ '" ;

   //----- Set the focus & select the edit.
   edit.focus() ;
   edit.select() ;

   //----- Show the alert.
   alert ( eng_message + fieldName +"' : \n"
         + "\n"
         + errorMessage );

   //----- Set the focus & select the edit.
   edit.focus() ;
   edit.select() ;
}

Usefull function : alert_ifEditError

Copy of the javascript code :

****************************************************************************************
The source code is too long to be copied.
Right click the mouse, and choose see the source code.
****************************************************************************************

4. Controling input
 

Form2 definition & controls