Asked
Viewed11 times
Hi I am trying to make a modify booking page but the save button in my table is not working, there is not output. Originally i used text input (save was still working) but changed to drop down then the save button stopped working. Please help me take a look.
I have uploaded the code. Thank you.
document.getElementById("levels-list1" + no).value = stime_data;
}
}
function save_row(no) {
var date_val = document.getElementById("date_text" + no).value;
var roomtype_val = document.getElementById("roomtype_text" + no).value;
var stime_val = document.getElementById("stime_text" + no).value;
document.getElementById("date_row" + no).innerHTML = date_val;
document.getElementById("roomtype_row" + no).innerHTML = roomtype_val;
document.getElementById("stime_row" + no).innerHTML = stime_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
alert("Booking has been succesfully modified.");
}
<h1 id="middle">View your bookings</h1>
<span style="position:fixed ;left: 1350px; top: 155px;">Logout</span>
<span style="position:fixed ;left: 675px;top: 155px;"><a href="https://stackoverflow.com/questions/72251816/home page.html">Homepage</a></span>
<div id="wrapper">
<table align='left' style="background-color:#001641; padding-right: 750px; padding-top: 0px; padding-bottom: 400px;">
<tr>
<td>
<table align='left' cellspacing=20px cellpadding=10px id="data_table" border=5 " style="width:200% " rules="all ">
<tr>
<th >Date</th>
<th>Room type</th>
<th>Time</th>
<th></th>
<th></th>
</tr>
<tr id="row1 ">
<td id="date_row1 ">2022-05-10</td>
<td id="roomtype_row1 ">101</td>
<td id="stime_row1 ">09:00</td>
<td>
<input type="button " id="edit_button1 " value="Modify booking " class="edit " onclick="edit_row( '1') ">
<input type="button " id="save_button1 " value="Save " class="save " onclick="save_row( '1') " hidden>
</td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '1') ">
</td>
</tr>
<tr id="row2 ">
<td id="date_row2 ">2022-05-09</td>
<td id="roomtype_row2 ">102</td>
<td id="stime_row2 ">13:00</td>
<td>
<input type="button " id="edit_button2 " value="Modify booking " class="edit " onclick="edit_row( '2') ">
<input type="button " id="save_button2 " value="Save " class="save " onclick="save_row( '2') " hidden>
</td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '2') ">
</td>
</tr>
<tr id="row3 ">
<td id="date_row3 ">2022-05-11</td>
<td id="roomtype_row3 ">101</td>
<td id="stime_row3 ">10:00</td>
<td>
<input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '3') ">
<input type="button " id="save_button3 " value="Save " class="save " onclick="save_row( '3') " hidden>
</td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '3') ">
</td>
</tr>
<tr id="row4 ">
<td id="date_row4 ">2022-05-11</td>
<td id="roomtype_row4 ">103</td>
<td id="stime_row4 ">16:00</td>
<td>
<input type="button " id="edit_button3 " value="Modify booking " class="edit " onclick="edit_row( '4') ">
<input type="button " id="save_button3 " value="Save " class="save " onclick="save_row( '4') " hidden>
</td><td><input type="button " value="Delete booking " class="delete " onclick="delete_row( '4') ">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
JS
function edit_row(no)
{
document.getElementById("edit_button "+no).style.display="none ";
document.getElementById("save_button "+no).style.display="block ";
var date=document.getElementById("date_row "+no);
var roomtype=document.getElementById("roomtype_row "+no);
var stime=document.getElementById("stime_row "+no);
var date_data=date.innerHTML;
var roomtype_data=roomtype.innerHTML;
var stime_data=stime.innerHTML;
date.innerHTML="<input type="date" min='2022-05-09' max='2022-05-13' id='date_text"+no+"' value=""+date_data+"">"; roomtype.innerHTML='
<select id="levels-list'+no+'">
<option value="A" id="option-1">101</option>
<option value="B" id="option-2">102</option>
<option value="C" id="option-3">103</option>
</select>'; document.getElementById("levels-list"+no).value = roomtype_data; roomtype.onchange = function(){ stime.innerHTML='
<select id="levels-list1'+no+'">
<option value="A1" id="option-11">101</option>
<option value="B1" id="option-22">102</option>
<option value="C1" id="option-33">103</option>
</select>';
1
default