4 Dropdown Lists with Other option that displays textbox input

[Orrin77]

Hi,

I'm new to the forums and I hope I can find the answer I'm looking for. I have plenty of experience with HTMl, however my javascript knowledge is.. well non-existant really.

I have been tasked with redesigning a form to gather data and input it into our SQL database. The form works fine when inputting the data, however I'm trying to create 4 dropdown lists all with an Other field. When the Other field is selected, I would like a textbox to appear underneath the ddl.

So far, with the following code, I've only been able to get the last ddl to display the textbox. Although when I select the Other field from any of the previous ddl's, the textbox disappears from the 4th ddl.

Here's what I have for code so far.

JavaScript:

<script type="text/javascript">
function toggleField(valuea) {
var o = document.getElementById('worka:25.Other');
(value == 'worka:25.Other')? o.style.display = 'block' : o.style.display = 'none';
}
</script>
<script type="text/javascript">
function toggleField(valuez) {
var o = document.getElementById('employz:12.Other');
(value == 'employz:12.Other')? o.style.display = 'block' : o.style.display = 'none';
} 
</script>
<script type="text/javascript">
function toggleField(valueb) {
var o = document.getElementById('workb:14.Other');
(value == 'workb:14.Other')? o.style.display = 'block' : o.style.display = 'none';
} 
</script>
<script type="text/javascript">
function toggleField(value) {
var o = document.getElementById('discipline:28.Other');
(value == 'discipline:28.Other')? o.style.display = 'block' : o.style.display = 'none';
} 
</script>

HTML Form Elements:

