Question

How can I make interactive HTML form, example :

<select name="command">
    <option value="send">Send</option>
    <option value="cancel">Cancel</option>
</select>

<!-- 
    I want the following text input hidden by default,
    but active only if option "Cancel" is selected
-->
<input type="text" name="cancel_reason" id="needreason">

I want the “cancel_reason” input field is hidden by default, and shown if dropdown-option “Cancel” is selected before, otherwise it should remain hidden.

Answer 1

Have a look at this jsFiddle. Non jQuery

<select id="command" name="command" onchange="javascript:selectChanged()">
    <option value="send">Send</option>
    <option value="cancel">Cancel</option>
</select>

<!-- 
    I want the following text input hidden by default,
    but active only if option "Cancel" is selected
-->
<input type="text" id="needreason" name="cancel_reason" style="display:none">

<script>
    function selectChanged()
    {
        if (document.getElementById('command').value == "cancel")
            document.getElementById('needreason').style.display = 'block';
        else
            document.getElementById('needreason').style.display = 'none';
    }
</script>