javascript hide/show function is not working

Question

This is the basic html page

    <div class="col-lg-10">
   <div class="form-group">
       <select class="form-control" id="">
           <option value="" hidden>Select Venue Type</option>
           <option onclick="myFunction()">Theme Restaurant</option>
           <option onclick="myFunction()">Blah restaurant</option>
           <option onclick="myFunction()">Flana Restaurant</option>
           <option onclick="myFunction()">Woops Restaurant</option>
            </select>
            </div>
   <div class="form-group">
  <div class="venue-type" id="restaurant-form">
  <div class="row">
 <div class="col-md-5" id="bsc-edit">
 <div class="form-group">
 <label for="city">Venue Name<sup class = "venue-imp">*</sup>
 </label>
   <input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
  </div>
  </div>
<div class="col-md-1"></div>
<div class="col-md-5">
  <div class="form-group">
  <label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
  <input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
</div>
</div>
<div class="col-md-1"></div>
 </div>
 </div>
 </div>
  </div>

i want my dropdown list to show a form when clicked and i have tried using javascript function here, but it is not working the form is showing as it is and nothing is working with onclick. Help me to do it as the form is not being shown when clicked but it is shown directly

this is the javascript code;

<script>
    function myFunction() {
    var x = document.getElementById("restaurant-form");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

i want the form to open when a particular dropdown item is selected — juhi, Jan 09 '18 at 06:48
with change event handler on odd item form is showing and on even it is not showing — juhi, Jan 09 '18 at 06:51

gurvinder372 · Answer 1 · 2018-01-09T07:14:44.670

onclick is not supported on option tag, You need to add event listener to the select instead

document.querySelector( "select[id]" ).addEventListener( "change", myFunction );

In the myFunction method you can show/hide form based on which option is selected.

function myFunction(event) 
{
  var selection = event.target.selectedIndex;
  var x = document.getElementById("restaurant-form");
  x.style.display = selection >= 1 ? "block" : "none";
}

Demo

function myFunction(event) 
{
  var selection = event.target.selectedIndex;
  var x = document.getElementById("restaurant-form");
  x.style.display = selection >= 1 ? "block" : "none";
}

document.querySelector( "select[id]" ).addEventListener( "change", myFunction );

<div class="col-lg-10">
  <div class="form-group">
    <select class="form-control" id="" >
           <option value="">Select Venue Type</option>
           <option>Theme Restaurant</option>
           <option>Blah restaurant</option>
           <option>Flana Restaurant</option>
           <option>Woops Restaurant</option>
     </select>
  </div>
  <div class="form-group">
    <div class="venue-type" id="restaurant-form">
      <div class="row">
        <div class="col-md-5" id="bsc-edit">
          <div class="form-group">
            <label for="city">Venue Name<sup class = "venue-imp">*</sup>
 </label>
            <input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
          </div>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-5">
          <div class="form-group">
            <label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
            <input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>
</div>

with this the form is showing but the drop down hides completely — juhi, Jan 09 '18 at 06:55
@juhi You need to implement hide/show of form based upon your requirement - which you didn't specified in your original question. You need to give it a try and create a new question for new problem. — gurvinder372, Jan 09 '18 at 06:58
i used this now the problem is when i select the by default value i want the form to hide what to use for that the default value is "Select Venue" which was earlier hidden but i changed it — juhi, Jan 09 '18 at 07:13

A.D. · Answer 2 · 2018-01-09T07:00:46.810

0

Yes as per @gurvder372 you can't use onclick for option.You can also use an inline event assignment for this Like:

 <select class="form-control" id="" onchange="javascript:return myFunction(event);">
           <option value="" hidden>Select Venue Type</option>
           <option>Theme Restaurant</option>
           <option>Blah restaurant</option>
           <option>Flana Restaurant</option>
           <option>Woops Restaurant</option>
</select>
<script>
function myFunction(event) 
{
  var index_opt = event.target.selectedIndex;
  if ( index_opt > 0 ) 
  {
    var x = document.getElementById("restaurant-form");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
}
</script>

edited Jan 09 '18 at 07:00

answered Jan 09 '18 at 06:54

A.D.

2,352
2
15
25

Same problem of odd and even is happening with this too – juhi Jan 09 '18 at 06:57
what you want exactly to *show* for on change event of option on a specific option this form is showed – A.D. Jan 09 '18 at 07:05
if want to show on change of select than you simply use `x.style.display = "block";` without if condition. – A.D. Jan 09 '18 at 07:09
Like: `function myFunction(event) { var index_opt = event.target.selectedIndex; var x = document.getElementById("restaurant-form"); if ( index_opt > 0 ) { x.style.display = "block"; } else { x.style.display = "none"; } }` – A.D. Jan 09 '18 at 07:10

javascript hide/show function is not working

2 Answers2