[SOLVED] Radio Button and Combo Boxes

ErcFrtz · October 14, 2008

Hello,

My question is, is there a way to make it so that when a radio button is checked it allows the usage of a set of combo boxes? I was trying to figure this out on my own but I am stumped. Any help would be appreciated. Thanks.

F1Fan · October 14, 2008

Could you explain a little further? By "combo boxes" do you mean select or drop down box? Also, what do you mean "allows the usage?"

Maq · October 14, 2008

Do you want them read-only until a radio button is checked? In that case you need javascript. Do you have any code?

ErcFrtz · October 14, 2008

By combo boxes I mean the drop down box. And what I want is to have them greyed out (or read only) until the radio button is checked. I don't have any code on this so far as I want to add this to a page but have no clue how to start or what I need.

Maq · October 14, 2008

Read this.

F1Fan · October 14, 2008

Yes, this will be JavaScript.

ErcFrtz · October 14, 2008

Thanks all for your responses1

Maq · October 14, 2008

Thanks all for your responses1

Sure, try it and if you're having trouble with the code post it so we can help.

ErcFrtz · October 16, 2008

Ok. So I think I figured out how the code is supposed to be inserted and work but it's not working. Below is the code.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHGC Database<?php if (isset($title)) {echo "&#8212;{$title}";} ?></title>
<link href="phgcdatabase.css" rel="stylesheet" type="text/css" />

<script language="javascript">
  function enableSingle(formObj)
  {
    formObj.upn.disabled=false;
    formObj.farmnumber.disabled=false;
    formObj.trackernumber.disabled=false;
    formObj.username.disabled=false;
            
    formObj.experiment.disabled=true;
    formObj.treatment.disabled=true;
    formObj.assay.disabled=true;
    formObj.gene.disabled=true;
  }
  function enableGeneral(formObj)
  {
    formObj.upn.disabled=true;
    formObj.farmnumber.disabled=true;
    formObj.trackernumber.disabled=true;
    formObj.username.disabled=true;
            
    formObj.experiment.disabled=false;
    formObj.treatment.disabled=false;
    formObj.assay.disabled=false;
    formObj.gene.disabled=false;
  }
</script>
</head>

<body>
<div id="header">
    <img src="images/headerimage.jpg" />
</div>
<div id="wrapper">
    <?php include('includes/menu.inc.php'); ?>
    <?php include('includes/logoutbutton.inc.php'); ?>
    <div id="maincontent">
    	<h1>Search</h1>
        <h2>Please use the form below to search the database.</h2>
        <form id="search" method="post" action="search_results.php">
        <h2>Enter the information you wish to use to search.</h2>
        <fieldset id="interests">
        <p>
          <input name="searchType" type="radio" value="single" id="singlesearch" onClick="enableSingle(search)">
          <label for="singlesearch">Search based on information for a single pig.</label>
        </p>
        <p>
          <label for="upn">UPN:</label>
          <input name="upn" id="upn" type="text" class="formbox" disabled="true" />
        </p>
        <p>
          <label for="farmnumber">Farm Number:</label>
          <input name="farmnumber" id="farmnumber" type="text" class="formbox" disabled="true" />
        </p>
        <p>
          <label for="trackernumber">ItemTracker Number:</label>
          <input name="trackernumber" id="trackernumber" type="text" class="formbox" disabled="true" />
        </p>
        <p>
          <label for="username">UserName:</label>
          <input name="username" id="username" type="text" class="formbox" disabled="true" />
        </p>
        <p>
          <input name="searchType" type="radio" value="general" id="generalsearch" onClick="enableGeneral(search)">
          <label for="generalsearch">Search for multiple pigs based on general information.</label>
        </p>
          <p>
            <label for="experiment">Search using an experiment.</label>
            <select name="experiment" id="experiment" disabled="true">
              <option value="">Please select an experiment.</option>
              <?php
                for($j = 0; $j < count($experimentarray); $j++)
                {
                  $experimentid = $experimentarray[$j][0];
                  $experimentname = $experimentarray[$j][1];
                  echo '<option value="'.$experimentid.'">'.$experimentname.'</option>';  
                }
              ?>
            </select>
          </p>
          <p>
            <label for="treatment">Search using a treatment.</label>
            <select name="treatment" id="treatment" disabled="true">
              <option value="">Please select a treatment type.</option>
              <?php
                for($h = 0; $h < count($treatmentarray); $h++)
                {
                  $treatmentid = $treatmentarray[$h][0];
                  $treatmentname = $treatmentarray[$h][1];
                  echo '<option value="'.$treatmentid.'">'.$treatmentname.'</option>';  
                }  
              ?>
            </select>
          </p>
          <p>
            <label for="assay">Search using an assay.</label>
            <select name="assay" id="assay" disabled="true">
              <option value="">Please select an assay.</option>
              <?php
                for($h = 0; $h < count($assayarray); $h++)
                {
                  $assayid = $assayarray[$h][0];
                  $assayname = $assayarray[$h][1];
                  echo '<option value="'.$assayid.'">'.$assayname.'</option>';  
                }
              ?>
            </select>
          </p>
          <p>
            <label for="gene">Search using a gene.</label>
            <select name="gene" id="gene" disabled="true">
              <option value="">Please select a gene.</option>
              <?php
                for($g = 0; $g < count($genearray); $g++)
                {
                  $geneid = $genearray[$g][0];
                  $genename = $genearray[$g][1];
                  echo '<option value="'.$geneid.'">'.$genename.'</option>';
                }
              ?>
            </select>
          </p>
        </fieldset>

