Forma dinamica con DOM no me funciona :(

Shantic · #1 (**permalink**) 15/08/2005, 23:58

Alguien me puede decir por que este Javascript no funciona?

Código:

<html>
<head>

<script type="text/javascript">

// the default number of rows
var numrows = 0; 
function drawoptions()
{
   var tbl = document.getElementById("formtable");
   var targetnumrows = parseInt(document.getElementById("numoptions").value + "");

   // if they've selected to show more rows, then we add more rows
   if(targetnumrows > numrows)
   {
       for(var i=0; i<targetnumrows - numrows; i++)
       {
           var row = tbl.insertRow(tbl.rows.length);
            			   
		   
           var cell = row.insertCell(0);
		   var namefield = document.createTextNode("Acompañante:" );
		   cell.appendChild(namefield);
   
           var cell = row.insertCell(1);
		   var namefield = document.createTextNode((numrows+i+1));
		   cell.appendChild(namefield);
		   
//crear el row para la Foto
		   var row = tbl.insertRow(tbl.rows.length);     			   
          
		   var cell = row.insertCell(0);
		   var namefield = document.createTextNode("Foto: ");
			cell.appendChild(namefield);
			
			 // Create File cell
           cell = row.insertCell(1);
		   var namefield = document.createElement("input");          
          namefield.setAttribute("type", "file");
          namefield.setAttribute("id", "pictures" + (numrows+i));
          //  namefield.setAttribute("id", "pictures[]");
            namefield.setAttribute("name", "pictures" + (numrows+i));
            cell.appendChild(namefield);
			
			var row = tbl.insertRow(tbl.rows.length);     			   
          
		   var cell = row.insertCell(0);
		   var namefield = document.createTextNode("Nombre: ");
			cell.appendChild(namefield);
			
			var cell = row.insertCell(1);
			var namefield = document.createElement("input");
			namefield.setAttribute("type", "text");
            namefield.setAttribute("Name", "Nombre " + (numrows+i));
            namefield.setAttribute("id", "Nombre " + (numrows+i));
            cell.appendChild(namefield);	
			// make first select element
			var s1 = document.createElement("select"); 
		    s1.setAttribute("name","s1");
		    s1.setAttribute("id","s1");
			cell.appendChild(s1);   
   // fill in first select element
 	   var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","Adulto");
	   o.appendChild(document.createTextNode("Adulto")); 
	   s1.appendChild(o);
	   
	    var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","Niño");
	   o.appendChild(document.createTextNode("Niño")); 
	   s1.appendChild(o);
			
    
	
	var row = tbl.insertRow(tbl.rows.length);  
	var cell = row.insertCell(0);
	var namefield = document.createTextNode("Scout?: ");
			cell.appendChild(namefield);

	var cell = row.insertCell(1);
	// make first select element
			var s1 = document.createElement("select"); 
		    s1.setAttribute("name","Scout");
		    s1.setAttribute("id","Scout");
			cell.appendChild(s1);   
   // fill in first select element
 	   var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","Si");
	   o.appendChild(document.createTextNode("Si")); 
	   s1.appendChild(o);
	   
	    var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","No");
	   o.appendChild(document.createTextNode("No")); 
	   s1.appendChild(o);		
	
	var namefield = document.createTextNode("Playera?: ");
			cell.appendChild(namefield);   
	   // make first select element
			var s1 = document.createElement("select"); 
		    s1.setAttribute("name","Playera");
		    s1.setAttribute("id","Playera");
			cell.appendChild(s1);   
   // fill in first select element
 	   var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","Si");
	   o.appendChild(document.createTextNode("Chica")); 
	   s1.appendChild(o);
	   
	    var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","No");
	   o.appendChild(document.createTextNode("Mediana")); 
	   s1.appendChild(o);
						
		var o;
	   o = document.createElement("option");
	   o.setAttribute("name","o");
	   o.setAttribute("id","o");
	   o.setAttribute("value","No");
	   o.appendChild(document.createTextNode("Grande")); 
	   s1.appendChild(o);		
	   }
   
   }
   
   // they've decided to show less rows, so we remove some
   else
   {
       for(var i=0; i < numrows - targetnumrows; i++)
       {
           tbl.deleteRow(tbl.rows.length -1);		  
       }
   }

   numrows = tbl.rows.length -1;
//alert(numrows + " " + targetnumrows);
}

window.onload = drawoptions;

</script>
</head>

<body>

<form method="post" action="someformhandler.aspx">
Enter your friends names and email addresses<br />

Show 
 <select id="numoptions" onchange="drawoptions();">
   <option value="1" selected="selected">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
 </select> rows<br />

<table id="formtable">
<tr>
   <th>.</th>
   <th>.</th>
</tr>
</table>

<input type="submit" value="Save"  />

</form>

</body>

</html>

Lo que quiero es poder crear una "subforma" desde un select Box, me funciona parcialmente, cuando cambio el numero a veces funciona a veces no, todo parece aleatorio

Gracias de antemano