...
PDA

How do I program a select option to enable a field?

magikeys
10-12-2011, 05:06 PM
I have a telephone input on my form. It is an optional input for users. The prompt begins with the user having to select a phone type from a select menu, and then continue to the text fields to enter the digits. I would like to have the text fields disabled unless any of the types of phone are selected, but not if a type isn't selected. Here's my HTML code so far:

<select name="phoneType1">
<option value="" selected="selected">Type...</option>
<option value="Home">Home</option>
<option value="Work">Office</option>
<option value="Cell">Cell</option>
</select>
(<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) -
<input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> -
<input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/>
&nbsp;&nbsp;&nbsp;&nbsp;ext.<input type="text" name="phExtension1" size="4" maxlength="4"/>

I know that all I need to do to disable the text fields is to type in "disabled" before the name of the field. But, I don't know how to enable it when "Home," "Office," or "Cell" is selected. Thanks for any help.
DanHardy
10-12-2011, 05:36 PM
Here's an example that may help:


<html>
<head>
<title>Activate Textboxes</title>
<script type="text/javascript">
function activateTextBox () {
if (document.getElementById("r1a").checked || document.getElementById("r1b").checked) {
document.getElementById("t2").disabled=false;
}
if (document.getElementById("r2a").checked || document.getElementById("r2b").checked) {
document.getElementById("t3").disabled=false;
}
if (document.getElementById("r3a").checked || document.getElementById("r3b").checked) {
document.getElementById("t4").disabled=false;
}
}
</script>
</head>

<body>

<form action="" method="post" name="myForm">
<table width="100%" border="1">
<tr>
<td><input type="text" name="t1"></td>
<td><p>
<label>
<input type="radio" name="r1" value="radio" id="r1a" onclick="activateTextBox()">
To</label>
<br>
<label>
<input type="radio" name="r1" value="radio" id="r1b" onclick="activateTextBox()">
And</label>
<br>
</p></td>
<td><input type="text" name="t2" disabled></td>
<td><label>
<input type="radio" name="r2" value="radio" id="r2a" onclick="activateTextBox()">
To</label> <br> <label>
<input type="radio" name="r2" value="radio" id="r2b" onclick="activateTextBox()">
And</label> </td>
<td><input type="text" name="t3" disabled></td>
<td><label>
<input type="radio" name="r3" value="radio" id="r3a" onclick="activateTextBox()">
To</label> <br> <label>
<input type="radio" name="r3" value="radio" id="r3b" onclick="activateTextBox()">
And</label> </td>
<td><input type="text" name="t4" disabled></td>
</tr>
</table>
</form>

</body>
</html>
niralsoni
10-12-2011, 05:43 PM
I have modified your code a little bit (as highlighted) and also added some script around it...

<select name="phoneType1" onchange="showDtls(this)">
<option value="" selected="selected">Type...</option>
<option value="Home">Home</option>
<option value="Work">Office</option>
<option value="Cell">Cell</option>
</select>
<div id="phoneDtlsId">
(<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) -
<input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> -
<input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/>
&nbsp;&nbsp;&nbsp;&nbsp;ext.<input type="text" name="phExtension1" size="4" maxlength="4"/>
</div>


Script for the same is ---

function showDtls(cmbObj) {
var phoneDiv, txtBoxes, isDisabled, i, ele;
phoneDiv = document.getElementById('phoneDtlsId');
if(!phoneDiv) return;
txtBoxes = phoneDiv.getElementsByTagName('input');
for(i = 0; i < txtBoxes.length; i++) {
ele = txtBoxes[i];
if(ele.type.toLowerCase() == 'text') {
isDisabled = (cmbObj.selectedIndex === 0);
ele.disabled = isDisabled;
ele.value = '';
}
}
}
showDtls(document.getElementsByName('phoneType1')[0]);


Thanks & Regards,
Niral Soni

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum