0

I found this cool source of a dynamic form but after trying to fitting it to using a table it won't work as intended. A little help?

<html>

<head>
<script language="Javascript" type="text/javascript"> 
//Add more fields dynamically.
function addField(area,field) 
{
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area); //Select area.
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.

	//Find the count of the last element of the list. It will be in the format '<field><number>'. 
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//Create new element
	if(document.createElement) 
	{ 
		//W3C method.
		var tr = document.createElement("tr");
		var td = document.createElement("td");
		var li = document.createElement("li");
		var input = document.createElement("input");
		input.id = field+count;
		input.name = field+count;
		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
		li.appendChild(input);
		td.appendChild(li);
		tr.appendChild(td);
		field_area.appendChild(tr);
	} 
	else 
	{ 
		//Older Method
		field_area.innerHTML += "<tr><td><li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li></td></tr>";
	}
}


</script> 
</head>
<body>


<div style="float: left; padding: 10px; width:20%;">
<fieldset>
<legend>
<h3>Booking Information</h3>
</legend>
<form name="newbookform1" method="POST"> 
<strong>What:</strong><br/> 

<table align="left" border="0" cellspacing="0" cellpadding="3">
<ul id="what_area"> 
<tr><td><li><input type="text" name="item_1" id="item_1" /> </li> </tr></td>
<tr><td><li><input type="text" name="item_2" id="item_2" /> </li> </tr></td>
</ul> 
<tr><td><input type="button" value="Add What Field" onclick="addField('what_area','item_');" /> </tr></td>
</table>
</form> 
</fieldset>
</body>
</html>

Here is a link to the original. http://www.openjs.com/scripts/examples/addfield.php


If only it would work.

Edited by Jamesiscrazzy: n/a

1
Contributor
1
Reply
2
Views
5 Years
Discussion Span
Last Post by Jamesiscrazzy
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.