Passing PHP variable to JavaScript function in a table

Question

I am trying to pass a variable from a table that was populated by a PHP query.

On each row of the table there are three buttons. One is a delete button that if clicked it will run a JavaScript alert which passes a variable to another PHP page where it is deleted from the database. The problem is when the button is clicked the variable passed is always the variable from the last row of the table. Not the row being clicked.

The code:

<table class="table table-bordered table-striped js-dataTable-full-pagination">
<?php while($row = mysqli_fetch_assoc($result)) { ?>
    <tr>
        <td class="text-center"><a href="/record.php?report=<?php echo $row['recordnumber']; ?>"><?php echo $row['recordnumber']; ?></a></td>
        <td class="font-w600"><?php echo $row["description"];?></td>
        <td class="hidden-xs"><?php echo $row["type"];?></td>
        <td class="hidden-xs"><?php echo $row["user"];?></td>
        <td class="hidden-xs"><?php echo $row["edate"];?></td>
        <td class="text-center">
            <a class="btn btn-xs btn-primary" href="/updaterecordform.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="Edit Record"><i class="fa fa-pencil"></i></a>
            <a class="btn btn-xs btn-danger" onclick="myFunction()" data-toggle="tooltip" title="Delete Prefix"><i class="fa fa-close"></i><script>
                function myFunction() {
                  swal({
                      title: 'Are you sure?',
                      text: 'You will not be able to recover this Record!',
                      type: 'warning',
                      showCancelButton: true,
                      confirmButtonColor: '#d26a5c',
                      confirmButtonText: 'Yes, delete it!',
                      closeOnConfirm: false,
                      html: false
                  }, function () {
                      window.location.href = 'deleterecord.php?id=<?php echo $row['recordnumber']; ?>'
                  });
                }
                </script></a>
            <a class="btn btn-xs btn-primary" href="/record.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="View Details"><i class="fa fa-list-ul"></i></a>
        </td>
    </tr>
<?php } ?>
</table>

If you use jQuery you can populate a data field and use that on your button to trigger a special link. That's usually a lot easier to manage than to write a script per button. — tadman
– tadman, Commented Jul 5, 2016 at 18:24
onclick="myFunction(<?php echo $row["recordnumber"];?>)" get tha value in function and set js itself function myFunction(recordnum) { — mujuonly
– mujuonly, Commented Jul 5, 2016 at 18:32
Edit: Your question was already well formed because it explained your problem well, but I removed a number of irrelevant lines. — PaulH
– PaulH, Commented Jul 5, 2016 at 18:57

PaulH · Accepted Answer · 2016-07-05 18:49:52Z

The while($row = mysqli_fetch_assoc($result)) loop declares the javascript function myFunction a number of times, all with the same name. Like this

<?php while($row = mysqli_fetch_assoc($result)) { ?>
    <script>
    function myFunction() {} // this function name is repeated in the while loop
    <script>
<?php } ?>

Functions cannot have the same name. The simplest solution is to use different names.

<td class="text-center">
    <a class="btn btn-xs btn-primary" href="/updaterecordform.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="Edit Record"><i class="fa fa-pencil"></i></a>
    <a 
        class="btn btn-xs btn-danger" 
        onclick="myFunction<?php echo $row["recordnumber"];?>()" // <-- edited line
        data-toggle="tooltip" title="Delete Prefix"
    >
    <i class="fa fa-close"></i>
        <script>
            function myFunction<?php echo $row["recordnumber"];?>() { // <-- edited line
              swal({
                  title: 'Are you sure?',
                  text: 'You will not be able to recover this Record!',
                  type: 'warning',
                  showCancelButton: true,
                  confirmButtonColor: '#d26a5c',
                  confirmButtonText: 'Yes, delete it!',
                  closeOnConfirm: false,
                  html: false
              }, function () {
                  window.location.href = 'deleterecord.php?id=<?php echo $row['recordnumber']; ?>'
              });
            }
        </script></a>
    <a class="btn btn-xs btn-primary" href="/record.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="View Details"><i class="fa fa-list-ul"></i></a>
</td>

A better and also simple solution is to use recordnumber as function parameter

<td class="text-center">
    <a class="btn btn-xs btn-primary" href="/updaterecordform.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="Edit Record"><i class="fa fa-pencil"></i></a>
    <a 
        class="btn btn-xs btn-danger" 
        onclick="myFunction(<?php echo $row["recordnumber"];?>)" 
        data-toggle="tooltip" title="Delete Prefix"
    >
    <i class="fa fa-close"></i>
    <a class="btn btn-xs btn-primary" href="/record.php?id=<?php echo $row["recordnumber"];?>" data-toggle="tooltip" title="View Details"><i class="fa fa-list-ul"></i></a>
</td>

Where you put the javascript function outside the while loop so that it is not repeated

<script>
function myFunction(recordnumber) {
  swal({
      title: 'Are you sure?',
      text: 'You will not be able to recover this Record!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d26a5c',
      confirmButtonText: 'Yes, delete it!',
      closeOnConfirm: false,
      html: false
  }, function () {
      window.location.href = 'deleterecord.php?id=recordnumber';
  });
}
</script></a>

barden · Accepted Answer · 2016-07-05 18:41:17Z

0

The answer is simple, you call you function myFunction() for ALL elements of your table.

Then when you call myFunction() which one must be executed ? Javascript decide to execute the last one.

You must refactor this code by using data-id on each element and call just ONE function that use this id.

answered Jul 5, 2016 at 18:41

barden

3897 silver badges21 bronze badges

Collectives™ on Stack Overflow

Passing PHP variable to JavaScript function in a table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related