pureporsche
06-17-2009, 12:05 AM
Hi all I have a dynamic form where the # of fields selected appear at the bottom of the form. Can some one help me position those elements to appear within the <div id="mydiv">- should appear here - </div> area. And how would I get the first and last name text boxes appear next to one another not below each other.
Thanks a bunch!
-------------------------
<html>
<head>
<title>untitled</title>
<style type="text/css">
div.inputbox {
width: 200px;
font-size: 80%;
padding: 3px 0px 3px 50px;
}
</style>
<script type="text/javascript" language="javascript">
function setTextInputs(oSelect) {
var howmany = oSelect[oSelect.selectedIndex].value, add = true;
var n = 1, oForm = oSelect.form, oDiv, oInput;
while (oDiv = document.getElementById('Name' + n))
if (n++ > howmany) {
add = false;
oForm.removeChild(oDiv);
}
if (add)
for (n; n <= howmany; ++n) {
oDiv = document.createElement('div');
oDiv.setAttribute('id', 'Name' + n);
oDiv.className = 'inputbox';
oDiv.appendChild(document.createTextNode('Name ' + n + ': '));
oForm.appendChild(oDiv);
oInput = document.createElement('input');
oInput.setAttribute('type', 'text');
oInput.setAttribute('name', 'FirstName_' + n);
oDiv.appendChild(oInput);
oInput2 = document.createElement('input');
oInput2.setAttribute('type', 'text');
oInput2.setAttribute('name', 'LastName_' + n);
oDiv.appendChild(oInput2);
}
}
/*----------------------------------------*/
</script>
</head>
<body>
<form action="test.asp" method="POST">
---------------------<br />
<div id="mydiv">- should appear here - </div>
---------------------<br />
<p><strong>Number of People:</strong>
<select name="NoOfPpl" onChange="setTextInputs(this)">
<option value="0" selected="selected">- 0 -</option>
<option value="1">- 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="10">- 10 -</option>
</select></p>
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>
Thanks a bunch!
-------------------------
<html>
<head>
<title>untitled</title>
<style type="text/css">
div.inputbox {
width: 200px;
font-size: 80%;
padding: 3px 0px 3px 50px;
}
</style>
<script type="text/javascript" language="javascript">
function setTextInputs(oSelect) {
var howmany = oSelect[oSelect.selectedIndex].value, add = true;
var n = 1, oForm = oSelect.form, oDiv, oInput;
while (oDiv = document.getElementById('Name' + n))
if (n++ > howmany) {
add = false;
oForm.removeChild(oDiv);
}
if (add)
for (n; n <= howmany; ++n) {
oDiv = document.createElement('div');
oDiv.setAttribute('id', 'Name' + n);
oDiv.className = 'inputbox';
oDiv.appendChild(document.createTextNode('Name ' + n + ': '));
oForm.appendChild(oDiv);
oInput = document.createElement('input');
oInput.setAttribute('type', 'text');
oInput.setAttribute('name', 'FirstName_' + n);
oDiv.appendChild(oInput);
oInput2 = document.createElement('input');
oInput2.setAttribute('type', 'text');
oInput2.setAttribute('name', 'LastName_' + n);
oDiv.appendChild(oInput2);
}
}
/*----------------------------------------*/
</script>
</head>
<body>
<form action="test.asp" method="POST">
---------------------<br />
<div id="mydiv">- should appear here - </div>
---------------------<br />
<p><strong>Number of People:</strong>
<select name="NoOfPpl" onChange="setTextInputs(this)">
<option value="0" selected="selected">- 0 -</option>
<option value="1">- 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="10">- 10 -</option>
</select></p>
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>