Select option does not get the value
<p>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.</p>

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function CheckOccupation(val){
 var element=document.getElementById('occupation');
 if(val=='Other')
   element.style.display='block';
 else  
   element.style.display='none';
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="form-control" name="occupation" onchange='CheckOccupation(this.value);'&gt;
 &lt;option&gt; Select Occupation&lt;/option&gt;
 &lt;option&gt; Lawyer &lt;/option&gt;
 &lt;option&gt; Nurse &lt;/option&gt;
 &lt;option&gt; Lawyer &lt;/option&gt;
 &lt;option&gt; Teacher &lt;/option&gt;
 &lt;option&gt; Programmer &lt;/option&gt;
 &lt;option&gt; Accountant &lt;/option&gt;
 &lt;option&gt; Other &lt;/option&gt;
&lt;/select&gt;

&lt;input type="text" name="occupation" id="occupation" class="form-control" placeholder="please specify your occupation..." style='display:none;'/&gt;</code></pre>
</div>
</div>
</p>