Here.. in this above video, you will be learning how to fetch data into textbox using jquery ajax in php using bootstrap POP Up Modal (POP Dialog BOX).

Step 1: Create a table named student in your database:

We have already started with this student table in database wth below fields:

1. id (PrimaryKey, AI)

2. fname

3. lname

4. class

5. section

Step 2: Create a file named index.php.

Copy and paste the below php and html code for for fetching the data into textbox using jQuery Ajax in php.

So, i have written the code in php to fetch the data from table database and then given a simple view button to get get the data on POP Dialog Box (Bootstrap Modal) using jquery ajax.given below.

<?php session_start(); ?>

<!doctype html>

<head>

<title>PHP CRUD - Bootstrap Modal (POP UP)</title>

</head>

<body>

<h5 class="modal-title" id="editStudentModalLabel">Student Edit Data</h5>

</button>

</div>

<label for="">First Name</label>

</div>

</div>

<label for="">Class</label>

</div>

<label for="">Section</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="submit" name="update_student" class="btn btn-primary">Update</button>

</div>

</form>

</div>

<?php

if(isset($_SESSION['status']) && $_SESSION['status'] !='')

{

</button>

</div>

<?php

unset($_SESSION['status']);

}

<h5>

PHP CRUD - Bootstrap Modal (POP UP)

Add Student

</button>

</h5>

</div>

<thead>

<tr>

<th scope="col">First Name</th>

<th scope="col">Class</th>

<th scope="col">Section</th>

<th scope="col">Action</th>

</tr>

</thead>

<tbody>

<?php

$conn = mysqli_connect("localhost","root","","phpcrud");

$query = "SELECT * FROM students";

$query_run = mysqli_query($conn, $query);

if(mysqli_num_rows($query_run) > 0)

{

// while($row = mysqli_fetch_array($query_run))

foreach($query_run as $row)

{

<tr>

<td>

<a href="#" class="badge badge-danger">DELETE</a>

</td>

</tr>

<?php

}

else

{

echo "<h5>No Record Found</h5>";

}

</tbody>

</table>

</div>

$(document).ready(function () {

$('.edit_btn').click(function (e) {

e.preventDefault();

var stud_id = $(this).closest('tr').find('.stud_id').text();

// console.log(stud_id);

$.ajax({

type: "POST",

url: "code.php",

data: {

'checking_edit_btn': true,

'student_id': stud_id,

success: function (response) {

// console.log(response);

$.each(response, function (key, value) {

// console.log(value['fname']);

$('#edit_id').val(value['id']);

$('#edit_fname').val(value['fname']);

$('#edit_lname').val(value['lname']);

$('#edit_class').val(value['class']);

$('#edit_section').val(value['section']);

});

$('#editStudentModal').modal('show');

}

});

</script>

</body>

</html>

Step 3: Create a file named code.php file.

Here, in this below code, it is written in php and mysql where we run some query and command to execute and then send the response by json_encode to the above pasted scripts.

<?php session_start(); $conn = mysqli_connect("localhost","root","","phpcrud"); // Student Edit Data if(isset($_POST['checking_edit_btn'])) { $s_id = $_POST['student_id']; // echo $return = $s_id; $result_array = []; $query = "SELECT * FROM students WHERE id='$s_id' "; $query_run = mysqli_query($conn, $query); if(mysqli_num_rows($query_run) > 0) { foreach($query_run as $row) { array_push($result_array, $row); header('Content-type: application/json'); echo json_encode($result_array); } } else { echo $return = "<h5>No Record Found</h5>"; } } ?>

Navbar

My Blog List

Wednesday, September 16, 2020

PHP CRUD-4: Bootstrap Modal (POP-UP): How to fetch data in Textbox from DB using jQuery AJAX PHP

Step 1: Create a table named student in your database:

Step 2: Create a file named index.php.

Step 3: Create a file named code.php file.

1 comment: