...

View Full Version : Disabling Input Fields in Forms



tristann
01-07-2007, 09:01 PM
Hi guys,

I am having a very hard time figuring out how to dynamically disable certain fields in a form based upon the user's answer to a <select> element.

So, first I have a <select> element to my form asking the user to choose one of three choices, like so:

<SELECT Name="mortgagetype">
<option value='First'>First</option>
<option value='Second'>Second</option>
<option value='Third'>Third</option>
</SELECT>

The next 6 fields are all input fields:

<INPUT Type="text" size="30" Name="Question1">
<INPUT Type="text" size="30" Name="Question2">
<INPUT Type="text" size="30" Name="Question3">
<INPUT Type="text" size="30" Name="Question4">
<INPUT Type="text" size="30" Name="Question5">
<INPUT Type="text" size="30" Name="Question6">

The tricky part is that I want the availability of certain fields to depend on the user's answer to the <select> element that comes first. If they answer "First" then questions 1, 2, 3 and 4 should be disabled. If they answer "Second" then questions 3 and 4 should be disabled and if they answer "Third" none of the questions should be disabled.

I have been trying all morning to figure out how to do this and I have come up with nothing but frustration. Any help would be greatly appreciated!

Thanks a lot!

Arty Effem
01-08-2007, 06:53 AM
Hi guys,
So, first I have a <select> element to my form asking the user to choose one of three choices, like so:

<SELECT Name="mortgagetype">
<option value='First'>First</option>
<option value='Second'>Second</option>
<option value='Third'>Third</option>
</SELECT>

The next 6 fields are all input fields:

<INPUT Type="text" size="30" Name="Question1">
<INPUT Type="text" size="30" Name="Question2">
<INPUT Type="text" size="30" Name="Question3">
<INPUT Type="text" size="30" Name="Question4">
<INPUT Type="text" size="30" Name="Question5">
<INPUT Type="text" size="30" Name="Question6">

The tricky part is that I want the availability of certain fields to depend on the user's answer to the <select> element that comes first. If they answer "First" then questions 1, 2, 3 and 4 should be disabled. If they answer "Second" then questions 3 and 4 should be disabled and if they answer "Third" none of the questions should be disabled.
You could do this with a clunky if-else or switch case construct, but it would look better with a reusable function (which probably won't ever be reused).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>TEST PAGE</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
<FORM>
<SELECT Name="mortgagetype" onchange="enableByIndex(this, eTable, 'Question')">
<option>-Select-</option>
<option value='First'>First</option>
<option value='Second'>Second</option>
<option value='Third'>Third</option>
</SELECT>
<BR>
<INPUT Type="text" size="30" Name="Question1"><BR>
<INPUT Type="text" size="30" Name="Question2"><BR>
<INPUT Type="text" size="30" Name="Question3"><BR>
<INPUT Type="text" size="30" Name="Question4"><BR>
<INPUT Type="text" size="30" Name="Question5"><BR>
<INPUT Type="text" size="30" Name="Question6"><BR>
</FORM>

<SCRIPT type='text/javascript'>

eTable= /*Table of involved select box indices and their corresponding suffixes*/
[
[1, 1,2,3,4],
[2, 3,4]
]

function enableByIndex(box, table, prefix) /* get the select box, the conditional data and the name prefix */
{
var form=box.form, idx=box.selectedIndex, row=-1, suff;

/*Determine if the current selection is involved in disabling elements*/

for(var i=0; i<table.length && table[i][0]!=idx; i++)
;

if(i!=table.length) /*is involved*/
row=i;

for(var i=0, e=form.elements; i<e.length; i++) /*loop through all elements*/
if( !e[i].name.indexOf(prefix) ) /*found elem with prefix in name*/
if(row==-1)
e[i].disabled=false; /*restore all*/
else
if( !isNaN( suff=e[i].name.match(/\d+$/) ) ) /*found and saved number suffix*/
{
for(var j=1; j<table[row].length && table[row][j]!=suff; j++)
;
e[i].disabled = (j!=table[row].length); /*disable if suffix found in relevant data element*/
}
}
</SCRIPT>
</BODY>
</HTML>If this is for an assignment - they'll never believe you.

tristann
01-08-2007, 10:22 PM
Thank you so much!

It works beautifully. And, No, I am not doing this for an assignment, but rather for a website I am designing. My Java knowledge is minimal, but this helped a lot!

Thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum