Select option does not get the value

Question

I have a dropdown list of, for instance occupations, and when the user clicks the option "Other" , a textbox will show up and the user will have to specify his occupation. The part where the user chooses "Other" and input his occupation works, it saves what he input, but when the user is going to just choose or select from the dropdown list, the value is not being recorded when I submit the form.

How will get the value from the select option? Because I only get the value when the user select "Other" and input his occupation. Here's my code.

function CheckOccupation(val){
 var element=document.getElementById('occupation');
 if(val=='Other')
   element.style.display='block';
 else  
   element.style.display='none';
}

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
 <option> Select Occupation</option>
 <option> Lawyer </option>
 <option> Nurse </option>
 <option> Lawyer </option>
 <option> Teacher </option>
 <option> Programmer </option>
 <option> Accountant </option>
 <option> Other </option>
</select>

<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

`option` elements at `html` at Question do not have `value` attribute set? — guest271314, Apr 25 '16 at 14:25
By the way, you are using the same name for two elements. It's better to change them — Mojtaba, Apr 25 '16 at 14:30
Here you may find answer your question: [enter link description here](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Husni Salax, Apr 25 '16 at 14:33
change different input name between two elements select or text — user5200704, Apr 25 '16 at 14:42

score 0 · Answer 1 · answered Apr 25 '16 at 14:24

The contents of the <option> element aren't automatically their value. You have to specify a value attribute.

function CheckOccupation(val){
 var element=document.getElementById('occupation');
 if(val=='Other')
   element.style.display='block';
 else  
   element.style.display='none';
}

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
 <option> Select Occupation</option>
 <option> Lawyer </option>
 <option> Nurse </option>
 <option> Lawyer </option>
 <option> Teacher </option>
 <option> Programmer </option>
 <option> Accountant </option>
 <option value="Other"> Other </option>
</select>

<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

You still have to include the input's value in your form submit. You can't give it the same `name` attribute. — user3297291, Apr 25 '16 at 14:31

score 0 · Answer 2 · answered Apr 25 '16 at 14:24

I think you might need to specify some value within the option tag. Try this:

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
 <option value="select"> Select Occupation</option>
 <option value="lawyer"> Lawyer </option>
 <option value="nurse"> Nurse </option>
 <option value="lawyer"> Lawyer </option>
 <option value="teacher"> Teacher </option>
 <option value="programmer"> Programmer </option>
 <option value="accountant"> Accountant </option>
 <option> Other </option>
</select>

I've done it before too, but it still didn't solve my problem. — James, Apr 25 '16 at 14:25

score 0 · Answer 3 · answered Apr 25 '16 at 14:26

You have set the name="occupation" for both the fields. Try using different names for both .

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>

<input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

score 0 · Accepted Answer · answered Apr 25 '16 at 14:27

Set a value attribute for your option fields and also provide different name for both the fields

JS

function CheckOccupation(val){
 var element=document.getElementById('occupation');
 if(val==='Other')
   element.style.display='block';
 else  
   element.style.display='none';
}

HTML

<select class="form-control" name="occupation1" onchange='CheckOccupation(this.value);'>
    <option> Select Occupation</option>
    <option value="Lawyer"> Lawyer </option>
    <option value="Nurse"> Nurse </option>
    <option value="Lawyer"> Lawyer </option>
    <option value="Teacher"> Teacher </option>
    <option value="Programmer"> Programmer </option>
    <option value="Accountant"> Accountant </option>
    <option value="Other"> Other </option>
</select>

<input type="text" name="occupation2" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

score 0 · Answer 5 · edited Nov 19 '21 at 13:00

See this. I've created a Plunker for you: Plunker link

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
      <option value="select"> Select Occupation</option>
      <option value="lawyer"> Lawyer </option>
      <option value="nurse"> Nurse </option>
      <option value="lawyer"> Lawyer </option>
      <option value="teacher"> Teacher </option>
      <option value="programmer"> Programmer </option>
      <option value="accountant"> Accountant </option>
      <option value="other"> Other </option>
    </select>

    <input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/>

    <script>
      function CheckOccupation(val) {
        console.log(val);
         var element=document.getElementById('occupation');
         if(val=='other')
             document.getElementById('occupation').style.display='block';
           else  
             document.getElementById('occupation').style.display='none';
      }
    </script>

  </body>
</html>

Try not to use var element.

Marin N. · Answer 6 · 2016-04-25T14:42:24.137

This should work:

function CheckOccupation(selectedType){
  if (selectedType == 'Other'){
  document.getElementById('occupation').style.display = 'block';
  
 } else{
  document.getElementById('occupation').style.display = 'none';
   
 }
}

<select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'>
 <option> Select Occupation</option>
 <option value="Lawyer"> Lawyer </option>
 <option value="Nurse"> Nurse </option>
 <option value="Teacher"> Teacher </option>
 <option value="Programmer"> Programmer </option>
 <option value="Accountant"> Accountant </option>
 <option value="Other"> Other </option>
</select>

<input type="text" name="occupation_other" id="occupation" class="form-control" placeholder="please specify" style='display:none;'/>

score 0 · Answer 7 · answered Apr 25 '16 at 14:39

0

the problem is that you named select (occupation) and then named input (occupation)

they couldn't be sent by same name , try to change any one of them

answered Apr 25 '16 at 14:39

Mohammed Elhag

4,272
1
10
18

Thank you for submitting an answer, my problem is solved. I hope I can rate everyone who gave a correct response, but my privilege is limited. – James Apr 25 '16 at 14:52

guest271314 · Answer 8 · 2016-04-25T14:51:58.497

Try substituting event for this.value as parameter passed to CheckOccupation ; including value attribute at option elements; changing name value at #occupation to "other" ; also removing duplicate <option> having .innerHTML "Lawyer"

<script>
  function CheckOccupation(event) {
    var val = event.target.value;
    var element = document.getElementById("occupation");
    if (val == "Other")
      element.style.display = "block";
    else
      element.style.display = "none";
    console.log(val)
  }
</script>

<select class="form-control" name="occupation" onchange='CheckOccupation(event);'>
  <option>Select Occupation</option>
  <option value="Lawyer">Lawyer</option>
  <option value="Nurse">Nurse</option>
  <option value="Teacher">Teacher</option>
  <option value="Programmer">Programmer</option>
  <option value="Accountant">Accountant</option>
  <option value="Other">Other</option>
</select>

<input type="text" name="other" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;' />

Select option does not get the value

8 Answers8