Retrieve multiple data from 2 tables with php and jquery - php

This code is retrieving multiple data from 1 table only.
How can I retrieve multiple data from 2 tables and save them to another table?
Result that I want to achieve:
Here are the tables
request:
prNo branch
pr03 odessa
pr04 kiev
detail_request:
prNo productCode productName qty
pr03 111 soap 1200
pr03 112 tooth paste 1000
I want to save data on detail_request table to purchase table, but only the data that have check mark on the checkbox, and I'm adding price column to be fill manually.
purchase:
prNo productCode productName qty price
- - - - -
Here is the code:
<html>
<head>
<title>Lookup Modal Bootstrap 3</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="datatables/dataTables.bootstrap.css"/>
<style>
body{
margin: 15px;
}
.pick:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-5">
<h2> </h2>
</div>
</div>
<form action="action" onsubmit="dummy();
return false">
<div class="form-group">
<label for="varchar">Request Number</label>
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" name="prNo" id="prNo" placeholder="Request Number" readonly />
<strong>Branch Name</strong><br>
<input type="text" class="form-control" name="branch" id="branch" placeholder="branch " readonly />
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
</div>
</div>
</div>
<table width="446" border="1">
<tr>
<th scope="row"> </th>
<th scope="row">Request Number</th>
<td><strong>Product Code</strong></td>
<td><strong>Product Name</strong></td>
<td><strong>QTY</strong></td>
<td><strong>Price</strong></td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="prNo" id="prNo"></th>
<th scope="row"><label for="Request Number"></label>
<input type="text" name="prNo" id="prNo"></th>
<td><label for="productCode"></label>
<input type="text" name="productCode" id="productCode"></td>
<td><label for="productName"></label>
<input type="text" name="productName" id="productName"></td>
<td><label for="qty"></label>
<input type="text" name="qty" id="qty"></td>
<td><input type="text" name="price" id="price"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox" name="prNo4" id="prNo4"></th>
<th scope="row"><input type="text" name="prNo2" id="prNo2"></th>
<td><input type="text" name="productCode2" id="productCode2"></td>
<td><input type="text" name="productName2" id="productName2"></td>
<td><input type="text" name="qty2" id="qty2"></td>
<td><input type="text" name="price2" id="price2"></td>
</tr>
</table>
<input type="submit" value="Save" class="btn btn-primary" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lookup </h4>
</div>
<div class="modal-body">
<table id="lookup" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Request Number</th>
<th>Branch Name</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect('localhost', 'root', '', 'purchase');
$sql = mysqli_query($con,'select * from request ');
while ($r = mysqli_fetch_array($sql)) {
?>
<tr class="pick" no="<?php echo $r['prNo']; ?>", branch="<?php echo $r['branch'] ?>", code="<?php echo $r['productCode'] ?>">
<td><?php echo $r['prNo']; ?></td>
<td><?php echo $r['branch']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="datatables/jquery.dataTables.js"></script>
<script src="datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript">
$(document).on('click', '.pick', function (e) {
document.getElementById("prNo").value = $(this).attr('no');
document.getElementById("branch").value = $(this).attr('branch');
$('#myModal').modal('hide');
});
$(function () {
$("#lookup").dataTable();
});
</script>
</body>
</html>


<?php
if(isset($_POST['product_submit']))
{
$check=$_POST['check'];
foreach($check as $i)
{
$prno=$_POST['prNo'.$i];
$prcode=$_POST['productCode'.$i];
$prname=$_POST['productName'.$i];
$qty=$_POST['qty'.$i];
$price=$_POST['price'.$i];
$query = mysqli_query($con,"insert into purchase (prNo,productCode,productName,qty,price) value ('$prno', '$prcode', '$prname', '$qty', '$price')");
}
if($query)
{
?>
<script>
alert("success");
</script>
<?php
}
}
?>
<html>
<head>
<title>Lookup Modal Bootstrap 3</title>
</head>
<body>
<div class="row">
<div class="col-md-5">
<h2> </h2>
</div>
</div>
<form method="post" id="my_form">
<div class="form-group">
<label for="varchar">Request Number</label>
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" name="prNo" id="prNo" placeholder="Request Number" readonly />
<strong>Branch Name</strong><br>
<input type="text" class="form-control" name="branch" id="branch" placeholder="branch " readonly />
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
<button type="button" class="btn btn-default" onclick="show_fun()">View</button>
</div>
</div>
</div>
<table width="446" border="1">
<thead>
<tr>
<th scope="row"> </th>
<th scope="row">Request Number</th>
<td><strong>Product Code</strong></td>
<td><strong>Product Name</strong></td>
<td><strong>QTY</strong></td>
<td><strong>Price</strong></td>
<td><strong>Total</strong></td>
</tr>
</thead>
<tbody id="product_table">
</tbody>
</table>
<input type="submit" value="Save" name="product_submit" class="btn btn-primary" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lookup </h4>
</div>
<div class="modal-body">
<table id="lookup" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Request Number</th>
<th>Branch Name</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect('localhost', 'root', '', 'purchase');
$sql = mysqli_query($con,'select * from request ');
while ($r = mysqli_fetch_array($sql)) {
?>
<tr class="pick" no="<?php echo $r['prNo']; ?>", branch="<?php echo $r['branch'] ?>", code="<?php echo $r['productCode'] ?>">
<td><?php echo $r['prNo']; ?></td>
<td><?php echo $r['branch']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="datatables/jquery.dataTables.js"></script>
<script src="datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript">
$(document).on('click', '.pick', function (e) {
document.getElementById("prNo").value = $(this).attr('no');
document.getElementById("branch").value = $(this).attr('branch');
var no=$(this).attr('no');
$.ajax({
type:"post",
data:"&product_id=1&prno="+no,
url:"ajax.php",
success:function(result)
{
$("#product_table").html(result);
}
});
$('#myModal').modal('hide');
});
$(function () {
$("#lookup").dataTable();
});
function calc_fun(i){
var qty=$("#qty"+i).val();
var price=$("#price"+i).val();
var total=Number(qty)*Number(price);
$("#total"+i).val(total);
}
</script>
</body>
</html>
ajax.php
<?php
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_request where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo '<tr>
<th scope="row"><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></th>
<th scope="row"><label for="Request Number"></label>
<input type="text" name="prNo'.$i.'" id="prNo'.$i.'" readonly value="'.$r["prNo"].'"></th>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'"></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"></td>
<td><label for="qty"></label>
<input type="text" name="qty'.$i.'" id="qty'.$i.'" onchange="calc_fun('.$i.')" readonly value="'.$r["qty"].'"></td>
<td><input type="text" name="price'.$i.'" onchange="calc_fun('.$i.')" id="price'.$i.'"></td>
<td><input type="text" name="total'.$i.'" id="total'.$i.'"></td>
</tr>';
$i++;
}
}
?>

