Html Question posted in
Some basic documentation can be found here.

Html – Edit(a tag) in every row sql PHP

I have table in which every row has an edit button in the last column that when clicked, a dialog pops up. My problem is the first row is the only one working and the rest of the row dont.

This is my php file

<!-- FORM TO REGISTER -->
                          
<?php include("add-form.php"); ?>
<?php include("update-form.php"); ?>

<!-- END OF FORM -->

<tbody id="showdata">
    <?php           
        $query = "SELECT tbl_members.MemberID, tbl_members.LastName, tbl_members.FirstName, tbl_members.Gender, tbl_plans.PlanName, tbl_membership.StartDate, tbl_membership.EndDate, tbl_members.JoinDate, tbl_members.Email, tbl_members.PhoneNumber 
                    FROM tbl_members 
                    JOIN tbl_membership ON tbl_members.MemberID = tbl_membership.MemberID 
                    JOIN tbl_plans ON tbl_plans.PlanID = tbl_membership.PlanID;";
        $result = mysqli_query($con, $query);

        while($row = mysqli_fetch_assoc($result))
        {
            echo "<tr>";
            echo "<td>".$row['MemberID']."</td>";
            echo "<td>".$row['LastName']."</td>";
            echo "<td>".$row['FirstName']."</td>";
            echo "<td>".$row['Gender']."</td>";
            echo "<td>".$row['PlanName']."</td>";
            echo "<td>".$row['StartDate']."</td>";
            echo "<td>".$row['EndDate']."</td>";
            echo "<td>".$row['JoinDate']."</td>";

            echo "<td class='crudButton'>".

                    "<a class='click open-updateModal' data-id='".$row['MemberID']."'> 
                        <span class='material-icons-sharp'>
                        edit
                        </span>".                                       
                    "</a>".

                    "<a class='click open-deleteModal'>".
                        "<span class='material-icons-sharp'>delete</span>".
                    "</a>".

                 "</td>";
                 
            echo "</tr>";
        }                                    
    ?>              
</tbody>            

<?php 

    if(isset($_POST['update_submit'])){
        $id = isset($_GET['MemberID']);
        $fName = $_POST['firstname'];
        $lName = $_POST['lastname'];
        $gender = $_POST['gender'];
        $birthDate = $_POST['birthdate'];
        $address = $_POST['address'];
        $phone = $_POST['phone'];
        
        $edit_query = mysqli_query($con,"UPDATE tbl_members SET FirstName='$fName', LastName='$lName', Gender ='$gender', DateOfBirth = '$birthDate', Address = '$address', PhoneNumber = '$phone' WHERE MemberID='$id';") or die("error occurred");

        if($edit_query){
            echo "<meta http-equiv='refresh' content='0'>";
        }
    }

    else{
    ?>    
        <dialog class="update-modal" id="modal">
        <div class="modal-form" method="dialog">
            <div class="head">
                <span class="material-icons-sharp">
                    edit
                </span>
                <h1> EDIT INFO </h1>
            </div>
                                    
            <form method="post">
                <div class="fillup-form">                               
                    <div class="block-1">
                        <label for="">First Name:</label><br>
                        <input type="text" name="firstname" value="" required><br><br>
                        <label for="">Last Name:</label><br>
                        <input type="text" name="lastname" value="" required><br><br>
                        <label for="">Date Of Birth:</label><br>
                        <input type="date" name="birthdate" value="" required><br><br>
                        <label for="">Gender:</label><br>
                        <input type="text" name="gender" value="" required><br><br>
                        <label for="">Address:</label><br>
                        <input type="text" name="address" value="" required><br><br>
                        <label for="">Phone Number:</label><br>
                        <input type="text" name="phone" value="" required><br><br>
                                
                    </div>

                </div>
                                                            
                <div class="buttons">
                    <button class="click close-updateModal">Cancel</button>
                    <button class="click submit-updateModal" name="update_submit">Submit</button>  
                </div>                                
            </form>

    </div>                                                  
</dialog>

<?php
    }
?>

What I want is for it to work(edit) every row.

This is my javascript for modal popup using dialog.

//update dialog
const modal2 = document.querySelector('.update-modal');
const open_updateModal = document.querySelector('.open-updateModal');
const close_updateModal = document.querySelector('.close-updateModal');

open_updateModal.addEventListener('click', () => {
    modal2.showModal();

})

close_updateModal.addEventListener('click', () => {
    modal2.close();

})
Tags:

2

