This is my third question on the subject. For reasons I won't go into, I cannot use jquery on the site I am working on. How would you suggest I translate this block of code into pure Javascript:

    <script> 
    $(document).ready(function(){
        $('#rule-type').change(function() {
           var val = $(this).val();
           if (val == 'tid and acc') {
              $('#tid-acc').show();
           }
           else {
              $('#tid-acc').hide(); 
           }
        });
    });
</script>

<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Thanks in advance! Here is a link to jfiddle: /

This is my third question on the subject. For reasons I won't go into, I cannot use jquery on the site I am working on. How would you suggest I translate this block of code into pure Javascript:

    <script> 
    $(document).ready(function(){
        $('#rule-type').change(function() {
           var val = $(this).val();
           if (val == 'tid and acc') {
              $('#tid-acc').show();
           }
           else {
              $('#tid-acc').hide(); 
           }
        });
    });
</script>

<select id="rule-type">
    <option value="" selected="selected">None</option>
    <option value="tid">tid</option>
    <option value="tid and acc">tid and acc</option>
    <option value="xid">xid</option>
</select>
<input id="tid-acc">

Thanks in advance! Here is a link to jfiddle: http://jsfiddle/Wx8Jf/2/

• javascript
• jquery
• forms
• hide

4 Answers 4

window.onload = function(){ //when the window has loaded

    //store the input in a variable
    var input = document.getElementById('tid-acc');

    //when the select changes 
    document.getElementById('rule-type').onchange = function() { 
       var val = this.value; 
       if (val == 'tid and acc') {
           input.style.display = ''; //show
       }
       else {
           input.style.display = 'none'; //hide
       }
    };
}

Fiddle: http://jsfiddle/Wx8Jf/12/

This will be quite tough - and I think the best answer would be to make sacrifices.

$('#tid-acc').show();

for example is an animation, so you'd probably be better of manipulating the CSS on the element to show/hide.

$('#rule-type').change()

According to the docs just binds and event handler to the javascript change event, so you could look this up and try substituting in.

document.ready() might also be substituted somewhat by window.onload.

I believe I've given you a few pointers there - but I am not prepared to simply do the work for you.

To prevent the object from being removed from the content flow, I'd use visibility instead of display...

http://jsfiddle/Wx8Jf/13/

window.onload = function(){
 var element = document.getElementById('tid-acc');
 document.getElementById('rule-type').onchange = function() {
   var val = this.value;
   if (val == 'tid and acc') {
       element.style.visibility = 'visible';
   }
   else {
       element.style.visibility = 'hidden';
   }
 };
}

You've got some good answers, here are some alternatives to onload.

You can have the script run as soon as the document is ready and before the load event fires if you put the script after the element it applies to. The easiest way is to put it before the closing body tag.

Another option that adds the listener as soon as the element is in the document is an inline handler, e.g.

<script type="text/javascript">

// Library functions that are reused  
function showElement(id) {
  var element = typeof id == 'string'? document.getElementById(id) : id;
  element.style.display = '';
}

function hideElement(id) {
  var element = typeof id == 'string'? document.getElementById(id) : id;
  element.style.display = 'none';
}

// Ad hoc function for this page
function ruleTypeChange(el, id) {
  el.value == 'tid and acc'?  showElement(id) : hideElement(id);
}

</script>

<!-- inline handler -->
<select id="rule-type" onchange="ruleTypeChange(this, 'tid-acc')">
  ...
</select>
<input id="tid-acc">


<!-- alternative - use a bottom script -->
<script type="text/javascript">
document.getElementById('rule-type').onchange = function() {
  ruleTypeChange(this, 'tid-acc');
};
</script>

The "bottom script" can be anywhere after the element, but usually all "onload" functions are put in a single script just before the closing body tag. This also gives the appearance of a faster loading document and is a simple methodology to implement.

In regard to inline handlers, you will often hear claims that "script should be separate from code" from those who use plex selectors to find elements, only to have them break as soon as the document structure is changed. Adding inline listeners is no more of a maintenance headache than adding a class that might be used to add a listener later, or maintain selectors that are dependent on document structure. They can be added by similar or identical server logic as would be used to add a class, id or data- attribute.

Anyhow, do what is best for you, just remember to question dogma and get the reason behind why something should be done a particular way. When you understand that, you can make your own informed choices.