Add select option if previous date input has certain value

Question

I have a form with a date input field. After the date field, there is a select dropdown, in which you can choose a time. I would like to add some select drop-down options if the date is set to a certain day of the week.

This is my form:

The HTML code from a little part of the form:

 <div class="col_half travel-date-group nnvo"> <label for="datum">Datum <small>*</small></label> <input type="text" id="datum" name="datum" class="sm-form-control tleft disabled-week today" placeholder="DD-MM-JJJJ"> </div> <div class="col_half col_last nnvo"> <label for="tijdstip">Tijdstip <small>*</small></label> <select id="tijdstip" name="tijdstip" class="sm-form-control" style="height: 40px;"> <option value="">-- Kies een tijd --</option> <option value="10:00">10:00</option> <option value="10:30">10:30</option> <option value="11:00">11:00</option> <option value="11:30">11:30</option> <option value="12:00">12:00</option> <option value="12:30">12:30</option> <option value="13:00">13:00</option> <option value="13:30">13:30</option> <option value="14:00">14:00</option> <option value="14:30">14:30</option> <option value="15:00">15:00</option> <option value="15:30">15:30</option> <option value="16:00">16:00</option> <option value="16:30">16:30</option> <option value="17:00">17:00</option> <option value="17:30">17:30</option> </select> </div> 

I think I should use AJAX to get the value from the 'datum' field, and then add an option to the 'tijdstip' input. But I have no idea how to achieve this.

EDIT: I now have this code, which now adds an option with the value 'Test' if I select 18-09-2018. But then if I select another date, it does not remove this value.

  function changeTimeOptions(){ dateInputValue = document.getElementById('datum').value; if (dateInputValue == "18-09-2018") { var x = document.getElementById("tijdstip"); var option = document.createElement("option"); option.text = "Test"; x.add(option); } } 

I did try the following, but without any luck:

 else if (dateInputValue ==! "18-09-2018") { x.remove(option); } 

Answer 1

You can make ajax call to the html page after listing to the onchange event or onkeypress event. If the required date is set. Make an ajax request to gather data for the select tag.

Answer 2

I think javascript-only will work:

In the date-input add onchange="changeTimeOptions()" https://www.w3schools.com/jsref/event_onchange.asp

the script can read the date input:

dateInputValue = getElementById('datum').value

denpending on that value you can change Select-Tag:

x = document.getElementById('IdOfTimeInput');
x.remove(1); ' Index

or

x.add("12:30"); 

https://www.w3schools.com/jsref/met_select_remove.asp https://www.w3schools.com/jsref/met_select_add.asp

---

EDIT:

See the code below. Its not testet. The Problem in your code is, that in the else-case x is not defined (you defined it in the if-clause). Also 'option' is not defined. You have to loop through all inside your and compare the text. If match, remove the option.

try this:

function changeTimeOptions(){
      dateInputValue = document.getElementById('datum').value;
      var x = document.getElementById("tijdstip");

      if (dateInputValue == "18-09-2018") {
          var option = document.createElement("option");
          option.text = "Test";
          x.add(option);
      } else if (dateInputValue ==! "18-09-2018") {
            for (var i=0; i<x.length; i++){
                 if (x.options[i].text == 'Test' ){
                      x.remove(i);
                      i--; //You killed one option, so the length of x is one less
                 }   
            }   
      }
}

maybe change x.options[i].text to x.options[i].innerHTML.