Page 1 of 1

Javascript onClick - Interactive Form

Posted: Mon Aug 16, 2010 9:46 am
by timWebUK
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:

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>
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.

Code: Select all

<div id="wall-type1" style="display:none;"></div>
Any tips, advice, code welcome! Cheers.

Re: Javascript onClick - Interactive Form

Posted: Mon Aug 16, 2010 1:03 pm
by kaszu
CSS:

Code: Select all

.hidden { display: none; }
HTML:

Code: Select all

...
<div id="wall-type2" class="hidden">
...
<div id="wall-type3" class="hidden">
...
<div id="wall-type4" class="hidden">
...
<input type="button" value="Add" onclick="addWall()" /> 
JS:

Code: Select all

var visibleWallCount = 1;
function addWall() {
    if (visibleWallCount == 4) return; //Max is 4
    visibleWallCount++;
    var element = document.getElementById('wall-type' + visibleWallCount);
    element.className = ''; //Removes "hidden" class
}

Re: Javascript onClick - Interactive Form

Posted: Tue Aug 17, 2010 3:53 am
by timWebUK
Thanks for that, worked brilliantly.

I've made a few modifications myself which are also working fine, however it doesn't seem to work as expected in Internet Explorer.

(Chrome displays the correct layout - well, the layout I want it to display!)

Any suggestions would be great. Latest code:

HTML:

Code: Select all

<html>
	<head>
		<title>Dynamic Form test</title>
		<link rel="stylesheet" type="text/css" href="formtest.css" />
		<script type="text/javascript" src="formtest.js"></script> 
	</head>
	<body>
		<form action="#" method="post">
			<fieldset>
				<legend>Dynamic Form Test</legend>
				<table>
					<tr>
						<div id="wall-type1">
							External Walls (Type 1)
							<select id="">
								<option value='0'>Timber
								<option value='1'>Masonry
								<option value='2'>Cladding							
							</select>
							<select id="">
								<option value='0'>Brick
								<option value='1'>Block
								<option value='2'>Timber
								<option value='3'>Render
							</select>
							<input type="text" />
							<input type="text" />
							<input type="text" />
						</div>
					</tr>
					<tr>
						<div id="wall-type2" class="hidden">
							External Walls (Type 2)
							<select id="">
								<option value='0'>Timber
								<option value='1'>Masonry
								<option value='2'>Cladding							
							</select>
							<select id="">
								<option value='0'>Brick
								<option value='1'>Block
								<option value='2'>Timber
								<option value='3'>Render
							</select>
							<input type="text" />
							<input type="text" />
							<input type="text" />
						</div>
					</tr>
					<tr>
						<div id="wall-type3" class="hidden">
							External Walls (Type 3)
							<select id="">
								<option value='0'>Timber
								<option value='1'>Masonry
								<option value='2'>Cladding							
							</select>
							<select id="">
								<option value='0'>Brick
								<option value='1'>Block
								<option value='2'>Timber
								<option value='3'>Render
							</select>
							<input type="text" />
							<input type="text" />
							<input type="text" />
						</div>
					</tr>
					<tr>
						<div id="wall-type4" class="hidden">
							External Walls (Type 4)
							<select id="">
								<option value='0'>Timber
								<option value='1'>Masonry
								<option value='2'>Cladding							
							</select>
							<select id="">
								<option value='0'>Brick
								<option value='1'>Block
								<option value='2'>Timber
								<option value='3'>Render
							</select>
							<input type="text" />
							<input type="text" />
							<input type="text" />
						</div>
					</tr>
				</table>
			<input type="button" value="Add additional type..." id="btn_add" onclick="addWall(this)" />
			<input type="button" value="Delete type..." id="btn_delete" class="hidden" onclick="deleteWall(this)" />			
			</fieldset>
		</form>
	</body>
</html>
Javascript:

Code: Select all

var visibleWallCount = 1;

function addWall(button) 
{
    visibleWallCount++;
	
    var element = document.getElementById('wall-type' + visibleWallCount);
    element.className = '';
	
	if (visibleWallCount > 1)
	{
		var element = document.getElementById('btn_delete');
		element.className = '';
	}
	
	if (visibleWallCount == 4)
	{
		button.disabled = true;
		return;
	}
}

function deleteWall(button) 
{
    var element = document.getElementById('wall-type' + visibleWallCount);
	element.className = 'hidden';
	visibleWallCount--;
	
	if (visibleWallCount < 4)
	{
		var element = document.getElementById('btn_add');
		element.disabled = false;
	}
	
	if (visibleWallCount == 1)
	{
		var element = document.getElementById('btn_add');
		element.disabled = false;
		button.className = 'hidden';	
		return;
	}
}
CSS:

Code: Select all

.hidden
{
	display:none;
}