Javascript onClick - Interactive Form
Posted: Mon Aug 16, 2010 9:46 am
Hi everyone,
Been a while since I last posted - been having some real basic trouble with a Javascript issue. What I'd like to do is have a form, which can display up to 4 versions of itself:
As you can see if you display that code I have the 4 lines, what I wish to have is only display one and a supply an 'Add Wall type' button by modifying the CSS 'display' property. They can then click the button it will add a new line each time (up to 5). My question is, how can I do this for up to only 4, where can I count how many are displayed currently. Also, can this be done with external CSS, or can it only be done using inline CSS? i.e.
Any tips, advice, code welcome! Cheers.
Been a while since I last posted - been having some real basic trouble with a Javascript issue. What I'd like to do is have a form, which can display up to 4 versions of itself:
Code: Select all
<html>
<head>
<title>Dynamic Form test</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>Dynamic Form Test</legend>
<table>
<tr>
<div id="wall-type1">
External Walls (Type 1)
<select></select>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</tr>
<tr>
<div id="wall-type2">
External Walls (Type 2)
<select></select>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</tr>
<tr>
<div id="wall-type3">
External Walls (Type 3)
<select></select>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</tr>
<tr>
<div id="wall-type4">
External Walls (Type 4)
<select></select>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</tr>
</table>
<input type="button" value="Add" />
</fieldset>
</form>
</body>
</html>Code: Select all
<div id="wall-type1" style="display:none;"></div>