new input box on click

[saltir]

Hi, I am a new to java,
Could you please help me out?

On clicking the "Add input field" button I would like to enter another "surname"...another input type= text would be visible and data from the first would still be available.

Is this possible?

<tr><td>Surname :</td><td><input type="text" size="20" name "nm"></td>
<input type="button" onclick="addInput()" name="add" value="Add input field" /></td></tr>

Thanks for all your help!



Sally

 

[jpadie]

when you say you are new to java, i assume you mean javascript. the two are not related despite the similarity in name.

also your question is unclear. I assume you are wanting help with the addInput() function. You have not provided any pre-existing code which makes it difficult to help you with where you are going wrong.

perhaps something like this might work

<table>
<tr>
	<td valign="top">Surname :</td>
	<td [COLOR=#EF2929]id="input_nm"[/color]>
		[COLOR=#EF2929]<div>[/color]
			<input type="text" size="20" [COLOR=#EF2929]name "nm[]"[/color] />
			[COLOR=#EF2929]<button style="display:none;" onclick="return deleteme( this );">Del</button>[/color]
		[COLOR=#EF2929]</div>[/color]
	</td>
	<td>
		<input type="button" onclick="return addInput();" name="add" value="Add input field" />
	</td>
</tr>
</table>

function addInput(){
  	//get a reference to the enclosing table cell
	var p = document.getElementById('input_nm');
	//create new input
	var newInput = p.firstChild.cloneNode(true);
	//zero its value
  	newInput.firstChild.value = "";
	//make the del button visible
	newInput.lastChild.style.display = "inline";
  	//add the new input to the DOM in the table cell
	p.appendChild(newInput);
	//stop the button from firing a submission
	return false;
}
function deleteme( nd ){
	nd.parentNode.parentNode.removeChild(nd.parentNode);
	return false;
}

 

[saltir]

Hi,

Thanks a lot for your help!



Sally