Related

How do I stop user from leaving quantity empty?

So this is my order page and I want to add an option which prevents the user from leaving the quantity option empty. I cannot seem to use the required option as it compels the user to fill every box instead of the one just selected.
Here is the code
<body>
<?php include('navbar.php'); ?>
<div class="container">
<h1 class="page-header text-center">ORDER</h1>
<form method="POST" action="purchase.php">
<table class="table table-striped table-bordered">
<thead>
<th class="text-center"><input type="checkbox" id="checkAll"></th>
<th class="productheading">Category</th>
<th class="productheading">Product Image
<th class="productheading">Product Name</th>
<th class="productheading">Price</th>
<th class="productheading">Quantity</th>
</thead>
<tbody>
<?php
$sql = "select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc";
$query = $conn->query($sql);
$iterate = 0;
while ($row = $query->fetch_array()) {
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td>
<td><?php echo $row['catname']; ?></td>
<td><a href="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>"><img src="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>" height="170px" width="80%"></a></td>
<td class="productname1"><?php echo $row['productname']; ?></td>
<td class="price">Rs <?php echo number_format($row['price'], 2); ?></td>
<!-->**HERE IS THE CODE THAT NEEDS TO BE FIXED**--> <td><input type="number" class="form-control" name="quantity<?php echo $iterate; ?>"></td>
</tr>
<?php
$iterate++;
}
?>
</tbody>
</table>
<div class="row">
<div class="col-md-3">
<input type="text" name="customer" class="form-control" placeholder="Customer Name" required>
</div>
<div class="col-md-3">
<input type="number" name="number" class="form-control" placeholder="Contact Number" required>
</div>
<div class="col-md-2" style="margin-left:-20px;">
<button type="submit" onclick="myFunction()" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button>
<br />
<br />
<br />
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#checkAll").click(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
});
});
</script>
</body>
</html>

