编辑后未更新php ajax下拉列表

Question

I am new to php and AJAX, I recently assigned to develop leave management system. I struck with a small issue, I fetched data from mysql and displayed in a table format, in that one field is designed as dropdown list , So for i received data and displayed perfectly, now my problem is, i want to select the value from dropdown list and when i click button ,it should update it in the database. My code is

display_record.php

 function save_row(leave_ID) { var hods=document.getElementById("hods_val"+leave_ID).value; $.ajax ({ type:'post', url:'modify_records.php', data:{ edit_row:'save_row', row_id:leave_ID, hods_val:hods }, success:function(response) { if(response=="success") { document.getElementById("hods_val"+leave_ID).innerHTML=hods; document.getElementById("edit_button"+leave_ID).style.display="block"; document.getElementById("save_button"+leave_ID).style.display="none"; } } }); } 

 $host="localhost"; $username="root"; $password=""; $databasename="hrdb"; $con=mysqli_connect($host,$username,$password); $db=mysqli_select_db($con,$databasename); $select =mysqli_query($con,"SELECT * FROM leavedb"); ?> <table align="center" cellpadding="10" border="1" id="user_table" class="data-table"> <caption class="title">Leave Requested by staff Members</caption> <tr> <th>Emp ID</th> <th>Emp name</th> <th>Leave Token</th> <th>Leave Type</th> <th>Applied Date</th> <th>Leave From</th> <th>Leave To</th> <th>Req.Days</th> <th>Reason</th> <th>Available credit</th> <th>HOD Status</th> <th>Status</th> </tr> <?php while ($row=mysqli_fetch_array($select)) { ?> <tr id="row<?php echo $row['leave_ID'];?>"> <td id="eid_val<?php echo $row['leave_ID'];?>"><?php echo $row['emp_ID'];?></td> <td id="empn_val<?php echo $row['leave_ID'];?>"><?php echo $row['emp_ID'];?></td> <td id="lid_val<?php echo $row['leave_ID'];?>"><?php echo $row['leave_ID'];?></td> <td id="lt_val<?php echo $row['leave_ID'];?>"><?php echo $row['leave_type'];?></td> <td id="dor_val<?php echo $row['leave_ID'];?>"><?php echo $row['date_of_request'];?></td> <td id="df_val<?php echo $row['leave_ID'];?>"><?php echo $row['date_from'];?></td> <td id="dt_val<?php echo $row['leave_ID'];?>"><?php echo $row['date_to'];?></td> <td id="rd_val<?php echo $row['leave_ID'];?>"><?php echo $row['req_days'];?></td> <td id="rs_val<?php echo $row['leave_ID'];?>"><?php echo $row['reason'];?></td> <td id="ad_val<?php echo $row['leave_ID'];?>"><?php echo $row['available_days'];?></td> <td id="hods_val<?php echo $row['leave_ID'];?>"> <select id="hods_val" name="hods_val"class="aaa"> <option value="Approved">Approved</option> <option value="NotApproved">not Approved</option> <option value="MeetMe">Meet Me</option> <option value="hods1" selected><?php echo $row['hod_status'];?></option> </select> </td> <td> <input type='button' class="edit_button" id="edit_button<?php echo $row['leave_ID'];?>" value="edit" onclick="edit_row('<?php echo $row['leave_ID'];?>');"> <input type='button' name="submitt"class="save_button" id="save_button<?php echo $row['leave_ID'];?>" value="Execute" onclick="save_row('<?php echo $row['leave_ID'];?>');"> </td> </tr> <?php } ?> </table> modify_records.php <?php $host="localhost"; $username="root"; $password=""; $databasename="hrdb"; $connect=mysqli_connect($host,$username,$password); $db=mysqli_select_db($connect,$databasename); if(isset($_POST['edit_row'])) $row=$_POST['row_id']; $hods111=$_POST['hods_val']; if( mysqli_query($connect,"update leavedb set hod_status='$hods111' where leave_ID='$row'");) { echo '<script language="javascript">'; echo 'alert("Successfully approved")'; echo '</script>'; } echo "success"; exit(); } ?> 

Answer 1

you are not allowed to use more than 1 the same id in the dom.

so instead of this:

<select id="hods_val" name="hods_val"class="aaa">

give your select a unique id:

<select id="select_hods_val<?php echo $row['leave_ID'];?>" name="hods_val"class="aaa">

after this you will be able to select the dropdown as follows:

document.getElementById("select_hods_val"+leave_ID)...