CODEWITHSUNDEEP
javascriptjquery
Rainmaker
Rainmaker

Reputation: 321

Show a text box based on the dropdown value on page load

I need to show a textbox based on the value that is selected on a dropdown menu on a pageload.

id for my dropdown menu - #inputtype id for text box is #checkboxvalues.

I am just doing the simple "if inputtype is checkbox show checkboxvalues.

It doesn't seem to work. but the on(change) function works fine. That is, if i change the drop down to something else and select "checkbox, it displays the correct text box.

Thanks for your time. 

$(document).ready(function(){
    var inputtype = $( "#inputtype" ).val();
    if (inputtype === "Checkbox"){
        $("#checkboxvalues").show();
    }
    if (inputtype != "Checkbox"){
        $("#checkboxvalues").hide();
    }
    if (inputtype != "Radio"){
        $("#radiovalues").hide();
    }
    if (inputtype != "Checkbox with Other"){
        $("#checkboxvalues").hide();
    }
    if (inputtype != "Radio with Other"){
        $("#radiovalues").hide();
    }


    $('#inputtype').on('change',function(){
        var inputtype = $( "#inputtype" ).val();
        if (inputtype === "Checkbox"){
            $("#checkboxvalues").show();
            $("#radiovalues").hide();
        } else if (inputtype === "Radio") {
            $("#radiovalues").show();
            $("#checkboxvalues").hide();
        }  else if (inputtype === "Checkbox with Other") {
            $("#checkboxvalues").show();
            $("#radiovalues").hide();
        }  else if (inputtype === "Radio with Other") {
            $("#radiovalues").show();
            $("#checkboxvalues").hide();
        } 
        else {
            $("#checkboxvalues").hide();
            $("#radiovalues").hide();
        }
    });

});

Here is the form section

                        <Li>
                            Field input type  : 
                            <select name="fieldinputtype" id="inputtype">
                                <option value="Text Box" <% if (editedsitefield.fieldinputtype == "Text Box") { %> Selected <% } %>>Text Box</option>
                                <option value="Text Area" <% if (editedsitefield.fieldinputtype == "Text Area") { %> Selected <% } %>>Text Area</option>
                                <option value="Checkbox" <% if (editedsitefield.fieldinputtype == "Checkbox") { %> Selected <% } %>>Checkbox</option>
                                <option value="Radio" <% if (editedsitefield.fieldinputtype == "Radio") { %> Selected <% } %>>Radio</option>
                                <option value="TextBox with Checkbox" <% if (editedsitefield.fieldinputtype == "TextBox with Checkbox") { %> Selected <% } %>>TextBox with Checkbox</option>
                                <option value="TextBox with Radio" <% if (editedsitefield.fieldinputtype == "TextBox with Radio") { %> Selected <% } %>>TextBox with Radio</option>
                                <option value="Checkbox with Other" <% if (editedsitefield.fieldinputtype == "Checkbox with Other") { %> Selected <% } %>>Checkbox with Other</option>                                
                                <option value="Radio with Other" <% if (editedsitefield.fieldinputtype == "Radio with Other") { %> Selected <% } %>>Radio with Other</option>                                
                            </select>
                        </Li>
                        <Li id="checkboxvalues">
                            Checkbox Values:
                            <input class="admstudyinput" type="text" name="checkboxvalues" value="<%= editedsitefield.checkboxvalues %>">
                        </Li>

Upvotes: 0

Views: 891

Answers (3)

Mexxx
Mexxx

Reputation: 61

Your code should work. Are you sure that <%= editedsitefield.checkboxvalues %> returns value that you are comparing?

Also you can optimize you code by removing repeating lines and moving them into function, something like this:

$(document).ready(function(){
    function checkInputs() {
        var inputtype = $("#inputtype").val();
        var $checkbox = $("#checkboxvalues");
        var $radio = $("#radiovalues");

        if (inputtype === "Checkbox"){
            $checkbox.show();
        }
        if (inputtype != "Checkbox"){
            $checkbox.hide();
        }
        if (inputtype != "Radio"){
            $radio.hide();
        }
        if (inputtype != "Checkbox with Other"){
            $checkbox.hide();
        }
        if (inputtype != "Radio with Other"){
            $radio.hide();
        }
    }
    checkInputs(); // calling function when document is ready

    $('#inputtype').on('change', function(){
        checkInputs(); // calling function on change event
    });

});

P.S. Try to avoid words starting with uppercase in html attributes Selected, use selected

Upvotes: 0

patstuart
patstuart

Reputation: 1988

You are hiding the textbox in your load function on this line:

if (inputtype != "Checkbox with Other"){
    $("#checkboxvalues").hide();
}

As a code review matter, you may wish to place all your logic in one function so you only call it once.

$(document).ready(function(){
    function updateInputs() {
        var inputtype = $( "#inputtype" ).val();
        $("#checkboxvalues").toggle(inputtype === "Checkbox" || inputtype === "Checkbox with Other");
        $("#radiovalues").toggle(inputtype === "Radio" || inputtype === "Radio with Other");
    }
    updateInputs();
    $('#inputtype').on('change', updateInputs);    
});

Upvotes: 1

jazeabby
jazeabby

Reputation: 80

This should work, 

var inputtype = $( "#inputtype option:selected" ).val();

Hope it helps!

And try using arrays instead of comparing each individual text, (editedsitefield.fieldinputtype == "Text Box"), i.e. Store "Text Box" like values in array, loop through it.

Upvotes: 1

Related Questions