SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Form Elements created via DOM can't be deleted completely? (FF3)

    I'm pulling my hair out and I'm not getting anywhere. JavaScript is not my strong suit, so I tried to keep this simple. I can reproduce this now with a specialized test (included below).

    The goal: I am creating a bunch of form elements on the fly. The number of elements will be variable depending on the JavaScript object that is built elsewhere. For the same of this example, I will ignore the JavaScript object and just use static information.

    The problem: This seems to only apply to Firefox (I am using version 3): It seems that when I create the elements, I can easily delete them (using a variety of different methods). What I am noticing though, is that JavaScript can still access the last form element using the document.FORM_NAME.ELEMENT_NAME method.

    The code: This is an overly simplified test example, but it seems to prove my point. The test was designed for Firebug, but you can just change it to a use alerts and you'll see what I mean.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    
    <title></title>
    </head>
    <body>
    
    <form name="productForm">
    	<div id="product_colorsContainer">
    		<input type="radio" name="product_colors" id="product_colors[0]" value="BLACK" class="inputRadio" />
    		<label for="product_colors[0]">Black</label>
    		<br />
    		<input type="radio" name="product_colors" id="product_colors[1]" value="BLUE" class="inputRadio" />
    		<label for="product_colors[1]">Blue</label>
    		<br />
    		<input type="radio" name="product_colors" id="product_colors[2]" value="WHITE" class="inputRadio" />
    		<label for="product_colors[2]">White</label>
    		<br />
    	</div>
    </form>
    
    <script type="text/javascript">
    		inv_clear_colors();
    	console.log(document.productForm.product_colors);
    
    		inv_add_color();inv_add_color();inv_add_color();
    	console.log(document.getElementById('product_colorsContainer').innerHTML);
    		inv_clear_colors();
    	console.log(document.productForm.product_colors);
    
    
    
    	function inv_clear_colors() {
    		var colorsContainer = document.getElementById('product_colorsContainer');
    		while (colorsContainer.childNodes.length > 0) {
    			colorsContainer.removeChild(colorsContainer.childNodes[0]);
    		}
    	}
    	function inv_add_color() {
    		var product_colorsContainer = document.getElementById('product_colorsContainer');
    		//determine which color number this is (one more than current count = length)
    		var colorIndex = 0;
    		if (document.productForm.product_colors) {
    			if (document.productForm.product_colors.length) colorIndex = document.productForm.product_colors.length;
    			else colorIndex = 1;
    		}
    
    		if (!window.ActiveXObject) {
    			//DOM compliant
    			var color_option = document.createElement('input');
    				color_option.setAttribute('name', 'product_colors');
    				color_option.setAttribute('class', 'inputRadio');
    		} else {
    			//IE (for support of [document.elementForm.elementName] and class attribute)
    			var color_option = document.createElement('<input name="product_colors" />');
    				color_option.className = 'inputRadio';
    		}
    		color_option.type = 'radio';
    		color_option.id = 'product_colors[' + colorIndex + ']';
    		color_option.value = 'BLACK';
    
    		var color_option_label = document.createElement('label');
    			color_option_label.setAttribute('for', 'product_colors[' + colorIndex + ']');
    			color_option_label.appendChild(document.createTextNode('Black'));
    
    		product_colorsContainer.appendChild(color_option);
    		product_colorsContainer.appendChild(color_option_label);
    		product_colorsContainer.appendChild(document.createElement('br'));
    
    		return true;
    	}
    </script>
    
    </body>
    </html>
    Can anyone help me out? I don't know why Firefox would do this, and I'm not sure how to clean up the mess (I wouldn't be opposed to a hack to fix this). IE seems to handle this properly...

    (Sorry for the rushed test and post, I am late for a meeting, but I will be back to answer any questions).
    MySQL v5.1.58
    PHP v5.3.6

  2. #2
    SitePoint Enthusiast Grayson's Avatar
    Join Date
    Jun 2008
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.productForm.innerHTML = '';
    Sorry i kill myself.

  3. #3
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Grayson View Post
    Code:
    document.productForm.innerHTML = '';
    Sorry i kill myself.
    Sadly, that doesn't work. Just for fun, here are the 3 ways I've tried:
    Code:
    	function inv_clear_colors() {
    		/* A great trick to empty out everything in a div (doesn't seem to work in Safari) */
    		var colorsContainer = document.getElementById('product_colorsContainer');
    		var tmpContainer = colorsContainer.cloneNode(false);
    
    		colorsContainer.parentNode.insertBefore(tmpContainer, colorsContainer);
    		colorsContainer.parentNode.removeChild(colorsContainer);
    
    		/* Ghetto emptying of the div */
    		document.getElementById('product_colorsContainer').innerHTML = '';
    
    		/* Most compatible way: */
    		var colorsContainer = document.getElementById('product_colorsContainer');
    		while (colorsContainer.childNodes.length > 0) {
    			colorsContainer.removeChild(colorsContainer.childNodes[0]);
    		}
    	}
    MySQL v5.1.58
    PHP v5.3.6

  4. #4
    Non-Member
    Join Date
    Aug 2006
    Location
    Kansas City
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shot in the dark...

    } else {
    //IE (for support of [document.elementForm.elementName] and class attribute)
    var color_option = document.createElement('<input name="product_colors" />');
    color_option.className = 'inputRadio';
    }


    Shouldn't it be....

    } else {
    //IE (for support of [document.elementForm.elementName] and class attribute)
    var color_option = document.createElement('input');
    color_option.className = 'inputRadio';
    }

  5. #5
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KCChiefs View Post
    Shot in the dark...

    } else {
    //IE (for support of [document.elementForm.elementName] and class attribute)
    var color_option = document.createElement('<input name="product_colors" />');
    color_option.className = 'inputRadio';
    }


    Shouldn't it be....

    } else {
    //IE (for support of [document.elementForm.elementName] and class attribute)
    var color_option = document.createElement('input');
    color_option.className = 'inputRadio';
    }
    Check out my commenting. If I use that method for IE, I cannot use the document.elementForm.elementName format to access the form element. If I create the element using the actual HTML, IE allows it. FF, Safari, Opera, etc. all use the other (re: correct) method.

    Either way, doesn't change my problem.
    MySQL v5.1.58
    PHP v5.3.6


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
  •