CODEWITHSUNDEEP
javascript
CLiown
CLiown

Reputation: 13843

Javascript - Simple form script to hide/show fields

Im looking for a simple script in javascript that i can extend, at a basic level Im looking to show 1 field based on which option from a <select> the user chooses. 

<select id="options">
  <option value="spoon">Spoon</option>
  <option value="form">Fork</option>
</select>

if select=spoon {
  <input>enter your favorite soup</input>
} else {
  <input>Your gonna need a knife</input>
}

Simple JS is the key!

Upvotes: 0

Views: 3300

Answers (3)

npup
npup

Reputation: 2541

I think i posted this somewhere else on SO, but couldnt find that post now. It could be something for you to build on.
Look ma, no jQuery! (yay!)

<body>

<select id="mySelect" onchange="npup.doSelect(this);">
    <option value="">Npup says 'select'</option>
    <!-- the option values are suffixes for the elements to show -->
    <option value="0">zero</option>
    <option value="1">one</option>
    <option value="2">two</option>
</select>
<!-- container for any elements that are to be in the game -->
<div id="mySpecialElements">
    <!--  these have ids that end with an index  for easy retrieval in "findeElement" function  below-->
    <div id="npup0" class="hidden">div 0</div>
    <div id="npup1" class="hidden">div 1</div>
    <div id="npup2" class="hidden">div 2</div>
</div>

<script type="text/javascript">

window.npup = (function (containerId, baseId) {
    // save the container of your special element
    var elementsContainer = document.getElementById(containerId);
    var baseId = baseId;
    function doSelect(select) {
        // get value of select
            var idx = select.selectedIndex;
            if (idx<0) {return;}
        var value = select.options[idx].value;
        // find element based on the value of the select
        var targetDiv = findElement(value);
        if (!targetDiv) { return;} // didn't find the element, bail
        // do magic..
        hideAll(elementsContainer);
        showElement(targetDiv);
    }
    // retrieve some element based on the value submitted
    function findElement(value) {
        return document.getElementById(baseId+value);
    }
    // hide all element nodes within some parent element
    function hideAll(parent) {
        var children = parent.childNodes, child;
        // loop all the parent's children
        for (var idx=0, len = children.length; idx<len; ++idx) {
            child = children.item(idx);
            // if element node (not comment- or textnode)
            if (child.nodeType===1) {
                // hide it
                child.style.display = 'none';
            }
        }
    }
    // display a certain element
    function showElement(element) {
        element.style.display = '';
    }
    // hide all on page load (might want some extra logic here)
    hideAll(elementsContainer);

    // export api to use from select element's onchange or so
    return {
        doSelect: doSelect
    };
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements


</script>

</body>

Upvotes: 1

BalusC
BalusC

Reputation: 1108712

You can make use of the onchange attribute of the <select> element to execute some Javascript code on every change of the dropdown.

<select onchange="myFunction(this)">

(you see that I passed the dropdown element itself as method argument, this is just done for convenience)

You can use the element.options to get all options and element.selectedIndex to get the index of the currently selected option. 

function myFunction(dropdown) {
    var selectedOption = dropdown.options[dropdown.selectedIndex].value;
}

You can use document.getElementById() to retrieve any element by id. Imagine that you've the following input elements:

<input type="text" id="foo">
<input type="text" id="bar">

then you can get them as follows:

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');

You can use the element.style.display to change the CSS display property. A value of block means show and a value of none means hide. Now do the math:

function myFunction(dropdown) {
    var selectedOption = dropdown.options[dropdown.selectedIndex].value;
    var foo = document.getElementById('foo');
    var bar = document.getElementById('bar');

    if (selectedOption == 'spoon') {
        foo.style.display = 'none'; // Hide foo.
        bar.style.display = 'block'; // Show bar.
    } else {
        foo.style.display = 'block'; // Show foo.
        bar.style.display = 'none'; // Hide bar.
    }
}

To learn more about Javascript and HTML DOM, I recommend this tutorial.

Upvotes: 0

vsync
vsync

Reputation: 130155

Something like this? it's called Chained Selects

Upvotes: 0

Related Questions