PDA

Click to See Complete Forum and Search --> : Dynamic Form fields

prabhukm
05-12-2004, 01:24 AM
Hi All,

Having a form in which the following fields are present - One select box, one text field and more & fewer buttons. Once the user clicks the more button i need to dynamically add one more select box and the text field. On final submit of the form all the values should be passed. Please anyone help me to achieve this requirement.

Thanks in advance
Fang
05-12-2004, 02:34 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Hide elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
onload=function() {document.getElementById('second').style.display="none";}
//-->
//]]>
</script>
<style type="text/css">
<!--
div {margin:10px;}
-->
</style>
</head>
<body>
<form action="#" name="myform" method="post">
<div>
<select name="fruit">
<option value="">select a fruit</option>
<option value="a">apple</option>
<option value="b">banana</option>
<option value="c">cranberry</option>
</select>
<input type="text" />
<button type="button" onclick="document.getElementById('second').style.display='block';">more</button>
</div>
<div id="second">
<select name="vegetable">
<option value="">select a vegetable</option>
<option value="a">artichoke</option>
<option value="b">broccoli</option>
<option value="c" id="c">cabbage</option>
</select>
<input type="text" />
</div>
</form>
</body>
</html>
Kor
05-12-2004, 02:37 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function moreF(f){
f.s2.style.display='inline';
f.t2.style.display='inline';
}
function fewF(f){
f.s2.style.display='none';
f.t2.style.display='none';
}
</script>
</head>

<body>
<form>
<select name="s1">
<option value="one1">one1</option>
<option value="one2">one2</option>
<option value="one3">one3</option>
</select>
<select name="s2" style="display:none">
<option value="two1">two1</option>
<option value="two2">two2</option>
<option value="two3">two3</option>
</select><br>
<br>
<input name="t1" type="text">
<input name="t2" type="text" style="display:none"><br>
<br>
<input type="button" value="fewer" onclick="fewF(this.form)">
<input type="button" value="more" onclick="moreF(this.form)">
</form>
</body>
</html>