Andy-H · October 16, 2008

<script type="text/javascript" language="javascript">
function changeInfo(type){

document.getElementById(type + "Display").style.display = 'block';

}
</script>

That in the head

And for the body


<input type="radio" name="someName" onFocus="changeInfo('content');">

<div id="contentDisplay" style="display: none;">

Some content to show/hide...

</div>

That should work.

// edited a little...

ErcFrtz · October 16, 2008

I tried your code and it doesn't do what I want it to. It makes the items disappear all together and I just want them greyed out at first. This code also does not work as when I click on the radio buttons the items don't appear.

Andy-H · October 16, 2008

Works for me when I just tested it...

Well it shows but obviously doesnt hide...

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function changeInfo(type){

document.getElementById(type + "Display").style.display = 'block';
}
</script>
</head>
<body>
<input type="radio" name="someName" onFocus="changeInfo('content');">

<div id="contentDisplay" style="display: none;">

Some content to show/hide...

</div>
</body>
</html>

ErcFrtz · October 16, 2008

I copied that exactly into a new page and it still wouldn't work. The text isn't displayed when the radio button is clicked. Could it be some setting I have to ask the server manager to adjust? Thanks for all the help so far.

Andy-H · October 16, 2008

Nope, are you using internet explorer as I have only tested in Opera.

Scrap that, works in IE for me too :S

http://mafia-world.net/hooligan/test.php ??

Maq · October 16, 2008

I copied that exactly into a new page and it still wouldn't work. The text isn't displayed when the radio button is clicked. Could it be some setting I have to ask the server manager to adjust? Thanks for all the help so far.

What browser/version are you using because Andy's example has worked on 3 separate browsers for me...

Andy-H · October 16, 2008

Found what you wanted m8, can't believe how simple this is...


<input type="radio" name="enable" onClick="textBox.disabled=false;"><br /><br />

<input type="text" name="textBox" disabled="true">

ErcFrtz · October 16, 2008

His page works on my browser as well. But when I copy the same thing over to a php script and upload it to the server and view it, it does not work.

http://www.animalgenome.org/lunney/TestPage.php

That is his same exact code but it won't display the text when you click the radio button.

ErcFrtz · October 16, 2008

Found what you wanted mate, can't believe how simple this is...
<input type="radio" name="enable" onClick="textBox.disabled=false;"><br /><br />

<input type="text" name="textBox" disabled="true">

Ok. I will try that and see what happens.

Andy-H · October 16, 2008

lol your example worked fine for me...

Maq · October 16, 2008

http://www.animalgenome.org/lunney/TestPage.php

This worked for me as well, FF and IE 6...

ErcFrtz · October 16, 2008

http://www.animalgenome.org/lunney/TestPage.php

This worked for me as well, FF and IE 6...

Yes, it worked for me too (once I used FF) I was using google chrome and I guess it doesn't like that. *shrug*

Anyways, I got my original code working. Was a matter of referencing the form by name but not setting a name for it.

Thanks for all the help everyone.

Maq · October 16, 2008

Yes, it worked for me too (once I used FF) I was using google chrome and I guess it doesn't like that. *shrug*

Anyways, I got my original code working. Was a matter of referencing the form by name but not setting a name for it.

Thanks for all the help everyone.

If I were you I would test in FF first because it lives up to the W3 standards the best.

Andy-H · October 16, 2008

I always use Opera as it seems to have strict rules on displaying the code that apply to most browsers but it seems to be slightly more strict with displaying it if you get what I mean.

Sign In

[SOLVED] Radio Button and Combo Boxes

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information