PDA

View Full Version : Disable Text Box with CSS Style



dude9er
Nov 14th, 2006, 11:13 PM
I'm trying to develop the code below. I'd like to control the textbox styll using CSS when the text box is disabled and enabled.

Here is a link to see what I'm looking to do:
http://charity-funding.us/groupRes/disableTest.html

As you can see, when the radioBTN for MasterContract is selected the textBoxes are disabled. Any of the other three radioBTNs enables the textBoxes.

I've added a style to two textboxes as an example. The style is active when the box is enabled or disabled. I'd like to create a NEW style specific to the DISABLED box when the MasterContract radio is SELECTED. Can anyone help with this please? THANKS!!!

Here is the code below...




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script language="javascript">

function enableField()
{
document.form1.address2.disabled=false;
document.form1.address22.disabled=false;
document.form1.address23.disabled=false;
document.form1.address24.disabled=false;
}

function disableField()
{
document.form1.address2.disabled=true;
document.form1.address22.disabled=true;
document.form1.address23.disabled=true;
document.form1.address24.disabled=true;
}


</script>


<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
.inputext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #243E5F;
width: 170px;
border: 1px solid #afbadd;
background-image: url(http://www.charity-funding.us/groupRes/images/pagebuild/txtBoxBG.gif);
background-repeat: repeat-x;
margin-top: 2px;
margin-bottom: 5px;
height: 22px;
background-color: white ! important;
z-index: 1000;
}
-->
</style>
</head>

<body onload="disableField()">
<form name="form1" >
<p>
<input name="address2" type="text" disabled="true" id="address2" />
<input name="address22" type="text" disabled="true" class="inputext" id="address22" />
<input name="address23" type="text" disabled="true" id="address23" />
<input name="address24" type="text" disabled="true" class="inputext" id="address24" />

</p>
<p>
<input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()"/>
<span class="txtBlue">
<html:radio property="payType" value="<%=hotel.model.property.Rate.PREPAY%>">Pre-Pay To Merchant Account</html:radio>
</span>
<input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()" />
Pay Upon Checkout
<input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()"/>
Pre-Pay To Hotel
<input name="radiobutton" type="radio" onfocus="disableField()" value="test" checked="checked" />
Master Contract </p>
</form>

</body>
</html>

ess
Nov 15th, 2006, 12:26 AM
when you are setting the textarea to a disabled state...try and set its css class as well.

for example. You have a css class defined for a disabled textarea and you have called "disabledText". in JS...you can then say

document.form1.address2.style.className = "disabledText";

You can do the same thing when you are enabling a given textarea. Obviously with a different css class.

good luck.
ess