PHP and Javascript issue. Function return always the last value

Question

I searched this website and couldn't find an answer. I have a php page that display a dropdown list with 2 choices. When on change, a Javascript execute a function that opens a php page to update my database, sending the ID and another parameter with the URL. The problem is the ID value is always the same (the last of the list). Can you help me please, I am very new in PHP and Javascript. Thank you in advance. Here is the PHP code and the javascript:

 <?php
 $AvailabilityCondition = "1=1";
 
 if ((isset($_POST["availabilityChoice"])) &&  ($_POST["availabilityChoice"] !== "All")){
 $AvailabilityCondition = "rented = "."'".$_POST["availabilityChoice"]."'"; 
 }
    
   
$rentalquery = "SELECT * FROM rentals WHERE $AvailabilityCondition ORDER BY region_name, rental_name";

    
 
if ($rentalresult = $link->query($rentalquery)) {
    /* fetch associative array */
    while ($rowrentals = $rentalresult->fetch_assoc()) {
  $NumberOfResults = $rentalresult->num_rows;
 
?>

 
 
 
 

<!-- ************************* This display a table with a short rental description (Region name - Rental name)
****************************** with and EDIT link, a DELETE link and an AVAILABILITY selector. ******************* -->
<div align="center">
<table >
 <tr >
     <td width="300" >
  <?php echo ($rowrentals["region_name"]).' - '.($rowrentals["rental_name"]).'<br/>'; ?> 
  </td>
  <td width="50">
  <a href="rental-mod.php?id=<?php echo ($rowrentals["id"]) ?>">EDIT</a>
  </td>
  <td width="100" align="right">
   
  <!-- *********** This form display the actual availability state. On change, it updates the database **************** --> 
  <form name="updateAvailability" method=POST" class="form-horizontal" >
   
   <select  onChange="showSelected(this.value)"  id ="availabilityChoice" name="availabilityChoice" style="width: auto">
  
   <option value="No" <?php if (($rowrentals["rented"]) == "No") echo 'selected="selected"' ?>>Available</option>
  
   <option value="Yes" <?php if (($rowrentals["rented"]) == "Yes") echo 'selected="selected"' ?>>Rented</option>
   </select> <?php echo ($rowrentals["id"]) ?>
  
  </form>
   
<script type="text/javascript">
 function showSelected(val){
  document.getElementById ('availabilityChoice').innerHTML = val;
  window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals["id"]) ?>");
 }
</script> 



  <!-- **************************************************************************************************************** -->
  </td>
  <td>
  <a href="rental-delete.php?id=<?php echo ($rowrentals["id"])?>" onclick="return confirm('Are you sure? This CAN NOT be undone!')">!!! DELETE !!!</a>
  </td>
 </tr>
</table>
</div> 

        
 <?php 
 }} 

    
    
    /* free result set */
    $rentalresult->free();

/* close connection */
$link->close();
 ?> 
 
<br/><br/>
<div align="center">
 <a href="index.php"><b>Back to Managers Main Menu</b></a>
 </div>

</body>

I just posted more of my PHP page. So you can see the query and the WHILE, where $rowrentals["id"] is coming from.

Here is also a screen capture of how the page looks like: screen capture

I echoed the $rowrentals["id"] under each availability dropdown. But whatever row I chose to change the availability, it always pass Id=9, the last one. That is what confuses me.

Before the screen capture, all five rows where "Available". Then I selected "Rented" on the first row. The page updated and since Id always =9, you can see the last row "Rented".

The Javascript is working to retrieve the value of the selected item. Because it opens this page perfectly: status-update.php?rented=Yes&Id=9 But again, Id is always 9...

If i understand your question correctly you need to check the selected value not the value see this example var optionSelected = $("option:selected", this); VS var valueSelected = this.value;` — Puya Sarmidani, Nov 21 '18 at 19:42
As Puya described you need to get the value of the selected option. See this SO article: https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — J. Schmale, Nov 21 '18 at 19:51
Can you at least clarify where the problem exactly is? If there is some problem reading out a selected item in the browser, the problem is in no way related to PHP. If the markup is not generated properly, the problem is in no way related to JS — Nico Haase, Nov 21 '18 at 19:51
Why are you doing `document.getElementById ('availabilityChoice').innerHTML = val;`? Why are you trying to replace the inner HTML of the select element with its value? — Alon Eitan, Nov 21 '18 at 19:57
Can you show us how/where the `$rowrentals["id"]` variable is set in you php file? — Rolvernew, Nov 21 '18 at 20:02
The Javascript is working to retrieve the value of the selected item. My problem is the value of Id. I updated my post to show where $rowrentals["id"] is coming from. — Joshua Stokes, Nov 22 '18 at 01:58

score 0 · Answer 1 · answered Nov 21 '18 at 19:53

0

Try with this:

<script type="text/javascript">
function showSelected(val){
    document.getElementById ('availabilityChoice').innerHTML = val;
    window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals['id']) ?>");
}

If showSelected javascript function inside a foreach/while loop you need to extract it from loop and send id+value at the same time to showSelected function.

answered Nov 21 '18 at 19:53

Erdem Medre

41
2

I tried to replace the double quotes with single quotes like you suggested. But it doesn't change a thing. Like you said my problem is to extract the value from the loop and I do not know how. – Joshua Stokes Nov 22 '18 at 02:33

score 0 · Answer 2 · answered Nov 22 '18 at 05:52

Thank you everybody. I found my answer. I added a counter, so this create a different function name for each database Id.

Here is the code:

$rentalquery = "SELECT * FROM rentals WHERE $AvailabilityCondition ORDER BY region_name, rental_name";
$counter =0; 
if ($rentalresult = $link->query($rentalquery)) {
    /* fetch associative array */
    while ($rowrentals = $rentalresult->fetch_assoc()) {
  $NumberOfResults = $rentalresult->num_rows;
 $counter = $counter+1;
?>

 
<!-- ************************* This display a table with a short rental description (Region name - Rental name)
****************************** with and EDIT link, a DELETE link and an AVAILABILITY selector. ******************* -->
<div align="center">
<table >
 <tr >
     <td width="300" >
  <?php echo ($rowrentals["region_name"]).' - '.($rowrentals["rental_name"]).'<br/>'; ?> 
  </td>
  <td width="50">
  <a href="rental-mod.php?id=<?php echo ($rowrentals["id"]) ?>">EDIT</a>
  </td>
  <td width="100" align="right">
   
  <!-- *********** This form display the actual availability state. On change, it updates the database **************** --> 
  <form name="updateAvailability<?php echo $counter ?>" method=POST" class="form-horizontal" >
   
   <select  onChange="showSelected<?php echo $counter ;?>(this.value)"  id ="availabilityChoice<?php echo $counter ?>" name="availabilityChoice<?php echo $counter ?>" style="width: auto">
  
   <option value="No" <?php if (($rowrentals["rented"]) == "No") echo 'selected="selected"' ?>>Available</option>
  
   <option value="Yes" <?php if (($rowrentals["rented"]) == "Yes") echo 'selected="selected"' ?>>Rented</option>
   </select>
  
  </form>
   
<script type="text/javascript">
 function showSelected<?php echo $counter ;?>(val){
  document.getElementById ('availabilityChoice<?php echo $counter ;?>').innerHTML = val;
  window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals["id"]) ?>");
 }
</script>

PHP and Javascript issue. Function return always the last value

2 Answers2