You can target those fields with jQuery/JavaScript and make it required by focusing on it and then prevent the form from submitting. Try this
$(document).ready(function() {
$('#order-form').submit(function(e){
let $quantities = $(this).find('.table input[type="number"]').filter(function(){
return $(this).closest('tr').find('input[type="checkbox"]').is(':checked') && $(this).val() === '';
})
if( $quantities.length > 0 ){
e.preventDefault();
$quantities.first().focus()
}
})
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
<form method="POST" action="purchase.php" id="order-form">
<table class="table table-striped table-bordered">
<thead>
<th class="text-center"><input type="checkbox" id="checkAll"></th>
<th class="productheading">Category</th>
<th class="productheading">Product Image
<th class="productheading">Product Name</th>
<th class="productheading">Price</th>
<th class="productheading">Quantity</th>
</thead>
<tbody>
<tr>
<td class="text-center"><input type="checkbox" value="1" name="productid[]" checked></td>
<td>Dishes</td>
<td><img src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Bara" height="170px" width="80%"></td>
<td class="productname1">Bara</td>
<td class="price">Rs 79.00</td>
<td><input type="number" class="form-control" name="quantity[]"></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" value="1" name="productid[]"></td>
<td>Dishes</td>
<td><img src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Chwela" height="170px" width="80%"></td>
<td class="productname1">Chwela</td>
<td class="price">Rs 120.00</td>
<td><input type="number" class="form-control" name="quantity[]"></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button>
</form>
</div>
Answer in format requested by the OP
<body>
<?php include('navbar.php'); ?>
<div class="container">
<h1 class="page-header text-center">ORDER</h1>
<form method="POST" action="purchase.php" id="order-form">
<table class="table table-striped table-bordered">
<thead>
<th class="text-center"><input type="checkbox" id="checkAll"></th>
<th class="productheading">Category</th>
<th class="productheading">Product Image
<th class="productheading">Product Name</th>
<th class="productheading">Price</th>
<th class="productheading">Quantity</th>
</thead>
<tbody>
<?php
$sql = "select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc";
$query = $conn->query($sql);
$iterate = 0;
while ($row = $query->fetch_array()) {
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td>
<td><?php echo $row['catname']; ?></td>
<td><a href="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>"><img src="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>" height="170px" width="80%"></a></td>
<td class="productname1"><?php echo $row['productname']; ?></td>
<td class="price">Rs <?php echo number_format($row['price'], 2); ?></td>
<td><input type="number" class="form-control" name="quantity<?php echo $iterate; ?>"></td>
</tr>
<?php
$iterate++;
}
?>
</tbody>
</table>
<div class="row">
<div class="col-md-3">
<input type="text" name="customer" class="form-control" placeholder="Customer Name" required>
</div>
<div class="col-md-3">
<input type="number" name="number" class="form-control" placeholder="Contact Number" required>
</div>
<div class="col-md-2" style="margin-left:-20px;">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button>
<br />
<br />
<br />
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#checkAll").click(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$('#order-form').submit(function(e){
let $quantities = $(this).find('.table input[type="number"]').filter(function(){
return $(this).closest('tr').find('input[type="checkbox"]').is(':checked') && $(this).val() === '';
})
if( $quantities.length > 0 ){
e.preventDefault();
alert("Quantity is required")
$quantities.first().focus()
}
})
});
</script>
</body>

