|
Subject:
|
enable/disable textfields based on radio selection
|
|
Posted By:
|
carrie.mims
|
Post Date:
|
7/19/2006 11:29:06 AM
|
Hi...
I've seen this post before, but I can't seem to tweak this code enough to fit the needs of the my form.
Here's what I'd like to accomplish:
-7 radio buttons and 4 text boxes that will enable or disable based on which radio button is selected.
-boxes to just be grayed out instead of disappearing
Here's what is accomplished:
The correct box will display with the correct button.
However, the "*make" box does not, should be next to the "*year" box.
Here's my code:
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
if (document.getElementById)
{
document.getElementById('region1').style.display = 'none';
document.getElementById('region2').style.display = 'none';
document.getElementById('region3').style.display = 'none';
document.getElementById
('region' + controlToHide).style.display = 'block';
document.getElementById
('region' + controlToHide).disabled = '';
}
else
{
alert('Sorry, your browser doesn\'t support this');
}
}
</script>
<table>
<tr><td>
<form onsubmit="return checkrequired(this)" ENCTYPE="multipart/form-data" method="post" action="xxx">
<span class="template"> *Your Email </span><br />
<input name="requiredemail" type="text" class="formfield-data" id="email" size="40" />
<br /><br />
<span class="template"> *Dealer Name</span><br />
<input name="requireddealername" type="text" class="formfield-data" id="dealername" size="40" />
<br /><br />
<span class="template"> *Address</span> <span class="template2"> *Zip</span><br />
<input name="requiredaddress" type="text" class="formfield-data" id="address" size="40" maxlength="100" />
<input name="requiredzip" type="text" class="formfield2" id="zip" size="5" maxlength="5" />
<br /><br />
<span class="template">*Quanity</span><br />
<input name="requiredquanity" type="text" class="formfield-data" id="quanity" size="15" maxlength="15" />
<br /><br />
<span class="template">Selected Zip Codes (.xls)</span><br />
<input name="attachment" type="file" class="comments" id="Attachment" size="30" />
<br /><br />
<span class="template"> *List Type </span><img src="images/question.gif" style="padding-left:5px;" onclick="MM_openBrWindow('listdescription.html','','width=375,height=500')"/><br />
<input class="formfield-data2" name="List" type="radio" value="Res Plus"/>Res Plus<br />
<input class="formfield-data2" name="List" type="radio" value="Consumer"/>Consumer<br />
<input class="formfield-data2" name="List" type="radio" value="RITAA" onclick="HideOrShowStuff(1)"/>RITAA<br />
<input class="formfield-data2" name="List" type="radio" value="Regular Auto" onclick="HideOrShowStuff(2)"/>Regular Auto<br />
<input class="formfield-data2" name="List" type="radio" value="Garage Predictor" onclick="HideOrShowStuff(2)"/>Garage Predictor<br />
<input class="formfield-data2" name="List" type="radio" value="True Credit" onclick="HideOrShowStuff(1)"/>True Credit<br />
<input class="formfield-data2" name="List" type="radio" value="True Credit w/ Tradelines" onclick="HideOrShowStuff(1)"/>True Credit w/ Tradelines<br />
<input class="formfield-data2" name="List" type="radio" value="Other" onclick="HideOrShowStuff(3)"/>Other
<br /><br />
<span class="template">*Range</span><br />
<input name="region1" id="region1" style="display:none;" type="text" class="formfield-data" size="15" maxlength="15" />
<br /><br />
<span class="template">*Year</span><span class="template">*Make</span><br />
<input name="region2" id="region2" style="display:none;" type="text" class="formfield-data" size="4" maxlength="4" /><input name="region2" id="region2" style="display:none;" type="text" class="formfield-data" size="15" maxlength="15" />
<br /><br />
<span class="template">*Other</span><br />
<input name="region3" id="region3" style="display:none;" type="text" class="formfield-data" size="40" maxlength="100" />
<br /><br />
<input name="submit" type="submit" class="comments" value="Submit" onclick="LimitAttach(this.form, this.form.attachment.value)"/>
</form>
</td></tr>
</table>
Thanks, I'll appreciate any help :)
|
|
Reply By:
|
vinod_yadav1919
|
Reply Date:
|
7/19/2006 11:46:34 PM
|
Hii carrie.mims!!
name="region2" id="region2" changed to name="region21" and name="region22" for * *Make and *Year
below code is working fine.
however you need to put onclick="HideOrShowStuff(0) when you need to disabled all the fields on click of the other radio button
*******************test.html********
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
if (document.getElementById)
{
document.getElementById('region1').disabled=true
document.getElementById('region3').disabled=true
if(controlToHide==2)
{
document.getElementById('region21').disabled=false
document.getElementById('region22').disabled=false
}
else
{
document.getElementById('region' + controlToHide).disabled = false;
document.getElementById('region21').disabled= true;
document.getElementById('region22').disabled= true;
}
}
else
{
alert('Sorry, your browser doesn\'t support this');
}
}
</script>
<table>
<tr><td>
<form onsubmit="return checkrequired(this)" ENCTYPE="multipart/form-data" method="post" action="../xxx">
<span class="template"> *Your Email </span><br />
<input name="requiredemail" type="text" class="formfield-data" id="email" size="40" />
<br /><br />
<span class="template"> *Dealer Name</span><br />
<input name="requireddealername" type="text" class="formfield-data" id="dealername" size="40" />
<br /><br />
<span class="template"> *Address</span> <span class="template2"> *Zip</span><br />
<input name="requiredaddress" type="text" class="formfield-data" id="address" size="40" maxlength="100" />
<input name="requiredzip" type="text" class="formfield2" id="zip" size="5" maxlength="5" />
<br /><br />
<span class="template">*Quanity</span><br />
<input name="requiredquanity" type="text" class="formfield-data" id="quanity" size="15" maxlength="15" />
<br /><br />
<span class="template">Selected Zip Codes (.xls)</span><br />
<input name="attachment" type="file" class="comments" id="Attachment" size="30" />
<br /><br />
<span class="template"> *List Type </span><img src="../images/question.gif" style="padding-left:5px;" onclick="MM_openBrWindow('../listdescription.html','','width=375,height=500')"/><br />
<input class="formfield-data2" name="List" type="radio" value="Res Plus"/>Res Plus<br />
<input class="formfield-data2" name="List" type="radio" value="Consumer"/>Consumer<br />
<input class="formfield-data2" name="List" type="radio" value="RITAA" onclick="HideOrShowStuff(1)"/>RITAA<br />
<input class="formfield-data2" name="List" type="radio" value="Regular Auto" onclick="HideOrShowStuff(2)"/>Regular Auto<br />
<input class="formfield-data2" name="List" type="radio" value="Garage Predictor" onclick="HideOrShowStuff(2)"/>Garage Predictor<br />
<input class="formfield-data2" name="List" type="radio" value="True Credit" onclick="HideOrShowStuff(1)"/>True Credit<br />
<input class="formfield-data2" name="List" type="radio" value="True Credit w/ Tradelines" onclick="HideOrShowStuff(1)"/>True Credit w/ Tradelines<br />
<input class="formfield-data2" name="List" type="radio" value="Other" onclick="HideOrShowStuff(3)"/>Other
<br /><br />
<span class="template">*Range</span><br />
<input name="region1" id="region1" disabled type="text" class="formfield-data" size="15" maxlength="15" />
<br /><br />
<span class="template">*Year</span><span class="template">*Make</span><br />
<input name="region2" id="region21" disabled type="text" class="formfield-data" size="4" maxlength="4" />
<input name="region2" id="region22" type="text" disabled class="formfield-data" size="15" maxlength="15" />
<br /><br />
<span class="template">*Other</span><br />
<input name="region3" id="region3" disabled type="text" class="formfield-data" size="40" maxlength="100" />
<br /><br />
<input name="submit" type="submit" class="comments" value="Submit" onclick="LimitAttach(this.form, this.form.attachment.value)"/>
</form>
</td></tr>
</table>
**********************
Hope this will help you
Cheers :)
vinod
|
|
Reply By:
|
carrie.mims
|
Reply Date:
|
7/20/2006 8:36:39 AM
|
SHUT UUUUUUUUUP!!! it works great!
THANKS!!! you saved my job :D
|
|
Reply By:
|
tmstark
|
Reply Date:
|
12/7/2006 3:01:35 AM
|
Hello. I'm trying to adapt the code you gave above to do something simpler, but I'm not getting what I need.
I want the Anonymous: Yes or No radio buttons to enable/disable TWO textfields: Name and Email. If Anonymous is selected, i.e., "Yes", both the Name and Email textfields should be disabled. If "No" is selected, both the Name and Email textfields should be enabled.
Here is the code. I'm lost in it. Help appreciated.
<html><head></head><body bgcolor=ECECEC>
<br><br>
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
if (document.getElementById)
{
document.getElementById('region1').disabled=true
document.getElementById('region1').disabled=true
if(controlToHide==2)
{
}
else
{
document.getElementById('region' + controlToHide).disabled = false;
}
}
else
{
alert('Sorry, your browser doesn\'t support this');
}
}
</script>
<form METHOD=post ACTION="/cgi-sys/FormMail.cgi">
Recipient: <select name="recipient" width=20>
<option value="blah@blah.com">Blah 1</option>
<option value="blah@blah.com">Blah 2</option>
</select><br><br>
Anonymous: <input name="anonymous" type="radio" value="Yes" onclick="HideOrShowStuff(2)"/>Yes
<input name="anonymous" type="radio" value="No" onclick="HideOrShowStuff(1)"/>No<br>
Name: <input name="name" id="region1" disabled type="text" size="29" /><br>
Email: <input name="name" id="region1" disabled type="text" size="29" />
<br>
<br>
<input type=text name="subject"><br>
<input type=text name="email"><br>
<input type=text name="realname"><br>
<INPUT type="Submit" value="Submit">
</form>
|
|
Reply By:
|
mat41
|
Reply Date:
|
12/7/2006 6:42:27 PM
|
FYI: You need to name your 'name' and 'email' input type fields uniquely. They can not both be called region1 and post independent values - I assume you are going to post your form?
I assume you posted part of your page, there are some fundamental HTML tags missing from your page. Anyhow, this will work for you:
---------------------cut n paste---------------------
<html><head></head><body bgcolor=ECECEC>
<br><br>
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
if (document.getElementById)
{
document.getElementById('n').disabled=true
document.getElementById('e').disabled=true
if(controlToHide==2)
{
}
else
{
document.getElementById('n').disabled = false;
document.getElementById('e').disabled = false;
}
}
else
{
alert('Sorry, your browser doesn\'t support this');
}
}
</script>
<form METHOD=post ACTION="/cgi-sys/FormMail.cgi">
Recipient: <select name="recipient" width=20>
<option value="blah@blah.com">Blah 1</option>
<option value="blah@blah.com">Blah 2</option>
</select><br><br>
Anonymous: <input name="anonymous" type="radio" value="Yes" onclick="HideOrShowStuff(2)"/>Yes
<input name="anonymous" type="radio" value="No" onclick="HideOrShowStuff(1)"/>No<br>
Name: <input name="name" id="n" disabled type="text" size="29" /><br>
Email: <input name="name" id="e" disabled type="text" size="29" />
<br>
<br>
<input type=text name="subject"><br>
<input type=text name="email"><br>
<input type=text name="realname"><br>
<INPUT type="Submit" value="Submit">
</form>
-----------------------------------------------------
Wind is your friend
Matt
|
|
Reply By:
|
tmstark
|
Reply Date:
|
12/8/2006 4:41:57 AM
|
Matt,
Yeah, my HTML wasn't complete. Just enough for testing purposes.
Thanks for your help. It works perfectly.
|
