View SQL data by modal - php

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>

Related

bootstrap modal with dynamic mysql data using ajax php

I have a table with data that is being pulled from a database and I am trying to add a button to where it will load more data but when I click on it no data comes up. I am new to coding so I don't have that much experience.
This is the main page
Index.php
<?php
include 'database.php'; // MySQL Connection
$query = "SELECT * FROM Clever_Students";
$result = mysqli_query($conn, $query);
?>
<body>
<br /><br />
<div class="container">
<br />
<div class="table-responsive">
<br />
<h4 align="center">Student Data Management</h4>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th width="20%" class="text-center">View Student Details</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["First_name"]; ?></td>
<td><?php echo $row["Last_Name"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["Student_id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
<!-- Employee Details -->
<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">Student Details</h4>
</div>
<div class="modal-body" id="student_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var Student_id = $(this).attr("Student_id");
$.ajax({
url:"select.php",
method:"post",
data:{Student_id:Student_id},
success:function(data){
$('#student_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
</body>
This where the modal should be pulling the data from.
select.php
<?php
if (isset($_POST["Student_id"])) {
$output = '';
include 'database.php'; // MySQL Connection
$query = "SELECT * FROM Clever_Students WHERE Student_id = '" . $_POST["Student_id"] . "'";
$result = mysqli_query($conn, $query);
$output .= '
<div class="table-responsive">
<table class="table table-striped">';
while ($row = mysqli_fetch_array($result)) {
$output .= '
<tr>
<td width="30%"><label>First Name</label></td>
<td width="70%">' . $row["First_name"] . '</td>
</tr>
<tr>
<td width="30%"><label>Last Name</label></td>
<td width="70%">' . $row["Last_Name"] . '</td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%">' . $row["Gender"] . '</td>
</tr>
<tr>
<td width="30%"><label>School ID</label></td>
<td width="70%">' . $row["School_id"] . '</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
I have added the code above. Anything will help.

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>";
}
}
}

My modal is displayed but there is no content inside the displayed modal

I want to include a simple bootstrap modal. The code is minimal, but there seems to be something wrong.
When I click the view button the modal is displayed but no data shows up in it.
This is my index.php:
<?php
$connect = mysqli_connect("localhost", "root", "", "baps");
$query = "SELECT * FROM tab_organizers";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax &
PHP</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.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Visitor's List</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">Group Name</th>
<th width="30%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["GroupName"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo
$row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</body>
</html>
<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">Visitor Details</h4>
</div>
<div class="modal-body" id="visitor_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var OrganizerID = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{OrganizerID:OrganizerID},
success:function(data){
$('#visitor_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
This is my select.php:
<?php
if(isset($_POST["OrganizerID"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "baps");
$query = "SELECT * FROM tab_organizers WHERE OrganizerID = '".$_POST["OrganizerID"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .='
<tr>
<td><label>Record Entered on: </label></td>
<td>'.$row["Datetimestamp"].'</td>
</tr>
<tr>
<td><label>Organizer ID: </label></td>
<td>'.$row["OrganizerID"].'</td>
</tr>
<tr>
<td><label>Group Name</label></td>
<td>'.$row["GroupName"].'</td>
</tr>
<tr>
<td><label>Contact Name</label></td>
<td>'.$row["ContactName"].'</td>
</tr>
<tr>
<td><label>House or Apartment #: </label></td>
<td>'.$row["Address1"].'</td>
</tr>
<tr>
<td><label>Street Name: </label></td>
<td>'.$row["Address2"].'</td>
</tr>
<tr>
<td><label>City: </label></td>
<td>'.$row["City"].'</td>
</tr>
<tr>
<td><label>Province: </label></td>
<td>'.$row["Province"].'</td>
</tr>
<tr>
<td><label>Postal Code: </label></td>
<td>'.$row["PostalCode"].'</td>
</tr>
<tr>
<td><label>Country: </label></td>
<td>'.$row["Country"].'</td>
</tr>
<tr>
<td><label>Title or Profession: </label></td>
<td>'.$row["Title"].'</td>
</tr>
<tr>
<td><label>Home or Office #: </label></td>
<td>'.$row["Telephone1"].'</td>
</tr>
<tr>
<td><label>Cell Number: </label></td>
<td>'.$row["Telephone2"].'</td>
</tr>
<tr>
<td><label>Fax Number: </label></td>
<td>'.$row["FaxNumber"].'</td>
</tr>
<tr>
<td><label>School Email Address: </label></td>
<td>'.$row["SchoolGeneralEmail"].'</td>
</tr>
<tr>
<td><label>Personal Email Address: </label></td>
<td>'.$row["Email"].'</td>
</tr>
<tr>
<td><label>How did you hear about us: </label></td>
<td>'.$row["HowDidYouHear"].'</td>
</tr>
<tr>
<td><label>Santo`s or Karyakar`s Comments on this Organizer</label></td>
<td>'.$row["Comments"].'</td>
</tr>
<tr>
<td><label>Diwali Invites to be send?</label></td>
<td>'.$row["Diwaliinvites"].'</td>
</tr>
<tr>
<td><label>Subscribe to BAPS mailing list?</label></td>
<td>'.$row["SubscribedToMailingList"].'</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
my database column names are as follows: OrganizerID(int(11))
GroupName(varchar(240)) ContactName(varchar(50)) Address1(varchar(50))
Address2(varchar(50)) City(varchar(50)) Province(varchar(50))
PostalCode(varchar(50)) Country(varchar(50)) Title(varchar(50))
Telephone1(varchar(50)) Telephone2(varchar(50)) FaxNumber(varchar(50))
SchoolGeneralEmail(varchar(50)) Email(varchar(100))
SubscribedToMailingList(bit(1)) HowDidYouHear(varchar(50))
Comments(mediumtext) Datetimestamp(datetime) Diwaliinvites(bit(1))

mPDF error: Some data has already been output to browser, can't send PDF file while taking inputs

i created test1.php view this file contain inputs value in form on submit button redirecting to checkpdf.php , for creating pdf invoice file .but getting this error. how can solve it. in check pdf file getting all proper values without genrating pdf for testing.
following in code is in checkpdf.php
please check image
this is my test1.php view page
<?php
include 'config.php';
$query= "select * from qaote_dets";
if ($result=mysqli_query($conn,$query))
{
// Fetch one and one row
// Free result set
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<h1>Test </h1>
</div>
<div class="col-md-12" style="padding-top: 32px;">
<div class="col-md-8" style="float:left;">
<form action='checkpdf.php' method='POST' id='quatepdf'>
<table border="1">
<tr>
<th>#sr. no</th>
<th>item no.</th>
<th>item description</th>
<th>quantity</th>
<th>price/unit</th>
</tr>
<?php
$i = 1;
while ($row=mysqli_fetch_row($result))
{
?>
<tr id="row<?php echo $i ?>">
<td>
<input type="checkbox" class="check1" id="checkdet<?php echo $i;?>" name="checkboxtest[]" value="<?php echo $row[1]; ?>">
</td>
<td>
<input type="text" class="form-control text1" id="text1" value="<?php echo $row[1]; ?> " name='item_name[]'><br>
</td>
<td>
<textarea class="form-control item desc" value="" name='item_desc[]'><?php echo $row[2];?></textarea>
</td>
<td>
<input type="text" class="form-control quantity<?php echo $i;?>" value="1" name='qty[]'>
</td>
<td>
<input type="text" class="form-control amnt<?php echo $i;?> " readonly="" name='amnt[]' value="<?php echo $row[3];?>" >
<input type="hidden" class="service<?php echo $i ?>" value="<?php echo $row[4];?>" name='service[]'>
</td>
</tr>
<?php $i++; } mysqli_data_seek($result, 0);?>
<tr>
<td>
<th colspan="3">Total</th>
</td>
<td>
<input type="text" readonly="" id="totamnt" value="" name="tolval">
</td>
</tr>
<tr>
<td>
<th colspan="3">GSt(18%)</th>
</td>
<td>
<input type="text" readonly="" id="gst" value="" name="gstamt">
</td>
</tr>
<tr>
<td>
<th colspan="3">Final Amount</th>
</td>
<td>
<input type="text" readonly="" id="finamt" value="" name="finalamt">
</td>
</tr>
</table>
<div class="col-md-12" style="padding-top:10px;">
<div class="col-md-4" style="float: left;">
<input type="button" value="Calculate" class="btn-success" id="Calculate">
</div>
<div class="col-md-4" style="float: left;">
<input type="submit" value="Genrate Pdf" class="btn-success" name="pdfbtn">
</div>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="col-md-4" style="float:left;">
<table border = "1">
<tr>
<th>add product</th>
<th>#Sr no.</th>
<th>Item code</th>
<th>amount</th>
<th>installation charges</th>
</tr>
<?php
$i =1;
while ($row=mysqli_fetch_row($result))
{
?>
<tr>
<td>
<input type="checkbox" class="" name="" id="check<?php echo $i?>">
</td>
<td>
<span class=""> <?php echo $i;?></span>
</td>
<td>
<span class=""><?php echo $row[1];?> </span>
</td>
<td>
<span class=""><?php echo $row[3];?> </span>
</td>
<td>
<span class=""><?php echo $row[4];?></span>
</td>
</tr>
<?php $i++; } ?>
</table>
</div>
</div>
</body>
</html>
<?php
mysqli_free_result($result);
}
?>
this is my redirected checkpdf.php page
<?php
include("mpdf60/mpdf.php");
$logoFile = 'ssi.jpg';
$logoXPos = 10;
$logoYPos = 10;
$logoWidth = '40px';
/* valus checked */
$item_code = $_POST['item_name'];
$item_desc = $_POST['item_desc'];
$quantity = $_POST['qty'];
$price = $_POST['amnt'];
$service = $_POST['service'];
$totamt = $_POST['tolval'];
$gst = $_POST['gstamt'];
$final = $_POST['finalamt'];
/* close */
$pdf = new mPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
//$pdf->Cell(40,10,'Hello World!');
$pdf->Image( $logoFile, $logoXPos, $logoYPos, $logoWidth );
$pdf->WriteFixedPosHTML("<span> abc infotech<span>",550, 20, 50, 90, 'auto');
$pdf->WriteFixedPosHTML("<span> A-103, trimak co-op soc<span>",550, 25, 50, 90, 'auto');
$pdf->WriteFixedPosHTML("<span> vani ali, gandhi chowk<span>",550, 30, 50, 90, 'auto');
$pdf->WriteFixedPosHTML("<span> Badlapur(e) 421503<span>",550, 35, 50, 90, 'auto');
$pdf->WriteFixedPosHTML("<hr>",00, 44, 550, 55, 'auto');
$pdf->WriteFixedPosHTML("<div style='background-color:orange;'><span style='color:#000'>abc infotrch<span> <span stye='color:#000';>abcinfo#gmail.com</span> <span style='color:#000;'>contact : 9998898989</span></div>",50, 755, 1000, 5, 'auto');
// if(isset($_POST['pdfbtn'])){
if(!empty($_POST['checkboxtest'])) {
$htmlTable='<table border="1">
<tr>
<th>S. No.</th>
<th>Item code</th>
<th>Description</th>
<th>quantity</td>
<th>amount</th>
<th>service</th>
</tr>';
$i=1;
foreach($_POST['checkboxtest'] as $check) {
$htmlTable.='<tr>';
$htmlTable.='<td>'.$i;
$htmlTable.='</td>';
$htmlTable.='<td>'.$item_code[$i];
$htmlTable.='</td>';
$htmlTable.='<td>'. $item_desc[$i];
$htmlTable.='</td>';
$htmlTable.='<td>'.$quantity[$i];
$htmlTable.='</td>';
$htmlTable.='<td>'.$price[$i];;
$htmlTable.='</td>';
$htmlTable.='<td>'.$service[$i];
$htmlTable.='</td>';
$i++;
}
$htmlTable.='</tr>' ;
$htmlTable.='<tr> <td colspan=3> Total Amount </td>' ;
$htmlTable.='</tr> <td >'.$totamt.'</td></tr>' ;
$htmlTable.='<tr> <td colspan=3>Gst(18%) </td>' ;
$htmlTable.='</tr> <td >'.$gst.'</td></tr>' ;
$htmlTable.='<tr> <td colspan=3> Final Amount </td>' ;
$htmlTable.='</tr> <td >'.$final.'</td></tr>' ;
$htmlTable.='</table>';
}
// }
$pdf->WriteHTML($htmlTable);
$pdf->Output();
?>

Retrieve multiple data from 2 tables with php and jquery

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++;
}
}
?>

Categories