<table width="800" border="0" cellpadding="2" style="border: thin solid black">
      <tr>
        <td><font face="Arial, Helvetica, sans-serif" color="blue" size="2"><b>Industry Sector/Employer</b></font>
        </td>
        <td>
          <p><font face="Arial, Helvetica, sans-serif" color="blue" size="2"><b>Workplace</b></font></p>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <select name="sel" id="sel" onchange="toggleField(this.valuea);">
          <option value="worka:01.Biotechnology Company">Biotechnology Company</option>
          <option value="worka:02.Cement">Cement</option>
          <option value="worka:03.Chemicals">Chemicals</option>
          <option value="worka:04.Clinical Trials">Clinical Trials</option>
          <option value="worka:05.Cosmetics">Cosmetics</option>
          <option value="worka:06.Diagnostics">Diagnostics</option>
          <option value="worka:07.Electronics">Electronics</option>
          <option value="worka:08.Energy">Energy</option>
          <option value="worka:09.Environmental">Environmental</option>
          <option value="worka:10.Food/Agriculture">Food/Agriculture</option>
          <option value="worka:11.Forensics">Forensics</option>
          <option value="worka:12.Laboratory Instrument/Products Manufacturer">Laboratory Instrument/Products Manufacturer</option>
          <option value="worka:13.Metals">Metals</option>
          <option value="worka:14.Nanotechnology">Nanotechnology</option>
          <option value="worka:15.Paper">Paper</option>
          <option value="worka:16.Petroleum/Petrochemicals">Petroleum/Petrochemicals</option>
          <option value="worka:17.Pharma, Drug Discovery">Pharma, Drug Discovery</option>
          <option value="worka:18.Pharma, Generics">Pharma, Generics</option>
          <option value="worka:19.Pharma, Prep/Process">Pharma, Prep/Process</option>
          <option value="worka:20.Polymers/Plastics">Polymers/Plastics</option>
          <option value="worka:21.Rubber">Rubber</option>
          <option value="worka:22.Textiles">Textiles</option>
          <option value="worka:23.Transportation">Transportation</option>
          <option value="worka:24.University">University</option>
          <option value="worka:25.Other">Other</option>
          </select>
          <input type="text" name="worka:25.Other" id="worka:25.Other" style="display: none;">
        </td>
        <td valign="top">
          <select name="sel" id="sel" onchange="toggleField(this.valuez);">
          <option value="employz:01.Government">Government</option>
          <option value="employz:02.Hospital/Medical facility Laboratory">Hospital/Medical facility Laboratory</option>
          <option value="employz:03.Clinical Testing Laboratory, Private">Clinical Testing Laboratory, Private</option>
          <option value="employz:04.University/College">University/College</option>
          <option value="employz:05.Research Institution, Private">Research Institution, Private</option>
          <option value="employz:06.Contract Research Organization">Contract Research Organization</option>
          <option value="employz:07.Independent Analytical Service Lab">Independent Analytical Service Lab</option>
          <option value="employz:08.Utility Company">Utility Company</option>
          <option value="employz:09.Pharmaceutical Company">Pharmaceutical Company</option>
          <option value="employz:10.Biotechnology Company">Biotechnology Company</option>
          <option value="employz:11.Industrial Laboratory">Industrial Laboratory</option>
          <option value="employz:12.Other">Other</option>
          </select>
          <input type="text" name="employz:12.Other" id="employz:12.Other" style="display: none;">
        </td>
      </tr>
      <tr>
        <td><p><font face="Arial, Helvetica, sans-serif" color="blue" size="2"><b>Job Title</b></font></p>
        </td>
        <td>
          <p><font face="Arial, Helvetica, sans-serif" color="blue" size="2"><b>Discipline</b></font></p>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <select name="sel" id="sel" onchange="toggleField(this.valueb);">
          <option value="workb:01.Chemist">Chemist</option>
          <option value="workb:02.Engineer">Engineer</option>
          <option value="workb:03.Lab Manager/Director">Lab Manager/Director</option>
          <option value="workb:04.Laboratory Technician">Laboratory Technician</option>
          <option value="workb:05.MD (if they work in a laboratory)">MD (if they work in a laboratory)</option>
          <option value="workb:06.Medical Technologist">Medical Technologist</option>
          <option value="workb:07.Pathologist">Pathologist</option>
          <option value="workb:08.President/CEO/Administrator">President/CEO/Administrator</option>
          <option value="workb:09.Professor/Science Faculty">Professor/Science Faculty</option>
          <option value="workb:10.Purchasing Manager">Purchasing Manager</option>
          <option value="workb:11.QA/QC Manager">QA/QC Manager</option>
          <option value="workb:12.Research Director/Principal Investigator">Research Director/Principal Investigator</option>
          <option value="workb:13.Research Scientist">Research Scientist</option>
          <option value="workb:14.Other">Other</option>
          </select>
          <input type="text" name="workb:14.Other" id="workb:14.Other" style="display: none;">
        </td>
        <td valign="top">
          <select name="sel" id="sel" onchange="toggleField(this.value);">
          <option value="discipline:01.Analytical Chemistry">Analytical Chemistry</option>
          <option value="discipline:02.Bioanalytical Chemistry">Bioanalytical Chemistry</option>
          <option value="discipline:03.Biochemistry">Biochemistry</option>
          <option value="discipline:04.Biology">Biology</option>
          <option value="discipline:05.Cell Biology">Cell Biology</option>
          <option value="discipline:06.Chemistry">Chemistry</option>
          <option value="discipline:07.Chemometrics">Chemometrics</option>
          <option value="discipline:08.Clinical Diagnostics">Clinical Diagnostics</option>
          <option value="discipline:09.Computer Science">Computer Science</option>
          <option value="discipline:10.Drug Discovery">Drug Discovery</option>
          <option value="discipline:11.Genomics/Genetics">Genomics/Genetics</option>
          <option value="discipline:12.High Throughput Screening">High Throughput Screening</option>
          <option value="discipline:13.Immunology">Immunology</option>
          <option value="discipline:14.Laboratory Automation">Laboratory Automation</option>
          <option value="discipline:15.Material Science">Material Science</option>
          <option value="discipline:16.Medicinal Chemist">Medicinal Chemist</option>
          <option value="discipline:17.Microbiology">Microbiology</option>
          <option value="discipline:18.Molecular Biology">Molecular Biology</option>
          <option value="discipline:19.Molecular Diagnostics">Molecular Diagnostics</option>
          <option value="discipline:20.Neuroscience">Neuroscience</option>
          <option value="discipline:21.Pharmacology">Pharmacology</option>
          <option value="discipline:22.Process Analytical Chemistry">Process Analytical Chemistry</option>
          <option value="discipline:23.Proteomics/protein chemistry">Proteomics/protein chemistry</option>
          <option value="discipline:24.RNA interference">RNA interference</option>
          <option value="discipline:25.Stem cell research">Stem cell research</option>
          <option value="discipline:26.Toxicology">Toxicology</option>
          <option value="discipline:27.Virology">Virology</option>
          <option value="discipline:28.Other">Other</option>
          </select>
          <input type="text" name="discipline:28.Other" id="discipline:28.Other" style="display: none;">
        </td>
      </tr>
    </table>

