I need some help figuring out how to create a somewhat simple form. The form will have text fields for 'Name', 'Phone', etc. What I want is to have a drop down list, which has different insurances to choose from (i.e. Medical Insurance, Dental Insurance, Senior products), and say when I choose 'Senior Products', new text fields pop up within the form to add their 'Address' and click a checkbox that states they authorize to be contacted. These new fields aren't visible unless they choose 'Senior Products' from the drop down list. Can anyone help with this because I have no clue how to make this happen. Thank you VERY much!!!
ryanwhite17 0 Newbie Poster
Airshow 416 WiFi Lounge Lizard Team Colleague
Ryanwhite17,
Something like this maybe?
Paste the code into a new document, save as test.html then open in your browser.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
form { margin:0; }
.hide { display:none; }
</style>
<script language="JavaScript" type="text/javascript">
function showFields(menu){
var selected_bindings = [];
var unselected_bindings = [];
var i;
if( menu[menu.selectedIndex].getAttribute('bindings') != null && menu[menu.selectedIndex].getAttribute('bindings') != '' ) {
selected_bindings = menu[menu.selectedIndex].getAttribute('bindings').split(',');
}
for(i=1; i<menu.options.length; i++){
if( menu[i].getAttribute('bindings') == null || menu[i].getAttribute('bindings') == '' ) { continue; }
if( menu.selectedIndex != i ) {
unselected_bindings = unselected_bindings.concat( menu[i].getAttribute('bindings').split(',') );
}
}
for(i=0; i<selected_bindings.length; i++){
document.getElementById('r'+selected_bindings[i]).style.display = 'block';
document.getElementById('f'+selected_bindings[i]).style.display = 'block';
}
for(i=0; i<unselected_bindings.length; i++){
document.getElementById('r'+unselected_bindings[i]).style.display = 'none';
document.getElementById('f'+unselected_bindings[i]).style.display = 'none';
}
}
</script>
</head>
<body>
<form name="myForm" method="post" action="">
<table border cellpadding="5">
<tr>
<td>Insurance</td>
<td>
<select onchange="showFields(this)">
<option value="0" bindings="">Select a product</option>
<option value="1" bindings="1,2">Senior products</option>
<option value="2">Medical Insurance</option>
<option value="3" bindings="3,4">Dental Insurance</option>
</select>
</td>
</tr>
<tr id="r1" class="hide">
<td>Item 1</td>
<td><input id="f1" name="item1" size="25" value="value 1"></td>
</tr>
<tr id="r2" class="hide">
<td>Item 2</td>
<td><input id="f2" name="item2" type="checkbox" checked></td>
</tr>
<tr id="r3" class="hide">
<td>Item 3</td>
<td><input id="f3" name="item3" size="25" value="value 3"></td>
</tr>
<tr id="r4" class="hide">
<td>Item 4</td>
<td><input id="f4" name="item4" type="checkbox" checked></td>
</tr>
<tr>
<td> </td>
<td><input name="mySubmit" value="Submit" type="submit"></td>
</tr>
</table>
</form>
</body>
</html>Airshow
ryanwhite17 0 Newbie Poster
That is exactly what I'm looking for! Thank you very much!
Is there anyway to do this without a table or no. Where I need this is for this page: http://www.barichandassoc.com/contact.html
Airshow 416 WiFi Lounge Lizard Team Colleague
By the way, it needs refining for cross-browser use.
If it looks about right (in IE), then I'll post a better version.
Airshow
ryanwhite17 0 Newbie Poster
It's looks right in IE7. Is there a way to do it without the table, or should i be using a table for this in the first place?
Airshow 416 WiFi Lounge Lizard Team Colleague
Ryanwhite,
No problem. Table is not geramin to the solution.
All you need is for each form element that needs to be shown/hidden (and its label) to be wrapped in an identifiable HTML element; ie. contains an id="aaa" attribute.
In my example, I show/hide table rows, but divs/paragraphs are equally appropriate. In fact divs/paragraphs are slightly easier, as table rows would be a bit troublesome cross-browser (Moz family and IE are different).
Give me a few mins and I will post the code you need.
Airshow
Airshow 416 WiFi Lounge Lizard Team Colleague
Ryanwhite,
Try this, but be aware that your client-side form checking and your server-side script will probably need to take account of whether the "extra" fields are shown or hidden.
I have made it such that form elements (text and checkbox) are reset to null values when hidden, otherwise your end users could end up submitting values they thought were no longer part of the form (ie "if its hidden then it don't exist"). This is the safe way of doing it.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
form { margin:0; }
.hide { display:none; }
</style>
<script language="JavaScript" type="text/javascript">
function showFields(menu, allBindings) {
var selected_bindings;
var unselected_bindings = [];
var i, j, el;
if( menu[menu.selectedIndex].getAttribute('bindings') != null && menu[menu.selectedIndex].getAttribute('bindings') != '' ) {
selected_bindings = menu[menu.selectedIndex].getAttribute('bindings').split(',');
}
else { selected_bindings = []; }
for(i=1; i<menu.length; i++){
if( menu.selectedIndex == i || menu[i].getAttribute('bindings') == null || menu[i].getAttribute('bindings') == '' ) { continue; }
var b = menu[i].getAttribute('bindings').split(',');
for(j=0; j<b.length; j++){
if( !selected_bindings.inArray(b[j]) && !unselected_bindings.inArray(b[j]) ) {
unselected_bindings.push(b[j]);
}
}
}
for(i=0; i<unselected_bindings.length; i++) {
el = (document.getElementById) ? document.getElementById(unselected_bindings[i]) : document.all[unselected_bindings[i]];
if(el != null) {
formEls = el.getElementsByTagName('input');
for(j=0; j<formEls.length; j++){
if(formEls[j].getAttribute('type') == 'checkbox'){
formEls[j].checked = false;
}
else { formEls[j].value = ''; }
}
el.style.display = 'none';
}
}
for(i=0; i<selected_bindings.length; i++) {
el = (document.getElementById) ? document.getElementById(selected_bindings[i]) : document.all[selected_bindings[i]];
if(el != null) { el.style.display = 'block'; }
}
}
Array.prototype.inArray = function(val){
for(var i=0; i<this.length; i++) {
if( this[i] === val ) { return true; }
}
return false;
}
</script>
</head>
<body>
<form name="myForm" method="post" action="">
<label>Insurance Type:</label><br />
<select name="type" size="1" id="type" onchange="showFields(this)">
<option>Select type</option>
<option bindings="F1,F2">Medical Insurance</option>
<option bindings="F1,F2">Senior Products</option>
<option bindings="F1,F2">Dental Insurance</option>
<option bindings="F1,F2">Life Insurance</option>
<option bindings="F1,F2">Individual Insurance</option>
</select>
<br /><br />
<div id="F1" class="hide">
<label style="display:block;">*Address:</label>
<input name="addr" type="text" id="addr" />
<br /><br />
</div>
<div id="F2" class="hide">
<label for="auth">*I authorise you to contact me:</label>
<input name="auth" type="checkbox" id="auth" />
<br /><br />
</div>
</form>
</body>
</html>Good luck.
Airshow
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.