CODEWITHSUNDEEP
javascriptphpmysql
Jaymar
Jaymar

Reputation: 3

Javascript problem in catching data on looping

I try to loop multiple values from a database and every time I click a specific item on the menu, Javascript only catches the first value that comes up in the database even if the function is inside the loop, Even I click the last item, the first item still displays... How to fix? Here is my code. (The display of the result is on top, I didn't include it)

<?php
    $res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
        while($rows = mysqli_fetch_array($res)){
            $f_id = $rows['Menu_id'];
            $fname = $rows['Food_name'];
            $fprice = $rows['Price'];                      
?>

    <div class="col-12 helv menu rounded">
    <ul class="nav navbar-nav navbar-expand-md">
      <li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
      <li class="nav-item marginleft">
          <br>
          <input id="foodname" value="<?php echo $fname;?>" style="display: none;"><h5><b><?php echo $fname;?></b></h1></input><br>
          <input id="foodprice" value="<?php echo $fprice;?>" style="display: none;"><h5>Php <?php echo $fprice;?>.00</h1></input>
      </li>
      <li class="nav-item" style="position: absolute; margin-left: 90%">
        <button class="fa fa-plus btn btn-danger" onclick="add()"> Add</button>
      </li>
    </ul>
    <br>
    </div>

<script>
      function add() {
          var fdname = document.getElementById("foodname").value;
          var fdprice = document.getElementById("foodprice").value;
          document.getElementById("display").innerHTML = fdname;
          document.getElementById("display1").innerHTML = fdprice;
      }
  </script> 

<?php } ?>

Upvotes: 0

Views: 56

Answers (3)

Mihai Zinculescu
Mihai Zinculescu

Reputation: 389

There are some more mistakes.

1) IDs are unique

Please check this https://stackoverflow.com/a/12889416/3742228

2) Duplicate JS function

Every loop you make, you create another JS function named "add". If you create 3 functions named "add", which function do you want to call when you code add()? :)

For your code there are more solutions, but it depends on what exactly you want to do. Take a look at this:

<?php
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
    while($rows = mysqli_fetch_array($res)){
        $f_id = $rows['Menu_id'];
        $fname = $rows['Food_name'];
        $fprice = $rows['Price'];                      
?>

<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
  <li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
  <li class="nav-item marginleft">
      something here
  </li>
  <li class="nav-item" style="position: absolute; margin-left: 90%">
    <button class="fa fa-plus btn btn-danger" foodName="<?php echo $fname;?>" foodPrice="<?php echo $fprice;?>" onclick="add(this)"> Add</button>
  </li>
</ul>
<br>
</div>


<?php } ?>
  <script>
  function add(e) {
      var fdname = e.getAttribute("foodName");
      var fdprice = e.getAttribute("foodPrice");
      document.getElementById("display").innerHTML = fdname;
      document.getElementById("display1").innerHTML = fdprice;
  }
  </script>

Upvotes: 0

laruiss
laruiss

Reputation: 3816

<?php
  // As Jeto said, you should use prepared statement
  $res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
    while($rows = mysqli_fetch_array($res)){
      $f_id = $rows['Menu_id'];
      $fname = $rows['Food_name'];
      $fprice = $rows['Price'];                      
?>
  <div class="col-12 helv menu rounded">
  <ul class="nav navbar-nav navbar-expand-md">
    <li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
    <li class="nav-item marginleft">
        <br>
        <input class="foodname" value="<?php echo $fname;?>" style="display: none;"><h5><b><?php echo $fname;?></b></h1></input><br>
        <input class="foodprice" value="<?php echo $fprice;?>" style="display: none;"><h5>Php <?php echo $fprice;?>.00</h1></input>
    </li>
    <li class="nav-item" style="position: absolute; margin-left: 90%">
      <button class="fa fa-plus btn btn-danger" onclick="add('<?php echo $fname;?>', <?php echo $fprice;?>)"> Add</button>
    </li>
  </ul>
  <br>
  </div>
<?php } ?>

<script>
  function add(fdname, fdprice) {
      document.getElementById("display").innerHTML = fdname;
      document.getElementById("display1").innerHTML = fdprice;
  }
</script>

Upvotes: 1

Manuraj Sebastian
Manuraj Sebastian

Reputation: 84

First get count of how many items are in there before the while query

$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));

$count_of_items = mysqli_num_rows($res);

Then run the while query, then Run a for loop inside the form as per the number of Items

for($x=0;$x<count($count_of_items); $x++){
<input id="foodname" value="<?php echo $fname[$x];?>" style="display: none;"><h5><b><?php echo $fname[$x];?></b></h1></input><br>
      <input id="foodprice" value="<?php echo $fprice[$x];?>" style="display: none;"><h5>Php <?php echo $fprice[$x];?>.00</h1></input>
}

Upvotes: 0

Related Questions