Show/hide element div element in javascript

JavaScript
1

Im setting up part of a form to show certain info when selected from a dropdown menu to show a different div

ie table one
table two

The issue I have got is when I select option two, option one still show and I want that to hide. Ive tried a few ways to do it and none work.

so code below works but when you press option two, option one is still visible.

Hope you can help?

I know this is really simple but my mind has gone blank on this one.

Thanks

Tim

table-two


<form class="p-3">
  <div class="form-group">

  <div class="form-group">
    <select class="form-control" id="oneoffevent">
          <option value="oneoffevent">table one</option>
          <option value="weekly">table two</option>
    </select>
  </div>
  
   <div class="" id="oneoffeventDiv">
    <label for="oneoffevent">one off event info....</label></div>
  
  <div class="" id="weeklyeventDiv">
    <label for="weeklyevent">weekly info....</label></div>
</form>


   
   <script>
   $("#oneoffevent").change(function() {
  if ($(this).val() == "weekly") {
    $('#weeklyeventDiv').show();
    $('#weeklyevent').attr('required', '');
    $('#weeklyevent').attr('data-error', 'This field is required.');
  } else {
    $('#weeklyeventDiv').hide();
  }
});
$("#oneoffevent").trigger("change");

$("#oneoffevent").change(function() {
  if ($(this).val() == "weekly") {
  } else {
    $('#weeklyeventGroupDiv').hide();
  }
});
$("#oneoffevent").trigger("change");

   </script>
2

Check the selectors are correct (you do not have an element with an id weeklyeventGroupDiv).

Also not sure why you need two event handlers?

$("#oneoffevent").change(function () {
  if ($(this).val() == "weekly") {
    $("#weeklyeventDiv").show();
    $("#oneoffeventDiv").hide();
  } else if ($(this).val() == "oneoffevent") {
    $("#oneoffeventDiv").show();
    $("#weeklyeventDiv").hide();
  }
});
3

Thank you, yes I forgot about the id!!. I think I was thinking ahead and adding three or four different sections and thinking I might need to have separate handlers for it. but getting it totally wrong! thank you.

4

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