CODEWITHSUNDEEP
javascriptjquery
Doran L
Doran L

Reputation: 299

Hide or Show div based on option selection

I'm trying to show or hide the div based on the option selected. When Customer is selected, it should show retCustDetails and when Trade is selected it should show tradeCustDetails.

Please let me know what I'm missing on the codes below.

<h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change()">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

            <div id="retCustDetails" class="custDetails">
                Forename <input type="text" name="forename" id="forename" />
                Surname <input type="text" name="surname" id="surname" />
            </div>
            <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>

JS

function change(obj) {

    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var retCustDetails = document.getElementById("retCustDetails");
    var tradeCustDetails = document.getElementById("tradeCustDetails");

    if(selected === '1'){
        retCustDetails.style.display = "block";
        tradeCustDetails.style.display = "none";
    }
    else{
        retCustDetails.style.display = "none";
        tradeCustDetails.style.display = "block";
    }
}

Upvotes: 0

Views: 437

Answers (4)

DpEN
DpEN

Reputation: 4364

This is an alternative method. This too works. Cheers !

<script>
jQuery(function($) {
    $('#show').change(function(){
        var val = $(this).val();
        if( val == 'ret') {
            $('#retCustDetails').show();
            $('#tradeCustDetails').hide();
        } else if(val == 'trd') {
            $('#tradeCustDetails').show();
            $('#retCustDetails').hide();
        } else {
            $('#tradeCustDetails').hide();
            $('#retCustDetails').hide();
        }
    }); 
});
</script>

<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
</select>

<div id="retCustDetails" class="custDetails" style="display:none">
    Forename <input type="text" name="forename" id="forename" />
    Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
    Company Name <input type="text" name="companyName" id="companyName" />
</div>

Upvotes: 1

balachandar
balachandar

Reputation: 825

pass the this as argument to the change() method. Also change the if condition as like below

if(selected === 'ret'){
//...
}

because you get the selected value, it give either "ret" or "trd"

Change the tradeCustDetails visibility: hidden to display: none Try this code.

  function change(obj) {
    //alert(obj);
    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var retCustDetails = document.getElementById("retCustDetails");
    var tradeCustDetails = document.getElementById("tradeCustDetails");
    if(selected === 'ret'){
        retCustDetails.style.display = "block";
        tradeCustDetails.style.display = "none";
    }
    else{
        retCustDetails.style.display = "none";
        tradeCustDetails.style.display = "block";
    }
}
<h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

            <div id="retCustDetails" class="custDetails">
                Forename <input type="text" name="forename" id="forename" />
                Surname <input type="text" name="surname" id="surname" />
            </div>
            <div id="tradeCustDetails" class="custDetails" style="display:none">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>

Hope this will help you.

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You are using visibility:hidden in your html but in your js your are changing the display property. Change visibility:hidden to display:none.

Use this as change funtion's parameter like onchange="change(this)"

And JS function change to following.

function change(obj) {

    var selectBox = obj.value; 
    var retCustDetails = document.getElementById('retCustDetails');
    var tradeCustDetails = document.getElementById('tradeCustDetails');

    if(selectBox == 'ret'){
       retCustDetails.style.display = "block";
       tradeCustDetails.style.display = "none";
    }
    else{
       retCustDetails.style.display = "none";
       tradeCustDetails.style.display = "block";
    }
}

Upvotes: 1

Murli
Murli

Reputation: 1258

There were few minor mistakes in your code, I have corrected it to make it work -

<body>
<h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

            <div id="retCustDetails" class="custDetails" style="display:none">
                Forename <input type="text" name="forename" id="forename" />
                Surname <input type="text" name="surname" id="surname" />
            </div>
            <div id="tradeCustDetails" class="custDetails" style="display:none">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>
<script>

function change(obj) {

    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var retCustDetails = document.getElementById("retCustDetails");
    var tradeCustDetails = document.getElementById("tradeCustDetails");

    if(selected == 'ret'){
        retCustDetails.style.display = "block";
        tradeCustDetails.style.display = "none";
    }
    else{
        retCustDetails.style.display = "none";
        tradeCustDetails.style.display = "block";
    }
}
</script>
			
			</body>

Upvotes: 4

Related Questions