current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite
1

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.

share|improve this question
    
well @meouw just googling around.. tried some 'onChange' event based on #id.. but still not working.. still working around – php_noob Nov 16 '11 at 7:59
up vote 2 down vote accepted

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>
share|improve this answer
1  
Please post your answer here. Add a fiddle if you like, but don't force me to go there – meouw Nov 16 '11 at 8:02
    
just great @xbonez except for double id's there.. i changed one of the 'id' to 'name' and adjust the 'getElementById' to the latest 'id'.. works like a charm.. thanks a lot :-) – php_noob Nov 16 '11 at 8:17
up vote 5 down vote 
$('select[name=command]').change(function(){
    if($(this).val() == 'cancel')
    {
       $('#needreason').show();
    }
    else
    {
       $('#needreason').hide();
    }
});
share|improve this answer
    
above code is correct – Sumair Zafar Nov 16 '11 at 8:00
    
above code is jQuery – Skippy le Grand Gourou Apr 30 at 12:21
up vote 0 down vote

Use this javascript function

function show_text_box(value)
{
  if(value=='cancel')
  {
    $('#needreason').show();
  }
  else
  {
    $('#needreason').hide();
  }
}

Call this function on your select at onchange event

<select name="command" onchange="show_text_box(this.value);">

and set text box hide

<input style="display:none;" type="text" name="cancel_reason" id="needreason">
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.