'Getting values from dropdown

I am writing a code to do a room booking system. I creating a function to modify the booking. My outline for this feature is as follows:

student clicks on modify button -> a pop up with cascading dropdown appears -> student selects options from the dropdown and clicks confirm -> alert pops up to tell students modification is successful -> html table is updated with the new value from the popup

so far i got the cascading dropdown all done up and the html table displaying all the booking datas. I am stuck at the part where the values from the dropdown is transferred to the html table.

I have attmepted with selectedIndex on one of option, but it did not reflect on my html table.

Appreciate any help, still new at this thank you ;;

here is my code so far

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>View booking page</title>
    <link rel="stylesheet" href="style.css">
    <script src="scripts.js" async defer></script>
</head>

<body>
    <table boarder="1" style="width: 100%;">
        <thead>
            <tr>
                <td>Date</td>
                <td>Room type</td>
                <td>Timeslot</td>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr id="row1">
                <td id="date_row1">2022-05-10</td>
                <td id="roomtype_row1">101</td>
                <td id="time_row1">09:00 - 10:00</td>
                <td><button id="modify_button1" class="modify" 
onclick="showModal()">Modify</button></td>
            </tr>
        </tbody>
        

        <!--Modal content-->
        <div class="modal" id="modal">
            <form>
                    Date: <select name="date" id="date">
                    <option value="" selected="selected">Select 
date</option>
                    </select>
                    <br><br>
                    Room type: <select name="room" id="room">
                    <option value="" selected="selected">Please 
select date 
first</option>
                    </select>
                    <br><br>
                    Timeslot: <select name="time" id="time">
                    <option value="" selected="selected">Please 
select room type 
first</option>
                </select>
                <br></br>
                <div>
                <button value="cancel">Cancel</button>
                <button id="confirmBtn" 
value="default">Confirm</button>
                </div>
            </form>
            </form>
        </div>

    </table>
    
    
</body>
</html>

var roomobject = {
"May 9, Monday":{
    "Room 101":["10am - 11am","11am - 12pm","12pm - 1pm"],
    "Room 102":["1pm - 2pm","2pm - 3pm","3pm - 4pm"],
    "Room 103":["4pm - 5pm", "5pm - 6pm", "6pm - 7pm"],
},
"May 10, Tuesday":{
    "Room 101":["10am - 11am","11am - 12pm","12pm - 1pm"],
    "Room 102":["1pm - 2pm","2pm - 3pm","3pm - 4pm"],
    "Room 103":["4pm - 5pm", "5pm - 6pm", "6pm - 7pm"],
},
"May 11, Wednesday":{
    "Room 101":["10am - 11am","11am - 12pm","12pm - 1pm"],
    "Room 102":["1pm - 2pm","2pm - 3pm","3pm - 4pm"],
    "Room 103":["4pm - 5pm", "5pm - 6pm", "6pm - 7pm"],
},
"May 12, Thursday":{
    "Room 101":["10am - 11am","11am - 12pm","12pm - 1pm"],
    "Room 102":["1pm - 2pm","2pm - 3pm","3pm - 4pm"],
    "Room 103":["4pm - 5pm", "5pm - 6pm", "6pm - 7pm"],
},
"May 13, Friday":{
    "Room 101":["10am - 11am","11am - 12pm","12pm - 1pm"],
    "Room 102":["1pm - 2pm","2pm - 3pm","3pm - 4pm"],
    "Room 103":["4pm - 5pm", "5pm - 6pm", "6pm - 7pm"],
},
}
window.onload = function() {
var dateSel = document.getElementById("date");
var roomSel = document.getElementById("room");
var timeSel = document.getElementById("time");
for (var x in roomobject) {
    dateSel.options[dateSel.options.length] = new Option(x, x);
}
dateSel.onchange = function() {
      timeSel.length = 1;
      roomSel.length = 1;
  for (var y in roomobject[this.value]) {
    roomSel.options[roomSel.options.length] = new Option(y, y);
  }
}
roomSel.onchange = function() {
      timeSel.length = 1;
  var z = roomobject[dateSel.value][this.value];
  for (var i = 0; i < z.length; i++) {
    timeSel.options[timeSel.options.length] = new Option(z[i], 
z[i]);
  }
}
}

function showModal(){
document.getElementById("modal").style.display = "block";
}
function closeModal(){
document.getElementById("modal").style.display = "none";
}
function modify(){
var tbody = document.getElementById("tbody");
var date = document.getElementById("date");
var room = document.getElementById("room");
var time = document.getElementById("time");

window.onload = function() {
    var dateSel = document.getElementById("date");
    var roomSel = document.getElementById("room");
    var timeSel = document.getElementById("time");
    
    for (var x in roomobject) {
        dateSel.options[dateSel.options.length] = new Option(x, 
x);
    }
    dateSel.onchange = function() {
      timeSel.length = 1;
      roomSel.length = 1;
      for (var y in roomobject[this.value]) {
        roomSel.options[roomSel.options.length] = new Option(y, 
 y);
      }
    }
    roomSel.onchange = function() {
      timeSel.length = 1;
      var z = roomobject[dateSel.value][this.value];
      for (var i = 0; i < z.length; i++) {
        timeSel.options[timeSel.options.length] = new 
Option(z[i], 
  z[i]);
      }
    }
  }

var rowdata = '<tr>' + '<td>' + 
date.options[date.selectedIndex].value + '</td>' + '<td>' + 
room.value + '</td>' 
            + '<td>' + time.value + '</td>' + '</tr>';
tbody.innerHTML = rowdata;

alert("Booking has been modified successdully");
date.value ='';
room.value ='';
time.value='';
closeModal();
}
javascripthtmlmodal-dialog


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions