JavaScript Add New Input

Deuce
avatar
rank Elder

Elder


Posts: 1672
Joined: 2005-11-20
Location: STL

Posted: Tue, 2008-07-15 15:01

Hey, I've looked around google and found stuff that looks similar, but ends up not really doing what I need.

I am trying to have 4 text inputs with a submit button and a Add New Input button.

The Add New Input button should add four more text inputs.

I can't even seem to find a script that adds one more input.

Any help with this or a link would be appreciated.

all. <Dictionary.com http://dictionary.reference.com/browse/all>

Deuce
Deuce's picture
rank Elder

Elder


Posts: 1672
Joined: 2005-11-20
Location: STL

Okay, so I've got to this

Posted: Tue, 2008-07-15 17:09

Okay, so I've got to this point, which will actually give me a new text box when the link is clicked, but for some reason it isn't running the script 4 times like it should... i would think the for statement in createInput() would make it loop around 4 times.

Thanks for any help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formr</title>

<script type="text/javascript">
var arrInput = new Array(5);
  var arrInputValue = new Array(5);

function addInput() {
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=5;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
	for (i=0;i<4;i++) {
  	return "<p>Text Box "+ id +": <input type='text' id='textBox"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"' size='20'></p>";
	}
}

</script>

</head>
<body>


	<form action="" method="post" name="form" id="form">
		<p>Text Box 1: <input name="textBox1" type="text" size="20"></p>
		<p>Text Box 2: <input name="textBox2" type="text" size="20"></p>
		<p>Text Box 3: <input name="textBox3" type="text" size="20"></p>
		<p>Text Box 4: <input name="textBox4" type="text" size="20"></p>
    <p id="parah">&nbsp;</p>
		<p><a href="javascript:addInput()">Add more input field(s)</a> &nbsp;&nbsp;&nbsp; <input name="submitBtn" type="submit" value="Submit"></p>
	</form>
</body>
</html>

all. <Dictionary.com http://dictionary.reference.com/browse/all>