In case of users who have disabled Javascript, you should also check on the server for missing quantities:
// purchase.php
if (isset($_POST['productid'])) {
for ( $i=0; $i < sizeof($_POST['productid']); $i++ ) {
if ( $_POST['productid'][$i] && ! $_POST['quantity'][$i] ) {
echo "Missing quantity for " . $_POST['productid'][$i] . "<br>";
}
}
}

Laravel: Displaying the list with same URL when clicking the html button

I'm facing an issue, please see the below screenshot.
Screenshot
In the screenshot, you can see its image upload page. By default, the Add Image button and the table which showing the lists should be display. The concept that I want to implement is when I click the Add Image button, the table lists should be hidden and have to show the image upload section. This all should be happen in the same URL.
Below is the code:
Route:
Route::post('/imageupload', 'Admin\ImageController#imageUploadPost')->name('image.upload.post');
Blade File:
<div class="panel panel-container">
<button type="button" class="btn btn-primary">Add Image</button>
</div>
<div class="panel panel-container">
<table class="table table-striped" id="slideshow">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-container hide-img-upload">
<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-md-6">
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
</div>
</div>
Controller:
public function imageUploadPost()
{
return back()
->with('success','You have successfully upload image.')
->with('image',$imageName);
}
Since, I'm new to Laravel, I couldn't able to see the solution.
Any help will be appreciated.

Try this
<div class="panel panel-container">
<button type="button" class="btn btn-primary"data-toggle="modal"data-target="#myModal">Add Image</button>
</div>
<div class="panel panel-container">
<table class="table table-striped" id="slideshow">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="modal" id="myModal" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload Image </h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="panel panel-container hide-img-upload">
<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-md-6">
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
or use javascript hidden show for this

this is more about html and javascript staff.
You can use this as hint.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="alter()">Alter</button>
<div id="first">First</div>
<div id="sec">Second</div>
<script>
document.getElementById('sec').style.visibility = 'hidden';
function alter(){
if(document.getElementById('sec').style.visibility == 'hidden'){
document.getElementById('sec').style.visibility = 'visible';
document.getElementById('first').style.visibility = 'hidden';
}else{
document.getElementById('sec').style.visibility = 'hidden';
document.getElementById('first').style.visibility = 'visible';
}
}
</script>
</body>
</html>

Firstly define id for file input;
<input type="file" name="image" id="file_input" class="form-control">
After define id for list scope;
<div class="panel panel-container" id="list_scope">
Finally add JavaScript codes;
<script>
document.getElementById('file_input').onclick = function() {
document.getElementById('list_scope').style.display = "none";
};
</script>

View SQL data by modal

