SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Iterating forms with fieldsets and radio buttons

    Hi all,

    The quick version of my problem is I am trying to add an onchange (or onclick) event handler to each field on my form who's name beings with 'aj_'.

    Anyway, I can get this working great with a straight forward form that isn't grouped in any fashion, however I need to be able to cater for <fieldset> groups. In my head I thought these were object arrays and should be iterated in much the same way as the main form object is, however I cannot seem to get it working

    My example link is http://agilehosting.co.uk/ajaxDemo.php

    The section of code that breaks is:

    Code:
    // Initialize form
    function initForm( formName )
    {
    	iterateObject( document.forms[formName] );
    }
    
    // Adds the onchange event to every form field prefix with 'aj_'
    function iterateObject( formObject )
    {
    	var elementName = new String();
    	var elementType = new String();
    	for (var i=0; i < formObject.length; i++)
    	{
    		var objElement = formObject[i];
    
    		// reiterate
    		if( !objElement.type)
    		{
    			iterateObject( objElement );
    		}
    		
    		elementName = objElement.name;
    		if( elementName.substr(0,3) == 'aj_' )
    		{
    			// Add handler
    			objElement.onchange = function()
    			{
    				sendData( this.name, this.value );
    			}
    
    		}
    	}
    }
    The initform() function is called via the onload event of the page and passes the form to be iterated. It all falls to pieces when the fieldset is encountered and the iterateObject function calls itself, it seems to pass an 'undefined' to itself rather than the fieldset object requested sort of tearing my hair out (whats left of it) trying to figure out where I am going wrong, or if I am misunderstanding the nature of fieldsets entirely.

    Any help would be apreciated

    thanks in advance

    PS. I realise I need to handle the radio buttons differently, havent got to that bit yet

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You will probably have more luck using getElementsByTagName or an implementation of getElementsByClassName.

    If you know what type of elements they are, you can get an array of all elements within the document or specific container using getElementsByTagName.

    or if you want, you can set a class of every element you'd want to attach the event to, and then use getElementsByClassName (http://www.robertnyman.com/2005/11/0...tsbyclassname/)

    hth


  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh great, think that will do the trick perfectly, learn something new everyday

    I'll give it a try and report back


    cheers

  4. #4
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep works a treat thanks!

    Just for ref heres the code I used, might not be particularly efficient but does the job.

    Code:
    // Initialize form
    function initForm( objForm )
    {
    	var elementName = new String();
    	var elementType = new String();
    	var ii, jj, objElement;
    	var elementTags = new Array( 'input', 'select' );
    	
    	// Get input elements add event
    	for ( ii=0; ii < elementTags.length; ii++ )
    	{
    		var elements = objForm.getElementsByTagName( elementTags[ii] );
    		for ( jj=0; jj < elements.length; jj++)
    		{
    			objElement = elements[jj];
    			addHandler( objElement );
    		}
    	}
    	
    
    }
    
    // Adds the handler to the passed event
    function addHandler( objElement )
    {
    	if( objElement.type =='radio' )
    	{
    		objElement.onclick = function()
    		{
    			sendData( this.name, this.value );
    		}
    	}
    	else
    	{
    		objElement.onchange = function()
    		{
    			sendData( this.name, this.value );
    		}
    	}
    }

    Thanks for your help.

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, glad to be of help.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •