Interactive HTML Form Using Javascript

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.

well @meouw just googling around.. tried some 'onChange' event based on #id.. but still not working.. still working around — php_noob
– php_noob, Commented Nov 16, 2011 at 7:59

Saeed Neamati · Accepted Answer · 2011-11-16 07:57:05Z

5

$('select[name=command]').change(function(){
    if($(this).val() == 'cancel')
    {
       $('#needreason').show();
    }
    else
    {
       $('#needreason').hide();
    }
});

answered Nov 16, 2011 at 7:57

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brock Adams · Accepted Answer · 2011-11-16 08:39:03Z

2

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>

edited Nov 16, 2011 at 8:39

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

answered Nov 16, 2011 at 7:58

Ayush

42.5k52 gold badges169 silver badges243 bronze badges

2 Comments

meouw Over a year ago

Please post your answer here. Add a fiddle if you like, but don't force me to go there

php_noob Over a year ago

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 :-)

Awais Qarni · Accepted Answer · 2011-11-16 08:06:24Z

0

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">

answered Nov 16, 2011 at 8:06

Awais Qarni

18k25 gold badges80 silver badges145 bronze badges

Collectives™ on Stack Overflow

Interactive HTML Form Using Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related