Hello I'm not quite sure where i have gone wrong with this code i am very new to ajax and i have half an idea about php.
I have looked at other questions but everyones doing it in different ways then i am.
I am calling data via ajax to modal from SQL
index.php
<?php
$connect = mysqli_connect("localhost","root","","testing");
$query = "SELECT * FROM employee";
$result = mysqli_query($connect, $query);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="width:700px;">
<h3 align="center">Employee Onboarding</h3>
<br>
<div class="table-responsive">
<table class="table table-bordered">
<tr> <th width="70%">Employee Name</th> <th width="30%">View</th> </tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr> <td> <?php echo $row['Name']; ?> </td> <td> <input type="button" name="view" value="view" id="<?php echo $row['EmployeeID']; ?>" class="btn btn-info btn-xs view_data"> </td> </tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<!-- Modal -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var employee_id = $(this).attr("EmployeeID");
$.ajax({
url:"modal.php",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
modal.php
<?php
if(isset($_POST['employee_id']))
{
$output = '';
$connect = mysqli_connect("localhost","root","","testing");
$query = "SELECT * FROM employee WHERE EmployeeID = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr> <td width="30%"> <label> Name </label> </td> <td width="70%"> '.$row['Name'].' </td> </tr>
<tr> <td width="30%"> <label> Adress </label> </td> <td width="70%"> '.$row['Address'].' </td> </tr>
<tr> <td width="30%"> <label> Gender </label> </td> <td width="70%"> '.$row['Gender'].' </td> </tr>
<tr> <td width="30%"> <label> Position </label> </td> <td width="70%"> '.$row['Position'].' </td> </tr>
<tr> <td width="30%"> <label> Age </label> </td> <td width="70%"> '.$row['Age'].' </td> </tr>
<tr> <td width="30%"> <label> Added Time </label> </td> <td width="70%"> '.$row['AddedTime'].' </td> </tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
Live/Testing Site

You should also post your ajax! You should append the result of your modal.php into the actual modal.
modal.php
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr> <td width="30%"> <label> Name </label> </td> <td width="70%"> '.$row['Name'].' </td> </tr>
<tr> <td width="30%"> <label> Adress </label> </td> <td width="70%"> '.$row['Address'].' </td> </tr>
<tr> <td width="30%"> <label> Gender </label> </td> <td width="70%"> '.$row['Gender'].' </td> </tr>
<tr> <td width="30%"> <label> Position </label> </td> <td width="70%"> '.$row['Position'].' </td> </tr>
<tr> <td width="30%"> <label> Age </label> </td> <td width="70%"> '.$row['Age'].' </td> </tr>
<tr> <td width="30%"> <label> Added Time </label> </td> <td width="70%"> '.$row['AddedTime'].' </td> </tr>
';
}
$output .= "</table></div>";
echo $output;
}
In your ajax. Assuming you use jquery:
$.ajax({
type: 'POST',
url : 'modal.php',
cache: false,
success: function(data){
$('#target').html(data);
}
});
HTML
<div class="modal">
<div id="target"></div>
</div>

Displaying value in textbox for to edit using ajax and php

editModal.php
<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<i class="glyphicon glyphicon-edit"></i> Edit Profile
</h4>
</div>
<div class="modal-body">
<div id="modal-loader" style="display: none; text-align: center;">
</div>
<div id="dynamic-content">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>First Name</th>
<td id="txt_first">
<input id="result_table" type="text" class="form-control" name="Firstname" ng-model="name">
</td>
</tr>
<tr>
<th>Middle Name</th>
<td id="txt_middle" > </td>
</tr>
<tr>
<th>Last Name</th>
<td id="txt_last"></td>
</tr>
<tr>
<th>Email Add</th>
<td id="txt_emailadd"></td>
</tr>
<tr>
<th>Contact Number</th>
<td id="txt_cnumber"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" value="send" name="submit" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- /.modal -->
</div>
$(document).on('click', '#getUser', function(e){
e.preventDefault();
var uid = $(this).data('id'); // get id of clicked row
$('#dynamic-content').hide(); // hide dive for loader
$('#modal-loader').show(); // load ajax loader
$.ajax({
url: '../model/editUser.php',
type: 'POST',
data: 'id='+uid,
dataType: 'json'
})
.done(function(data){
console.log(data);
$('#dynamic-content').hide(); // hide dynamic div
$('#dynamic-content').show(); // show dynamic div
$('#txt_first').html(data.First_Name);
$('#txt_middle').html(data.Middle_Name);
$('#txt_last').html(data.Last_Name);
$('#txt_emailadd').html(data.Email_Add);
$('#txt_cnumber').html(data.Contact_Number);
$('#modal-loader').hide(); // hide ajax loader
})
.fail(function(){
$('.modal-body').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
});
});
});
</script>
I wanted to display the value of the $('#txt_first').html(data.First_Name); on the input type="text" value = "php echo $firstName " But it seems that I'm doing it wrong. Is it possible for me to enclosed the table and the script in a ; segment?

It is input field so you need to do it with 'value' not 'html'. try this:
$('#txt_first').val(data.First_Name);

Created demo to display data.First_Name in input type ="text"
$('#result_table').val("test");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tr>
<th>First Name</th>
<td id="txt_first">
<input id="result_table" type="text" class="form-control" name="Firstname" ng-model="name">
</td>
</tr>
<tr>
<th>Middle Name</th>
<td id="txt_middle" > </td>
</tr>
<tr>
<th>Last Name</th>
<td id="txt_last"></td>
</tr>
<tr>
<th>Email Add</th>
<td id="txt_emailadd"></td>
</tr>
<tr>
<th>Contact Number</th>
<td id="txt_cnumber"></td>
</tr>
</table>

