Listbox and open input field

JavaScript
1

I try to show or hide input field if there is reservation defined inside a listbox. How to manage this option?

<select name="options">
<option selected="selected" value="">Choose...</option>
<optgroup label="Sales">
<option value="Reservation">Reservation </option>
</optgroup>
<optgroup label="Support">
<option value="Question">Question</option>
</optgroup>
</select>

How to show an input date if reservation is selected value="Reservation?

<input type="text" id="dateID" name="date">
2

I shall provide hints, as you’ve proven in the past to at least be able to get close :wink:

the select element’s value will be equal to the chosen option’s value.
The event listener trigger for when a select box changes value is called change (yes, them javascript folks, very creative with the naming.), or inline might be listed with an onchange attribute.

What you want to do is listen for changes to the select box. If it changes to Reservation, hide your box. If it’s any other value, unhide the box. (It doesn’t hurt to ‘unhide’ something that isnt hidden.) You’ve already gotten the idea of how to hide things with javascript in your other posts.

Give it a try, let us know how you get on.

1 Like
3

I try to perform your hint.
How can be improved as it is BootstrapV3 version.

<!DOCTYPE HTML>

<html>

<head>
<title>Selected item</title>
</head>

<body>


<form name="contactform" action="http://">
<select name="options" id="listbox_option1" >
<option selected="selected" value="">Choose...</option>
<optgroup label="Sales">
<option value="Reservation">Reservation </option>
</optgroup>
<optgroup label="Support">
<option value="Question">Question</option>
</optgroup>
</select>

<input type="text" name="date" value="" class="myclass1" id="datereservation1" onclick="clickIt();"/>
</form>

<script>
Listbox1 = {
init: function() {
  var listbox = jQuery('#listbox_option1');

  jQuery('').click(function ()
   {
    myclass1.show();
   }
  );

  jQuery('').click(function ()
   {
    myclass1.hide();
   }
  );
 }
}
</script>
</body>

</html>
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.