0

I have a table which has data values in my database

<?php
try {
    $pdo = new PDO('mysql:host=localhost:3306;dbname=insulation;', 'root', 'admin');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $pdo->prepare(" SELECT * from tbl_assessment WHERE employeeName = :employeeName");
    $flag = $stmt->execute();
    if (!$flag) {
        $info = $stmt->errorInfo();
        exit($info[2]);
    }
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        @$tbody1.= '<tr>';
        $tbody1.= '<input type="hidden" id="id' . $row["id"] . '" value="' . $row["id"] . '"/> ';
        $tbody1.= '<input type="hidden" id="emp_name' . $row["id"] . '" value="' . $_SESSION['emp_name'] . '"/> ';
        $tbody1.= '<input type="hidden" id="teamCode' . $row["id"] . '" value="' . $_SESSION['teamCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sectionCode' . $row["id"] . '" value="' . $_SESSION['sectionCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sample"/>';
        $tbody1.= '<section="editable" contenteditable="false">';
        //$tbody1 .='<td style="height:30px" id="id" class="id" nowrap >'.$row["id"].'</td>';
        $tbody1.= '<td style="height:30px;font-weight:bold;" id="date" class="date" >' . $row["date"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="staff' . $row["id"] . '">' . $row["staffName"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="findings' . $row["id"] . '">' . $row["findings"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="action' . $row["id"] . '">' . $row["action"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="accomplished' . $row["id"] . '">' . $row["date_accomplished"] . '</td>';
        @$tbody1.= '</section>';
        $tbody1.= '<td><button class="btn btn-warning px-3" id="btnEdit" style="color:black;font-weight:bold;" title="Edit"><i class="fas fa-edit" aria-hidden="true"></i></button><button class="btn btn-danger px-3" id="btnDelete" style="color:black;font-weight:bold;" title="Delete"><i class="fas fa-trash" aria-hidden="true"></i></button></td>';
        @$tbody1.= '</tr>';
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    $pdo = null;
}
?>

for the user to add data in table i have a form with textboxes that will save to database when button save is click :

<div class="container-fluid" style="background-color:grey;">
    <form action="update_assesment.php" method="post">
        <center>
            <input type="hidden" value="<?php echo $_SESSION['emp_name']; ?>" id="emp_name"></input>
            <input type="hidden" value="<?php echo $_SESSION['teamCode'];?>" id="teamCode" />
            <input class="" placeholder="DATE" id="startDate" type="date" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <input class="" placeholder="Staff/s name" id="staffName" type="text" style="margin-left:20px;margin-right:20px;font-size:19px;" autofocus/>
            <input id="findings" style="margin-left:20px;margin-right:20px;font-size:19px;" placeholder="Findings" class=""></input>
            <input placeholder="Action taken" id="actionTaken" class="" style="margin-left:20px;margin-right:20px;font-size:19px;"></input>
            <input type="date" id="dateAccomplished" class="" style="margin-left:20px;margin-right:20px;font-size:19px;"></input>
            <button type="" class="btn btn-info" id="btnAdd"><i class="fas fa-plus" aria-hidden="true"></i> ADD</button>
        </center>
    </form>
</div>

Now as you can see in my table it has an EDIT button. I want to display the data row value in textbox when button edit is click, to edit the value on it. Also button save will show up to the form to save the changes in textbox..

I know how to make the ajax for button save, the only thing i don't know is how to display data values in table to textbox..

Thanks in advance.

edit : I've tried to get the value of table row and console it when btnEdit is click:

$(document).on('click','#btnEdit',function(){

    var $row = $(this).closest("tr");    // Find the row
    var $tds = $row.find("td");
    $.each($tds, function() {
       console.log($(this).text());
    });
}); 

How can I displays this value into the textbox, for updating.

8
  • Each object should have a unique ID attribute. You are assigning the same IDs to the INPUTs in every row. You'll need to add the row number (or other unique id) to each ID in each row. Then when you get data back from your AJAX call, you can identify and reference the specific column/row object. Jul 3, 2019 at 3:31
  • can you show how can i achieve that?
    – Gelxxxx
    Jul 3, 2019 at 4:19
  • Where you define your input statements, change it from ``` id="date" ``` similar to ``` id="date'.$rowno.'" . Add a var $rowno = 0;``` and increment it each time you loop (ie. $rowno++;). Jul 3, 2019 at 4:35
  • but my td has an id="date" and my input has an id="startDate" they are not the same.
    – Gelxxxx
    Jul 3, 2019 at 4:46
  • Look in the first bit of code -- where you build the rows of your table. Jul 3, 2019 at 4:55

1 Answer 1

0

Note that I added the name attribute to each input tag. Submit won't send a value without the name attribute.

PHP code to create data table:

<?php
try {
    $pdo = new PDO('mysql:host=localhost:3306;dbname=insulation;', 'root', 'admin');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $pdo->prepare(" SELECT * from tbl_assessment WHERE employeeName = :employeeName");
    $flag = $stmt->execute();
    if (!$flag) {
        $info = $stmt->errorInfo();
        exit($info[2]);
    }
    $rownum = 0;
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        @$tbody1.= '<tr>';
        //  Need to know the row num to pass via ajax so we know which row to update on ajax return.
        $tbody1.= '<input type="hidden" id="rownum' . $rownum . '" name="rownum' . $rownum . '" value="' . $rownum . '"/> ';
        $tbody1.= '<input type="hidden" id="id' . $rownum . '" name="id' . $rownum . '" value="' . $row['id'] . '"/> ';
        $tbody1.= '<input type="hidden" id="emp_name' . $rownum . '" name="emp_name' . $rownum . '" value="' . $_SESSION['emp_name'] . '"/> ';
        $tbody1.= '<input type="hidden" id="teamCode' . $rownum . '" name="teamCode' . $rownum . '" value="' . $_SESSION['teamCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sectionCode' . $rownum . '" name="sectionCode' . $rownum . '" value="' . $_SESSION['sectionCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sample' . $rownum . '" name="sample' . $rownum . '" value="" />';
        $tbody1.= '<section="editable" contenteditable="false">';
        //$tbody1 .='<td style="height:30px" id="id" class="id" nowrap >'.$row["id"].'</td>';
        $tbody1.= '<td style="height:30px;font-weight:bold;" id="date' . $rownum . '" class="date" >' . $row["date"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="staff' . $rownum . '">' . $row["staffName"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="findings' . $rownum . '">' . $row["findings"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="action' . $rownum . '">' . $row["action"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="accomplished' . $rownum . '">' . $row["date_accomplished"] . '</td>';
        @$tbody1.= '</section>';
        $tbody1.= '<td>';
        $tbody1.= '<button class="btn btn-warning px-3" id="btnEdit' . $rownum . '" style="color:black;font-weight:bold;" title="Edit">';
        $tbody1.= '<i class="fas fa-edit" aria-hidden="true"></i></button>';
        $tbody1.= '<button class="btn btn-danger px-3" id="btnDelete' . $rownum . '" style="color:black;font-weight:bold;" title="Delete">';
        $tbody1.= '<i class="fas fa-trash" aria-hidden="true"></i></button>';
        $tbody1.= '</td>';
        @$tbody1.= '</tr>';
        $rownum++;
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    $pdo = null;
}
?>

PHP code to generate modal popup form:

<div class="container-fluid" style="background-color:grey;" id='modal_1'>
    <form action="update_assesment.php" method="post">
        <center>
            <input type="hidden" value="<?php echo $_SESSION['emp_name']; ?>" id="emp_name" name="emp_name" />
            <input type="hidden" value="<?php echo $_SESSION['teamCode'];?>" id="teamCode" name="teamCode" />
            <input class="" placeholder="DATE" id="startDate" name="startDate" type="date" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <input class="" placeholder="Staff/s name" id="staffName" name="staffName" type="text" style="margin-left:20px;margin-right:20px;font-size:19px;" autofocus/>
            <input id="findings" name="findings" style="margin-left:20px;margin-right:20px;font-size:19px;" placeholder="Findings" class="" />
            <input placeholder="Action taken" id="actionTaken" name="actionTaken" class="" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <input type="date" id="dateAccomplished" name="dateAccomplished" class="" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <button type="" class="btn btn-info" id="btnAdd"><i class="fas fa-plus" aria-hidden="true"></i> ADD</button>
        </center>
    </form>
</div>

Javascript to handle edit buttons on each row:

$(document).on('click','.btnEdit',function(){

    var $row = $(this).closest("tr");    // Find the row
    var $tds = $row.find("td");
    $.each($tds, function() {
       console.log($(this).text());
    });
    //  Fill in edit for fields
    //  Open modal form
    $('#modal_1').style('display','block');

}); 

//  Add Javascript to handle add/save button on modal form.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.