Displaying php echo $row data into bootstrap modal form

Question

I currently have the following datatable to display my list of contacts from the database. Each row, I have also insert a "Edit" & "Delete" button and have the data-id="<?=$row['id']?>" passed for the jQuery to handle when the button is clicked. When the button is clicked, through ajax, I will get the data from getcontact.php and set it to the respective input in the modal form, however the data does not seem to be displaying in the form values. May I know where did I go wrong?

tables.php

<table width="100%" class="display table table-striped table-bordered table-hover" id="contactsTable">
                            <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Company</th>
                                        <th>Position</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                        <th>Gender</th>
                                        <th>Date Registered</th>
                                        <th>Edit</th>
                                        <th>Delete</th>
                                    </tr>
                            </thead>
                            <tbody>
                            <?php
                                while($row = mysqli_fetch_array($result)){
                                    ?>
                                    <tr>
                                        <td><?=$row['id']?></td>
                                        <td><?=$row['name']?></td>
                                        <td><?=$row['company']?></td>
                                        <td><?=$row['position']?></td>
                                        <td><?=$row['phone']?></td>
                                        <td><?=$row['email']?></td>
                                        <td><?=$row['gender']?></td>
                                        <td><?=$row['dateregistered']?></td>
                                        <td>
       <!-- Edit Button trigger modal -->
        <button id="editButton" type="button" class="btn btn-primary" datatoggle="modal" data-target="#editModal" data-id="<?=$row['id']?>">
            Edit
            </button>

                                        </td>
                                        <td>
            <!-- Delete Button trigger modal -->
           <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="<?=$row['id']?>">
             Delete
           </button>
                                        </td>
                                    </tr>
                                <?php
                                }
                            ?>
                            </tbody>
                        </table>

Modal (in the same page as tables.php)

    <!-- Edit Contact Modal -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Edit Contact</h4>
  </div>
  <div class="modal-body">
    <form class="form-horizontal" method="POST" id="editForm" role="form">
                <div class="form-group animated fadeIn">
                    <label for="nameInput" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                    <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="companyInput" class="col-sm-2 control-label">Company</label>
                    <div class="col-sm-10">
                    <input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="posInput" class="col-sm-2 control-label">Position</label>
                    <div class="col-sm-10">
                    <input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
                    <div class="col-sm-10">
                    <input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="emailInput" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                    <input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="genderInput" class="col-sm-2 control-label">Gender</label>
                    <div class="col-sm-10">
                    <input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
                    </div>
                </div>
                </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button id="editContact" type="button" class="btn btn-primary">Save</button>
  </div>
  </form>
</div>

jQuery

$("#editButton").click(function(e){

 e.preventDefault();

 var uid = $(this).data('id'); // get id of clicked row

 $.ajax({
      url: 'getcontact.php',
      type: 'POST',
      data: 'id='+uid,
      dataType: 'json',
      success: function(response){
          $("#nameInput").val(result[0]);
          $("#companyInput").val(result[1]);
          $("#posInput").val(result[2]);
          $("#contactInput").val(result[3]);
          $("#emailInput").val(result[4]);
          $("#genderInput").val(result[5]);
      }
}); 
});

getcontact.php

<?php
 include("dbconnect.php");

 $id = $_POST['id'];

 $result = mysqli_query($link, "SELECT * FROM businesscontact WHERE id=$id");
 $rows = array();

while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}

echo json_encode($rows);
?>

Your array variable 'result' is not setted from the AJAX 'response'. — Weenesta - Mathieu Dormeval
– Weenesta - Mathieu Dormeval, Commented Mar 13, 2017 at 9:29

hassan · Accepted Answer · 2017-03-13 10:09:37Z

1

1 - you are sending a encoded json from your php file and use it directly from you javascript code which is invalid so to speak,

2 - you are sending the data object to php using ajax wrongly, it should be as follows instead data: {id: uid},

3 - you are declare the wrong data-id , it should be as follows: var uid = $(this).attr('data-id');

you need to decode your json response as follows:

var uid = $(this).attr('data-id');
$.ajax({
    url: 'getcontact.php',
    method: 'POST',
    data: {id: uid},
    success: function(response){
    var result = JSON && JSON.parse(response) || $.parseJSON(response);
    ...
    // rest of your code
    ...

Update

and you have an issue in this part:

while($row = mysqli_fetch_array($result)){
    $rows[] = $row['*'];
}

to add the whole array you need to do as follows:

while($row = mysqli_fetch_array($result)){
    $rows[] = $row;
}

edited Mar 13, 2017 at 10:09

answered Mar 13, 2017 at 9:31

hassan

8,3282 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kayden Over a year ago

After decoding the var result, I can just set my individual form values with $("#nameInput").val(result[0]); ? Is there anything that needs to be done or is there something from with the php as the data still does not seem to be retrieved and displayed in the form.

hassan Over a year ago

you will need to test this in your program context, try it

Kayden Over a year ago

I've decode the json response as you suggested and update the php, but the form values are still empty. Is it wrong to add the jQuery in <script></script> within tables.php or do I have to put it in another file?

hassan Over a year ago

you have an issue in this line too, data: 'id='+uid, , should be as follows: data: {id: uid}, and replace this: var uid = $(this).data('id'); by : 1var uid = $(this).attr('data-id');1

Kayden Over a year ago

The form is returning a data now but it only update the "name" input with "[object Object]". I've updated my post with a screenshot of it. Is setting the form values with $("#nameInput").val(result[0]); correct?

|

Collectives™ on Stack Overflow

Displaying php echo $row data into bootstrap modal form

1 Answer 1

Update

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related