I realize that the functions could be rewritten to accommodate multiple values, but I just don't know what I need to do to get this working.

Please any help would be wonderful.

Thanks,
Orrin

 

[Orrin77]

Hi again,

Well I figured out what was wrong. I was calling the same function for all the dropdowns. Once I renamed the functions and their variables(although I'm not sure if that did anything) everything works fine.

Javascript:

<script type="text/javascript">
function toggleFielda(value) {
var a = document.getElementById('worka:25.Other');
(value == 'worka:25.Other')? a.style.display = 'block' : a.style.display = 'none';
}
</script>
<script type="text/javascript">
function toggleFieldz(value) {
var z = document.getElementById('employz:12.Other');
(value == 'employz:12.Other')? z.style.display = 'block' : z.style.display = 'none';
} 
</script>
<script type="text/javascript">
function toggleFieldb(value) {
var b = document.getElementById('workb:14.Other');
(value == 'workb:14.Other')? b.style.display = 'block' : b.style.display = 'none';
} 
</script>
<script type="text/javascript">
function toggleField(value) {
var o = document.getElementById('discipline:28.Other');
(value == 'discipline:28.Other')? o.style.display = 'block' : o.style.display = 'none';
} 
</script>

Then I renamed the called functions within my HTML and presto! All the dropdowns are now able to un-hide the textbox, and when I select the Other field in any or all of the dropdowns I get nice textboxes that don't interfere with each other.

I could still use some help cleaning up the code or possibly streamlining it a bit. Any help would be great.

Thanks,
Orrin

 

[vacunita]

I w
ould start by removing all but one of the <script> blocks, you don't need to surround each function with a script tag, you can put them all in the same one.

<script>
function firstfunction(){
...
}

function secondfunction(){
...
}

function thirdfunction(){
...
}
...

</script>

Second I would use Parameters to define which textbox to show in a single function.
since your drop down's Other option has a value equal to the Id of the related textbox you can use that to show the textbox.

For instance:

<script>
function show_textbox(myvalue){
var a = document.getElementById(myvalue.value);
(myvalue.options[myvalue.selectedIndex].text == 'Other')? a.style.display = 'block' : 

a.style.display = 'none';

}
</script>

<select name"mydropdown1" onChange="show_textbox(this);">
<option value="one">This is first</option>
<option value="two">This is second</option>
<option value="three">This is third</option>
<option value="four">This is fourth</option>
<option value="111Other">Other</option>
</select>
<input type=text id="111Other" value="111" style="display:none;">

<hr>

<select name"mydropdown2" onChange="show_textbox(this);">
<option value="one">This is first</option>
<option value="two">This is second</option>
<option value="three">This is third</option>
<option value="four">This is fourth</option>
<option value="222Other">Other</option>
</select>
<input type=text id="222Other" value="222" style="display:none;">

<hr>

<select name"mydropdown3" onChange="show_textbox(this);">
<option value="one">This is first</option>
<option value="two">This is second</option>
<option value="three">This is third</option>
<option value="four">This is fourth</option>
<option value="333Other">Other</option>
</select>
<input type=text id="333Other" value="333" style="display:none;">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/