Passing Value To Modal Using JQuery In PHP | CampCodes

Passing Value to Modal using jQuery in PHP

May 24, 2020
passing value to modal using jquery

This instructional tutorial will show you how to pass variable to bootstrap modular utilizing jQuery. This is generally appropriate on the off chance that you need to utilize jQuery when you alter your MySQL Table utilizing Bootstrap Modal.

Making our Database

Initial step is to make our database.

1. Open phpMyAdmin.

2. Snap databases, make a database and name it as “sample”.

3. In the wake of making a database, click the SQL and glue the underneath code. See picture beneath for point by point guidance.

  `firstname` VARCHAR(30) NOT NULL,
  `lastname` VARCHAR(30) NOT NULL,
  `address` VARCHAR(100) NOT NULL,
PRIMARY KEY(`userid`)

Inserting Data into our Database

Insert sample data into our database.
1. Click “sample” database.
2. Click SQL then paste this code below.

INSERT INTO `user` (`userid`, `firstname`, `lastname`, `address`) VALUES
(1, 'lyndon', 'bermoy', 'surigao city'),
(2, 'dee', 'tolentino', 'bacolod city');

Making our Table

We will create here our sample table. We will name this as “index.php”.

<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>PHP Passing Value to Modal using jQuery</title>
    <script src=""></script>
    <link rel="stylesheet" href="" />
    <script src=""></script>
<div class="container">
    <div style="height:50px;"></div>
    <div class="well">
    <center><h2>Passing Values to Modal using jQuery</h2></center>
    <div style="height:10px;"></div>
    <table width="100%" class="table table-striped table-bordered table-hover">
            $conn = mysqli_connect("localhost","root","","sample");
            $query=mysqli_query($conn,"select * from `user`");
                <td><span id="firstname<?php echo $row['userid']; ?>"><?php echo $row['firstname']; ?></span></td>
                <td><span id="lastname<?php echo $row['userid']; ?>"><?php echo $row['lastname']; ?></span></td>
                <td><span id="address<?php echo $row['userid']; ?>"><?php echo $row['address']; ?></span></td>
                <td><button type="button" class="btn btn-success edit" value="<?php echo $row['userid']; ?>"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
<?php include('modal.php'); ?>
<script src="custom.js"></script>

Making our Modal

Let’s create now our modal. We will name this as “modal.php”.

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <center><h4 class="modal-title" id="myModalLabel">Edit User</h4></center>
                <div class="modal-body">
				<div class="container-fluid">
					<div class="form-group input-group">
						<span class="input-group-addon" style="width:150px;">Firstname:</span>
						<input type="text" style="width:350px;" class="form-control" id="efirstname">
					<div class="form-group input-group">
						<span class="input-group-addon" style="width:150px;">Lastname:</span>
						<input type="text" style="width:350px;" class="form-control" id="elastname">
					<div class="form-group input-group">
						<span class="input-group-addon" style="width:150px;">Address:</span>
						<input type="text" style="width:350px;" class="form-control" id="eaddress">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                    <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> </i> Update</button>

Making our Script

Create our script to pass value to our modal. We will name this as “custom.js”.

	$(document).on('click', '.edit', function(){
		var id=$(this).val();
		var first=$('#firstname'+id).text();
		var last=$('#lastname'+id).text();
		var address=$('#address'+id).text();
Download Here

This is a free education portal. You can use every source code in your project without asking permission to the author. Share our website to everyone to make our community of programmers grow more.

Leave a Reply

Your email address will not be published. Required fields are marked *