-1

I want to know how to show/hide a div depending on dropdown selection using pure Javascript - without jQuery. I have already got it working in jQuery but my client doesn't want to use jQuery so I need to know how to make it using pure Javascript.

Check this fiddle for the working jQuery version http://jsfiddle.net/gB4hk/

This is my html

<select name="b_company" id="b_company">
    <option value="0" selected="selected">Individual</option>
    <option value="1">Company</option>
</select>

<div class="control-group" id="vat" style="display:none;">
    <label class="control-label" for="vatnumber">V.A.T. Number</label>
    <div class="controls">
        <input id="s_vatnumber" type="text" name="s_vatnumber" value="" />
    </div>
</div>

and this is what used to make it work in jQuery:

$(document).ready(function () {
    $('#b_company').on('change', function () {
        if (this.value == 1) {
            $("#vat").show();
        } else {
            $("#vat").hide();
        }
    }).change();
});

I need to know how to get the same result but using pure Javascript without jQuery.

demo jQuery version : http://jsfiddle.net/gB4hk/

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Donoma Pak
  • 23
  • 5
  • 1
    _pure javascript without jquery_ Then, Why did you tagged question with jQuery? – Satpal Jul 17 '14 at 12:39
  • and you will put us to convert for you every script you have? – florin.prisecariu Jul 17 '14 at 12:41
  • 2
    http://jsfiddle.net/7M8HA/ – Satpal Jul 17 '14 at 12:43
  • @Saptal Thanks for your help, im new to javascript, this worked for me - but i have a small problem, now when user save his type for example he saved as company - if he refresh the page then the vat number is not showing, he need to select individual then select company again for it to show, is there any way to keep the vat number showing if the page refresh and the selection was company. Thanks alot for the help – Donoma Pak Jul 17 '14 at 13:04

2 Answers2

1

like this http://jsfiddle.net/gB4hk/2/

<select name="b_company" id="b_company" onchange="showHideInput(this)">
    <option value="0" selected="selected">Individual</option>
    <option value="1">Company</option>
</select>

and

function showHideInput(sel) {
    var value = sel.value;  
    if(value==0)
        document.getElementById('vat').style.display = 'none';
    if(value==1)
        document.getElementById('vat').style.display = 'block';
};
florin.prisecariu
  • 422
  • 3
  • 8
  • this code also worked for me - but i have a small problem, now when user save his type for example he saved as company - if he refresh the page then the vat number is not showing, he need to select individual then select company again for it to show, is there any way to keep the vat number showing if the page refresh and the selection was company. Thanks alot for the help – Donoma Pak Jul 17 '14 at 14:20
  • add window.onload = function () { showHideInput(document.getElementById('b_company')) } ... try it, not tested ... – florin.prisecariu Jul 17 '14 at 14:24
  • Thanks florin, but this didnt work too, any other suggestions? – Donoma Pak Jul 17 '14 at 15:05
  • what do you mean by "user save his type"? the user confirms and the save is processed ? – florin.prisecariu Jul 17 '14 at 15:11
  • yes - because im using this in a php script for user account area where he can choose if he is company or indivdual - if he select company and save and next time he come to change the vat filed is not there - he have to select individual and then select company in rder to amke it appear again – Donoma Pak Jul 17 '14 at 15:31
  • vote up for attaching the event handler on the markup – Alireza Jul 17 '14 at 19:28
  • if something is saved into DB, use php to pre-select a option from the – florin.prisecariu Jul 18 '14 at 08:48
1

As from the comments posted above

below is the working code 

 window.onload = function () {
    document.getElementById('b_company').addEventListener('change', function () {
        if (this.value == 1) {
            document.getElementById('vat').style.display = 'block';
        } else {
            document.getElementById('vat').style.display = 'none';
        }
    }, false)
};

Demo Hope this helps...

Anto king
  • 1,222
  • 1
  • 13
  • 26
  • 1
    `document.getElementById('vat').style.display = this.value ? 'block' : 'none';` to make it even shorter :) – GillesC Jul 17 '14 at 12:52
  • Also important to note that `display=block` is only good for `block` elements as not all elements have `block` as default value. This post is a good read about it http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value – GillesC Jul 17 '14 at 12:55
  • Thanks guys for your help, this worked for me - but i have a small problem, now when user save his type for example he saved as company - if he refresh the page then the vat number is not showing, he need to select individual then select company again for it to show, is there any way to keep the vat number showing if the page refresh and the selection was company. Thanks alot for the help – Donoma Pak Jul 17 '14 at 13:03