Getting Correct value of ID and Populate to Modal Popup

https://www.dropbox.com/s/e89hjxrogghll9a/1.jpg?dl=0
https://www.dropbox.com/s/sjqfsuwj9mlpc2o/2.jpg?dl=0
see the link above for the image. the image show the process
if i click my selected tables, it cannot select the correct data. here is my code. Thank you for the Help
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Code</th>
<th>Date of Request</th>
<th>Requestor Name</th>
<th>Form Type</th>
<th>Request Type</th>
<th>Details</th>
<th>Date Needed</th>
<th>Action</th>
</tr>
</thead>
<?php
$req1 = mysql_query('select * from mainviewrequestor where username="'.$_SESSION['username'].'" and req_dateapprove IS NULL');
while($dn1 = mysql_fetch_array($req1))
{
?>
<tr>
<td><?php echo date($dn1['req_code']); ?></td>
<td><?php echo date($dn1['req_date']); ?></td>
<td class="left"><?php echo htmlentities($dn1['empname'], ENT_QUOTES, 'UTF-8'); ?></td>
<td><?php echo htmlentities($dn1['form_name'], ENT_QUOTES, 'UTF-8'); ?></td>
<td> <?php echo $dn1['itrf_type']?></td>
<td> <?php echo $dn1['itrf_details']?></td>
<td> <?php echo $dn1['req_dateneeded']?></td>
<td class="left"><button type="submit" class="btn btn-primary" name="approved">View</button>
<button type="submit" class="btn btn-primary" name="btn-sub2">DisApproved</button></td>
</tr>
<?php
}
if(intval(mysql_num_rows($req1))==0)
{
?>
<tr>
<td colspan="4" class="center">You have no unread message.</td>
</tr>
<?php
}
?>
</table>
<br />
<?php
}
?>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<?php
$req1 = mysql_query('select * from mainviewrequestor2');
while($dn1 = mysql_fetch_array($req1))
{
?>
<!--Pop-up modal Code-->
<div class = "modal fade" id="proceed" role="dialog">
<div class = "modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h4>REQUEST TABLES</h4>
<h2>------------------------------------------------------------------------------------------</h2>
<div class="content">
<form>
<label>Date Created: </label><input type="text" name="req_date" id="req_date" value="<?php echo ($dn1['req_date']); ?>" /><br />
<label>Request By: </label><input type="text" name="empname" id="empname" value="<?php echo ($dn1['empname']) ?>" /><br />
<label>Form Name: </label><input type="text" name="form_name" id="form_name" value="<?php echo $dn1['form_name']?>" /><br />
<label>Request Type: </label><input type="text" name="itrf_type" id="itrf_type" value="<?php echo $dn1['itrf_type']?>" /><br />
<label>Details: </label><input type="text" name="itrf_details" id="itrf_details" value="<?php echo $dn1['itrf_details']?>" /><br />
<label> Date Needed:</label><input type="text" name="req_dateneeded" id="req_dateneeded" value="<?php echo $dn1['req_dateneeded']?>" /><br />
<button type="submit" class="btn btn-primary" name="req_code">Approved</button>
<button type="submit" class="btn btn-primary" name="update2">Disapproved</button>
</form>
</div>
<?php
}
?>

You need to replace the #proceed id on each modal element, and h ref element, so that they correspond
For your table
<a href="#proceed-<?php echo $req1['id'];?>" data-toggle="modal">
For your modal
while($dn1 = mysql_fetch_array($req1))
{?>
<div class = "modal fade" id="proceed-<?php echo $dn1['id'];?>" role="dialog">
Although this is a rather ugly way of choosing to do things.
I would instead only create one modal, and pass the ID to an ajax function to load the said form. But thats just me, and thats a whole other topic.
But this should fix your issue.

Categories