PHP - pass hidden value into the jquery

Question

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    $(".buttonsPromptConfirmDeleteDepartment").click(function(){
        var departmentID = $('input#departmentID').val();
        alert(departmentID);
    });
});
</script>
</head>

<body>
<?php
//db connection

$query = "SELECT * 
          FROM department 
          ORDER BY dept_ID ASC";
$result = mysqli_query($dbc, $query);
$total_department = mysqli_num_rows($result);

if($total_department > 0)
{
?>

<table width="600" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
    <tr>
      <td width="80" align="center">ID</td>
      <td width="300" align="center">Department</td>
      <td width="220" align="center">Action</td>
    </tr>   
<?php        
    while($row = mysqli_fetch_array($result))
    {
?>
      <tr>
        <td align="center"><?php echo $row['dept_ID']; ?></td>
        <td align="center"><?php echo $row['dept_name']; ?></td>
        <td>
          <button class="buttonsPromptConfirmDeleteDepartment">Delete</button>
          <input type="hidden" id="departmentID" value="<?php echo $row['dept_ID']; ?>" />    
        </td>
      </tr>
<?php
   }
?>
  </table> 
<?php
}
?>

department table
dept_ID       dept_name
1                    Account
2                    Finance
3                    Marketing

Assume that my department table only have 3 records.
My requirement is the following:
- Click 1st delete button, show department ID = 1
- Click 2nd delete button, show department ID = 2
- Click 3rd delete button, show department ID = 3

However from my code, I can't meet my requirement.
The department ID output that I get is 1 no matter what button I clicked.

Can someone help me?

You must have class instead of id in loop. With many id attributes having same value, it will always select first matched id element. — Rayon
– Rayon, Commented Feb 16, 2016 at 4:51
also ids are global and best avoided. 2ality.com/2012/08/ids-are-global.html — Swaraj Giri
– Swaraj Giri, Commented Feb 16, 2016 at 4:51

Kevin · Accepted Answer · 2016-02-16 04:53:53Z

No need to use a hidden input, you could just use the button tag instead:

<?php while($row = mysqli_fetch_array($result)) { ?>
    <tr>
        <td align="center"><?php echo $row['dept_ID']; ?></td>
        <td align="center"><?php echo $row['dept_name']; ?></td>
        <td>
            <button type="submit" name="departmentID" class="buttonsPromptConfirmDeleteDepartment" value="<?php echo $row['dept_ID']; ?>">Delete</button>
        </td>
    </tr>
<?php } ?>

Of course, in the PHP script that does the form processing, access the POST index like you normally would:

$id = $_POST['departmentID'];
// some processes next to it

Note: Don't forget the <form> tag.

Additional Note: Don't forget to use prepared statements:

$sql = 'DELETE FROM department WHERE dept_ID = ?';
$stmt = $dbc->prepare($sql);
$stmt->bind_param('i', $id);
$stmt->execute();
// some idea, use error checking when necessary
// $dbc->error

Rakesh Sojitra · Accepted Answer · 2016-02-16 04:55:05Z

0

Change

id="departmentID"

to

class="departmentID" and

Change

<script>
$(document).ready(function(){
   $(".buttonsPromptConfirmDeleteDepartment").click(function(){
    var departmentID = $('input#departmentID').val();
    alert(departmentID);
   });
});

to

 <script>
 $(document).ready(function(){
    $(".buttonsPromptConfirmDeleteDepartment").click(function(){
    var departmentID = $(this).next('input.departmentID').val();
    alert(departmentID);
 });
 });

answered Feb 16, 2016 at 4:55

Rakesh Sojitra

3,6682 gold badges19 silver badges35 bronze badges

Comments

Javid · Accepted Answer · 2016-02-16 04:57:50Z

0

first of all dept_id in while loop and you are using same id for all dept.. another thing you can get dept_id upon button click using jquery.. like this

$('.buttonsPromptConfirmDeleteDepartment').click(function(){
dept_id = $(this).next('input').val();
})

answered Feb 16, 2016 at 4:57

Javid

5121 gold badge7 silver badges27 bronze badges

Collectives™ on Stack Overflow

PHP - pass hidden value into the jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related