Javascript - onchange within <option>

I have a relatively simple form which asks a variety of questions. One of those questions is answered via a Select Box. What I would like to do is if the person selects a particular option, they are prompted for more information.

With the help of a few online tutorials, I've managed to get the Javascript to display a hidden div just fine. My problem is I can't seem to localise the event to the Option tag, only the Select tag which is no use really.

At the moment the code looks like (code simplified to aid clarity!):

<select id="transfer_reason" name="transfer_reason onChange="javascript:showDiv('otherdetail');">
<option value="x">Reason 1</option>
<option value="y">Reason 2</option>
<option value="other">Other Reason</option>
</select>

<div id="otherdetail" style="display: none;">More Detail Here Please</div>

What I would like is if they choose "Other Reason" it then displays the div. Not sure how I achieve this if onChange can't be used with the Option tag!

Any assistance much appreciated :)

Note: Complete beginner when it comes to Javascript, I apologise if this is stupidly simple to achieve!

Answers:

Answer

Setup the onchange event handler for the select box to look at the currently selected index. If the selected index is that of the 'Other Reason' option, then display the message; otherwise, hide the division.

 <html>
 <head>
  <script type="text/javascript">
    window.onload = function() {
        var eSelect = document.getElementById('transfer_reason');
        var optOtherReason = document.getElementById('otherdetail');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 2) {
                optOtherReason.style.display = 'block';
            } else {
                optOtherReason.style.display = 'none';
            }
        }
    }
  </script>
 </head>
 <body>
    <select id="transfer_reason" name="transfer_reason">
        <option value="x">Reason 1</option>
        <option value="y">Reason 2</option>
        <option value="other">Other Reason</option>
    </select>
    <div id="otherdetail" style="display: none;">More Detail Here Please</div>
</body>
</html>

Personally, I'd take it a step further and move the JavaScript into an external file and just include it in the header of the page; however, for all intents and purposes, this should help answer your question.

Answer

After reading Tom's great response, I realised that if I ever added other options to my form it would break. In my example this is quite likely, because the options can be added/deleted using a php admin panel.

I did a little reading and altered it ever so slightly so that rather than using selectedIndex it uses value instead.

<script type="text/javascript">
window.onload = function() {
    var eSelect = document.getElementById('transfer_reason');
    var optOtherReason = document.getElementById('otherdetail');
    eSelect.onchange = function() {
        if(eSelect.value === "Other") {
            optOtherReason.style.display = 'block';
        } else {
            optOtherReason.style.display = 'none';
        }
     }
  }
  </script>

Hope this helps someone else in the future!

Answer

Tom's answer is elegant, and neatly puts the JS away from the HTML markup. As mentioned, it could be even moved to an external file. However it adds quite much "nonsense" to the code, like multiple anonymous function assignments etc.

If you want quick solution, you can put it all in the onchange() inside the select tag as well. Pick the one you see more fit.

<select id="transfer_reason" name="transfer_reason" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';">
    <option value="x">Reason 1</option>
    <option value="y">Reason 2</option>
    <option value="other">Other Reason</option>
</select>
<div id="otherdetail" style="display: none;">More Detail Here Please</div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.