-2

I have a modal containing a textboxes and a table containing some values i want to open the modal and set the values in the textbox from the table so far only the first row is working in setting the values. Any help would be realy great

Here is my code

<?Php
            
include_once './php/connection.php';

$count = 0;

$sql = "SELECT ID, Name, Profile FROM tbl_employee";

$result = $conn->query($sql);
echo "<table id='employee'>";
echo "<tr>";
echo "<th></th>";
echo "<th>Name</th>";
echo "<th>Profile</th>";
echo "</tr>";
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $count++;
        

        echo "<tr>";
        echo "<td><img src='./profiles/".$row['Profile']."' alt='' style='width: 60px; height: 80px;'></td>";
        echo "<td><span id='firstname'>".$row['Name']."</td>";
        echo "<td>**********</td>";
        echo "<td><a href=\"./php/edit.php?id=".$row['ID']."\">Jobs</a></td>";
        echo "<td><button type='button' class='btn btn-success edit' value='".$row['ID']."' data-toggle='modal' data-target='#myModal'><span class='glyphicon glyphicon-edit'></span> Edit</button></td>";
        echo "<td><a href=\"./php/delete.php?id=".$row['ID']."\" >Delete</a></td>";
        echo "</tr>";

        }
    } else {
}
echo "<h3>(".$count.")</h3>"

?>

Modal Code

<!-- Modal -->

        <button type='button' class='close' data-dismiss='modal'>&times;</button>
        <h4 class='modal-title' id='header'>Edit Employee Details</h4>
        </div>
        <div class='modal-body'>

        <form method="POST" action="./php/editjob.php">
            <div class="container-fluid">
                <div class="form-group input-group">
                 <span class="input-group-addon" style="width:150px;">Name:</span>
                 <input type="text" style="width:350px;" class="form-control" id="efirstname" name="efirstname" readonly  >
                </div>    
             </div>
             <div class="container-fluid">
                <div class="form-group input-group">
                 <span class="input-group-addon" style="width:150px;">New Title:</span>
                 <input type="text" style="width:350px;" class="form-control" id="qfirstname" name="qfirstname">
                </div>    
            </div>
        
    </div>

    <div class="modal-footer">
    <button type="submit" value="submit" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> </i> Update</button>
</form>
    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="ClearFields();">Close</button>
    </div>
  </div>
  
</div>

and the javascript here

$(document).ready(function(){
  $(document).on('click', '.edit', function(){
    var first= $('#firstname').text();// get firstname
    $('#efirstname').val(first);
    $('#qfirstname').val(first);
  });
});
mplungjan
  • 155,085
  • 27
  • 166
  • 222
Rey Chabby Estrera
  • 1
  • 1
  • 2
    This question get posted here all the time. The first problem is that you're not supposed to have multiple elements with the same `id`. `$('#firstname')` will always return the first row's and not magically the one inside the row of the button you clicked. You have to actually determine the correct span based on the button (using jQuery's .closest() and .find()) – ChrisG Jun 01 '22 at 20:04
  • this is not a PHP question either. Please click [edit] then `[<>]` snippet editor and provide a [mcve] using HTML, CSS and script only - no php – mplungjan Jun 01 '22 at 20:05
  • When you have php spitting out your row data you can use `$count` or some other incrementing variable to dynamically create unique id's for the elements. May be more elaborate than needed but you can even enter it in a row/column format `id=c1r1` etc... – Lucretius Jun 01 '22 at 20:08
  • Change id="firstname" to class="firstname" `$(document).on('click', '.edit', function(){ const first = $(this).closest("tr").find('.firstname').text(); $('#efirstname').val(first); $('#qfirstname').val(first); });` – mplungjan Jun 01 '22 at 20:09
  • @Lucretius Not recommended nor necessary. See my comment – mplungjan Jun 01 '22 at 20:09
  • Unrelated issues but 1. `$count` is not needed, `$result->num_rows` would have your count. 2. You only need an `echo` once, every line does not need an `echo`. – user3783243 Jun 01 '22 at 20:10
  • 1
    @user3783243 `$(this).closest("tr")` is from were it looks. Not the whole document - we use `$(this)` here, i.e. the edit button – mplungjan Jun 01 '22 at 20:11

0 Answers0