Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old July 19th, 2006, 11:29 AM
Registered User
 
Join Date: Jul 2006
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default enable/disable textfields based on radio selection

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 :)
  #2 (permalink)  
Old July 19th, 2006, 11:46 PM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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
  #3 (permalink)  
Old July 20th, 2006, 08:36 AM
Registered User
 
Join Date: Jul 2006
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

SHUT UUUUUUUUUP!!! it works great!

THANKS!!! you saved my job :D




  #4 (permalink)  
Old December 7th, 2006, 04:01 AM
Registered User
 
Join Date: Dec 2006
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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:&nbsp; <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>
  #5 (permalink)  
Old December 7th, 2006, 07:42 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

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:&nbsp; <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
  #6 (permalink)  
Old December 8th, 2006, 05:41 AM
Registered User
 
Join Date: Dec 2006
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Matt,

Yeah, my HTML wasn't complete. Just enough for testing purposes.
Thanks for your help. It works perfectly.



Similar Threads
Thread Thread Starter Forum Replies Last Post
Using JS to enable/disable?? crabjoe Javascript 4 November 10th, 2008 06:48 PM
Enable Radio when check on Checkbox... rupen Javascript How-To 2 June 28th, 2006 04:44 AM
dynamically enable/disable radio btns kanoorani Javascript How-To 3 October 17th, 2005 10:16 AM
Disable/Enable elements ldoodle Javascript How-To 3 June 7th, 2005 05:48 AM
Display based on radio button selection Mekala Javascript 4 August 5th, 2004 11:36 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.