Dec 28th, 2012, 1:01 PM
Kazi,
Here is a working example of showing/hiding divs using javascript.
It shows or hides divs (based on div id, in this case fieldset id's). If you select a button, such as two passengers, it will show you two sets of fields for your passenger data.
You will need to create your form, with as many sets of fields as you will think you may need, then select the maximum number of passengers, and fill in ALL fields during your FT initial test. This way FT will create the proper number of fields in the FT database. (you can do this after manually, but it is time consuming)
You can copy everything below this line and create a new document to upload and test before adding the form to FT. I purposely formatted the code to make the example easier to follow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show/Hide Divs</title>
<script type="text/JavaScript">
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{ document.getElementById(id).style.display = ''; }
}
function hide(id)
{ document.getElementById(id).style.display = 'none'; }
</script>
</head>
<body onLoad="javascript:hide('passenger1_info');javascript:hide('passenger2_info');javascript:hide('passenger3_info');return true;">
Passengers
<form action="" enctype="multipart/form-data" method="post">
<label for="p0">None:</label>
<input name="passengers" type="radio" id="p0"
onfocus="
hide('passenger1_info');
hide('passenger2_info');
hide('passenger3_info');
return true;"
/>
<label for="p1">One:</label>
<input name="passengers" type="radio" id="p1"
onfocus="
show('passenger1_info');
hide('passenger2_info');
return true;"
/>
<label for="p2">Two:</label>
<input name="passengers" type="radio" id="p2"
onfocus="
show('passenger1_info');
show('passenger2_info');
hide('passenger3_info');
return true;"
/>
<label for="p3">Three:</label>
<input name="passengers" type="radio" id="p3"
onfocus="
show('passenger1_info');
show('passenger2_info');
show('passenger3_info');
return true;"
/>
<!-- Passenger 1 Information -->
<fieldset id="passenger1_info">
<legend>Passenger 1</legend>
<label for="passenger1_age">Age</label>
<input type="text" name="passenger1_age" id="passenger1_age" />
<label for="passenger1_gender">Gender</label>
<input type="text" name="passenger1_gender" id="passenger1_gender" />
<label for="passenger1_other">Other</label>
<input type="text" name="passenger1_other" id="passenger1_other" />
</fieldset>
<!-- Passenger 2 Information -->
<fieldset id="passenger2_info">
<legend>Passenger 2</legend>
<label for="passenger2_age">Age</label>
<input type="text" name="passenger2_age" id="passenger2_age" />
<label for="passenger2_gender">Gender</label>
<input type="text" name="passenger2_gender" id="passenger2_gender" />
<label for="passenger2_other">Other</label>
<input type="text" name="passenger2_other" id="passenger2_other" />
</fieldset>
<!-- Passenger 3 Information -->
<fieldset id="passenger3_info">
<legend>Passenger 3</legend>
<label for="passenger3_age">Age</label>
<input type="text" name="passenger3_age" id="passenger3_age" />
<label for="passenger3_gender">Gender</label>
<input type="text" name="passenger3_gender" id="passenger3_gender" />
<label for="passenger3_other">Other</label>
<input type="text" name="passenger3_other" id="passenger3_other" />
</fieldset>
</form>
</body>
</html>
Here is a working example of showing/hiding divs using javascript.
It shows or hides divs (based on div id, in this case fieldset id's). If you select a button, such as two passengers, it will show you two sets of fields for your passenger data.
You will need to create your form, with as many sets of fields as you will think you may need, then select the maximum number of passengers, and fill in ALL fields during your FT initial test. This way FT will create the proper number of fields in the FT database. (you can do this after manually, but it is time consuming)
You can copy everything below this line and create a new document to upload and test before adding the form to FT. I purposely formatted the code to make the example easier to follow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show/Hide Divs</title>
<script type="text/JavaScript">
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{ document.getElementById(id).style.display = ''; }
}
function hide(id)
{ document.getElementById(id).style.display = 'none'; }
</script>
</head>
<body onLoad="javascript:hide('passenger1_info');javascript:hide('passenger2_info');javascript:hide('passenger3_info');return true;">
Passengers
<form action="" enctype="multipart/form-data" method="post">
<label for="p0">None:</label>
<input name="passengers" type="radio" id="p0"
onfocus="
hide('passenger1_info');
hide('passenger2_info');
hide('passenger3_info');
return true;"
/>
<label for="p1">One:</label>
<input name="passengers" type="radio" id="p1"
onfocus="
show('passenger1_info');
hide('passenger2_info');
return true;"
/>
<label for="p2">Two:</label>
<input name="passengers" type="radio" id="p2"
onfocus="
show('passenger1_info');
show('passenger2_info');
hide('passenger3_info');
return true;"
/>
<label for="p3">Three:</label>
<input name="passengers" type="radio" id="p3"
onfocus="
show('passenger1_info');
show('passenger2_info');
show('passenger3_info');
return true;"
/>
<!-- Passenger 1 Information -->
<fieldset id="passenger1_info">
<legend>Passenger 1</legend>
<label for="passenger1_age">Age</label>
<input type="text" name="passenger1_age" id="passenger1_age" />
<label for="passenger1_gender">Gender</label>
<input type="text" name="passenger1_gender" id="passenger1_gender" />
<label for="passenger1_other">Other</label>
<input type="text" name="passenger1_other" id="passenger1_other" />
</fieldset>
<!-- Passenger 2 Information -->
<fieldset id="passenger2_info">
<legend>Passenger 2</legend>
<label for="passenger2_age">Age</label>
<input type="text" name="passenger2_age" id="passenger2_age" />
<label for="passenger2_gender">Gender</label>
<input type="text" name="passenger2_gender" id="passenger2_gender" />
<label for="passenger2_other">Other</label>
<input type="text" name="passenger2_other" id="passenger2_other" />
</fieldset>
<!-- Passenger 3 Information -->
<fieldset id="passenger3_info">
<legend>Passenger 3</legend>
<label for="passenger3_age">Age</label>
<input type="text" name="passenger3_age" id="passenger3_age" />
<label for="passenger3_gender">Gender</label>
<input type="text" name="passenger3_gender" id="passenger3_gender" />
<label for="passenger3_other">Other</label>
<input type="text" name="passenger3_other" id="passenger3_other" />
</fieldset>
</form>
</body>
</html>