dynamic generate form filed

K

kaeli

[email protected] enlightened said:
how to generate test fields base on the number selected in a drop down
option menu?

If you'd have searched the archives, you'd have seen the one I posted
just yesterday.
NOTE: Dom browsers only. Tested in IE6/NN7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function show(frm)
{
var e;
for (var i=0; i<frm.elements["select_1"].selectedIndex; i++)
{
e = document.createElement("input");
e.setAttribute("type","text");
e.setAttribute("name","text"+i);
document.getElementById("f1").appendChild(e);
}
}
</script>
</head>

<body>
<form name="f1" id="f1">
How many fields? <select name="select_1">
<option value='0'>-- choose one --</option>
<option value='1'>one</option>

<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
<option value='5'>five</option>
</select>
<input type="button" value="Make" onClick="show(this.form)">
</form>
</body>
</html>

--
 
G

Grant Wagner

Jorntk said:
how to generate test fields base on the number selected in a drop down
option menu?

Something like:

<form name="myFormName" id="myFormId">
<select name="mySelect" onchange="createInputs(this);">
<option value="0">Select something</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<script type="text/javascript">
function createInputs(sel) {
if (document.getElementById &&
document.createElement &&
sel.selectedIndex > 0) {

var inputsToCreate = sel.options[sel.selectedIndex].value;
var inputElement;
var formElement = document.getElementById('myFormId');

if (formElement && formElement.childNodes &&
formElement.removeChild) {

while (formElement.childNodes.length > 1) {
formElement.removeChild(formElement.childNodes[1]);
}

for (var i = 0; i < inputsToCreate; i++) {
inputElement = document.createElement('input');
inputElement.id = 'field' + i;
inputElement.type = 'text';
formElement.appendChild(inputElement);
}
}
}
}
</script>

You'll want to fancy it up, add labels (document.createTextNode), etc.
Only the most modern standards compliant browsers will support the above
(IE6, Netscape7/Mozilla/Firefox/Camino, Safari, Opera 7(?)).

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top