Answers


  1. 0

    The id

    Change

    $id = isset($_GET['MemberID']);

    to

    $id = intval($_GET['MemberID'] ?? 0);

    Explanation: You are checking whether you received a MemberID as a GET parameter and you assign this truth-value to $id. Instead, you will need to set the id to the actual value, defaulting to something invalid (0, for example).

    Further defaults

    You have these:

            $fName = $_POST['firstname'];
        $lName = $_POST['lastname'];
        $gender = $_POST['gender'];
        $birthDate = $_POST['birthdate'];
        $address = $_POST['address'];
        $phone = $_POST['phone'];

    You should default these values as well for the case when some parameter is not received.

    Prevent SQL injection

    You have

    $edit_query = mysqli_query($con,"UPDATE tbl_members SET FirstName='$fName', LastName='$lName', Gender ='$gender', DateOfBirth = '$birthDate', Address = '$address', PhoneNumber = '$phone' WHERE MemberID='$id';") or die("error occurred");

    which is highly unsafe, even if you pass the correct id. A user might pass malicious code in some of the user inputs and then your query will execute that malicious code. Parameterize the query via PDO or mysqli or the way of your choice.

    Example for SQL injection:

    Query:

    "select email from users where username ='" . $username . "'";

    The user passes ‘;delete from users where ”=’ as username so your command ends up being

    select email from users where username ='';delete from users where ''=''

    This can be done to your query as well, one of the parameter might receive some malicious SQL script, which, when injected as a raw parameter without escaping into your query will wreak havoc.

    XSS injection

    You have

            while($row = mysqli_fetch_assoc($result))
        {
            echo "<tr>";
            echo "<td>".$row['MemberID']."</td>";
            echo "<td>".$row['LastName']."</td>";
            echo "<td>".$row['FirstName']."</td>";
            echo "<td>".$row['Gender']."</td>";
            echo "<td>".$row['PlanName']."</td>";
            echo "<td>".$row['StartDate']."</td>";
            echo "<td>".$row['EndDate']."</td>";
            echo "<td>".$row['JoinDate']."</td>";

            echo "<td class='crudButton'>".

                    "<a class='click open-updateModal' data-id='".$row['MemberID']."'> 
                        <span class='material-icons-sharp'>
                        edit
                        </span>".                                       
                    "</a>".

                    "<a class='click open-deleteModal'>".
                        "<span class='material-icons-sharp'>delete</span>".
                    "</a>".

                 "</td>";
                 
            echo "</tr>";
        }

    But this is highly unsafe, because these values may contain malicious HTML code, like a Javascript script which will end up causing harm, like stealing your cookie or something of the like. You could do something like this:

            while($row = filter_var_array(mysqli_fetch_assoc($result), FILTER_SANITIZE_SPECIAL_CHARS))
        {
            echo "<tr>";
            echo "<td>".$row['MemberID']."</td>";
            echo "<td>".$row['LastName']."</td>";
            echo "<td>".$row['FirstName']."</td>";
            echo "<td>".$row['Gender']."</td>";
            echo "<td>".$row['PlanName']."</td>";
            echo "<td>".$row['StartDate']."</td>";
            echo "<td>".$row['EndDate']."</td>";
            echo "<td>".$row['JoinDate']."</td>";

            echo "<td class='crudButton'>".

                    "<a class='click open-updateModal' data-id='".$row['MemberID']."'> 
                        <span class='material-icons-sharp'>
                        edit
                        </span>".                                       
                    "</a>".

                    "<a class='click open-deleteModal'>".
                        "<span class='material-icons-sharp'>delete</span>".
                    "</a>".

                 "</td>";
                 
            echo "</tr>";
        }

    Notice the function call inside the while condition.

    Individual vs. plural selectors in Javascript

    You have this code:

    //update dialog
const modal2 = document.querySelector('.update-modal');
const open_updateModal = document.querySelector('.open-updateModal');
const close_updateModal = document.querySelector('.close-updateModal');

open_updateModal.addEventListener('click', () => {
    modal2.showModal();

})

close_updateModal.addEventListener('click', () => {
    modal2.close();

})

    In the code above, for open_updateModal you search for the first match in the HTML, which happens to be your very first button. Instead, you need to find all the buttons, loop them and add the event handler to them:

    //update dialog
const modal2 = document.querySelector('.update-modal');
const open_updateModals = document.querySelectorAll('.open-updateModal');
const close_updateModal = document.querySelector('.close-updateModal');

for (let open_updateModal of open_updateModals) {
    open_updateModal.addEventListener('click', () => {
        modal2.showModal();
    });
}

close_updateModal.addEventListener('click', () => {
    modal2.close();

})

    Note that I’m loading the plurality of items via querySelectorAll instead of querySelector and I store the results into open_updateModals, which is then looped using an iterator called open_updateModal and the event is being added to each matching element.

    Login or Signup to reply.
  2. 0

    You just need to delegate and navigate relative to the button

    document.getElementById('showdata').addEventListener('click', (e) => {
  const tgt = e.target.closest('.click'); // the a
  if (!tgt) return; // not a modal link
  if (tgt.matches('.open-updateModal')) {
    const id = tgt.dataset.id
    console.log('update', id)
  } else {
    console.log('delete')
    tgt.closest('tr').remove()
  }

})
    <table>
  <tbody id="showdata">
    <tr>
      <td class="crudButton">
        <a class='click open-updateModal' data-id="id1">
          <span class='material-icons-sharp'>edit</span>
        </a>
        <a class="click open-deleteModal">
          <span class="material-icons-sharp">delete</span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="crudButton">
        <a class='click open-updateModal' data-id="id2">
          <span class='material-icons-sharp'>edit</span>
        </a>
        <a class="click open-deleteModal">
          <span class="material-icons-sharp">delete</span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="crudButton">
        <a class='click open-updateModal' data-id="id3">
          <span class='material-icons-sharp'>edit</span>
        </a>
        <a class="click open-deleteModal">
          <span class="material-icons-sharp">delete</span>
        </a>
      </td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search