Develop Reference

How to auto compute values from database using JavaScript

I want to auto compute the remaining stock from inventory by typing in the input type named used. What I want to happen is after I type a number in 'Withdrawn' it should subtract to quantity then show the result to remaining stock. The values came from the database.
Here's what I did but I didn't work I don't know why can you please help me? I am still a beginner btw so correct my code if it looks wrong. Thank you
list.php:
<div class="modal fade" id="updatebtnmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Used</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="myForm" action="<?php echo base_url().'admin/inventory/updateused/'.$inv['i_id'];?>" method="POST"
class="form-container mx-auto shadow-container" style="width:80%" enctype="multipart/form-data">
<div class="form-group">
<input type="hidden" name="update_id" id="update_id">
<label for="cname">Category</label>
<input type="text" class="form-control my-2
<?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="cname" id="cname"
placeholder="Enter Item name" value="<?php echo set_value('cname',$inv['cat_id']); ?>" readonly>
<?php echo form_error('cname'); ?>
<span></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="update_id" id="update_id">
<label for="name">Item Name</label>
<input type="text" class="form-control my-2
<?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="name" id="name"
placeholder="Enter Item name" value="<?php echo set_value('name'); ?>" readonly>
<?php echo form_error('name'); ?>
<span></span>
</div>
<div class="form-group">
<label for="d_date">Delivered Date</label>
<input type="text" class="form-control my-2
<?php echo (form_error('d_date') != "") ? 'is-invalid' : '';?>" id="d_date" name="d_date"
placeholder="Delivered Date" value="<?php echo set_value('d_date'); ?>"readonly>
<?php echo form_error('d_date'); ?>
<span></span>
</div>
<div class="form-group">
<label for="used">Withdrawn</label>
<input type="number" class="form-control my-2
<?php echo (form_error('used') != "") ? 'is-invalid' : '';?>" id="used" name="used" class="used" onchange="calc()"
placeholder="Enter No. Withdrawn Items" value="<?php echo set_value('used'); ?>">
<?php echo form_error('used'); ?>
<span></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" class="form-control my-2
<?php echo (form_error('quantity') != "") ? 'is-invalid' : '';?>" id="quantity" name="quantity" class="quantity"
placeholder="Enter Quantity" value="<?php echo set_value('quantity'); ?>">
<?php echo form_error('quantity'); ?>
<span></span>
</div>
<div class="form-group">
<label for="exp_date">Expiration Date</label>
<input type="text" class="form-control my-2
<?php echo (form_error('e_date') != "") ? 'is-invalid' : '';?>" id="e_date" name="e_date"
placeholder="Expiration Date" value="<?php echo set_value('e_date'); ?>"readonly>
<?php echo form_error('e_date'); ?>
<span></span>
</div>
<div class="form-group">
<label for="rem_qty">Remaining Stock</label>
<input type="number" class="form-control my-2
<?php echo (form_error('rem_qty') != "") ? 'is-invalid' : '';?>" id="rem_qty" name="rem_qty" class="rem_qty"
placeholder="Enter No. Remaining Stock" >
<?php echo form_error('rem_qty'); ?>
<span></span>
</div>
</div>
</div>
<button type="submit" name="updatedata" class="btn btn-primary ml-2">Make Changes</button>
Back
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Js:
function calc() {
var quantity = document.getElementById("quantity").innerHTML;
var used = document.getElementById("used").value;
var rem_qty = parseFloat(quantity) - used
if (!isNaN(rem_qty))
document.getElementById("rem_qty").innerHTML = rem_qty
}

Try this javascript code
function calc() {
var quantity = document.getElementById("quantity").value;
var used = document.getElementById("used").value;
var rem_qty = 0;
if(quantity >= used){
rem_qty = parseFloat(quantity) - used;
}
if(rem_qty != 0){
document.getElementById("rem_qty").value = rem_qty
}
}
I hope this code will help you out.

Get the value of textbox then pass to another modal

I want to get the value of a textbox (the value of order_id, to be more specific) from ordermodal.php then pass it to ordermodal2.php. In order to use it in my query.
This is my code for ordermodal.php
include_once 'ordermodal2.php';
/** *ordermodal.php **/
$id = "";
$order_date = "";
$order_time = "";
$order_id = "";
$order_deliverCharge = "";
$order_status = "";
$order_totalAmount= "";
$coordinates = "";
$driver_number = "";
$address = "";
$food_name="";
$special_request="";
$quantity="";
$amount="";
$orders="";
?>
<!-- MODALS --> <!-- DETAILS -->
<div id="myModal" class="modal fade" role="dialog" style="z-index: 1400;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="" method="post" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><center>×</button>
<h4 class="modal-title" id="titleModal">Order Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="order_id" class="col-sm-2 control-label">Order ID</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="ORDER_ID" id="ORDER_ID" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">User ID</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="user_id" id="user_id" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_date" class="col-sm-2 control-label">Order Date</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_date" id="order_date" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_time" class="col-sm-2 control-label">Order Time</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_time" id="order_time" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_deliverCharge" class="col-sm-2 control-label">Delivery Charge</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_deliveryCharge" id="order_deliveryCharge" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_totalAmount" class="col-sm-2 control-label">Total Amount</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_totalAmount" id="order_totalAmount" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="address" id="address" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="coordinates" class="col-sm-2 control-label">Coordinates</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="coordinates" id="coordinates" placeholder="" value="" required="required" maxlength="11" readonly>
</div>
</div>
<div class="form-group">
<label for="driver_number" class="col-sm-2 control-label">Driver Number</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="driver_number" id="driver_number" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label">Order Status</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_status" id="order_status" placeholder="" value="" required="required" readonly>
</div>
</div>
<?php
$order_id = trim(addslashes($_POST['ORDER_ID']));
$sql = "SELECT food_name, special_request, quantity, amount
FROM cart_tbl
WHERE order_id=$order_id";
$result = mysqli_query(connection(), $sql);
?>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Food</th>
<th>Special Request</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<?php
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["food_name"];?></td>
<td><?php echo $row["special_request"];?></td>
<td><?php echo $row["quantity"];?></td>
<td><?php echo $row["amount"];?></td>
</tr>
<?php
}
}
?>
</table>
<tbody>
</div>
<div class="modal-footer">
<button type="submit" input style="background-color:#4CAF50;color:white" name="submitDelivered" id="submitDelivered" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to deliver order?')){return false;}" > Delivered </button>
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['ORDER_ID'] ?>')"> Send </button>
<button type="submit" input style="background-color:#f44336;color:white" name="submitCancel" class="btn btn-danger" onclick="if(!confirm('Are you sure you want to cancel order?')){return false;}">Cancel</button>
<?php
if(isset($_POST['submitDelivered'])){
$ororder_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Delivered' WHERE `order_id` = $order_id";
if (mysqli_query(connection(), $query)) {
mysqli_query(connection(), "COMMIT");
$_SESSION['message'] = "Order Delivered"; }
else {
$_SESSION['message'] = mysqli_error(connection());
mysqli_query(connection(), "ROLLBACK");
}
}
if(isset($_POST['submitAccept'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Accepted' WHERE `order_id` = $order_id";
if (mysqli_query(connection(), $query)) {
mysqli_query(connection(), "COMMIT");
$_SESSION['message'] = "Order Accepted"; }
else {
$_SESSION['message'] = mysqli_error(connection());
mysqli_query(connection(), "ROLLBACK");
}
}
if(isset($_POST['submitCancel'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Cancelled' WHERE `order_id` = $order_id";
if (mysqli_query(connection(), $query)) {
mysqli_query(connection(), "COMMIT");
$_SESSION['message'] = "Order Cancelled"; }
else {
$_SESSION['message'] = mysqli_error(connection());
mysqli_query(connection(), "ROLLBACK");
}
}
?>
</div>
</form>
</div>
</div>
</div>
<script>
function send(order_id) {
document.getElementById("titleModal2").innerHTML = "Choose Driver";
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementsByName("send")[0].setAttribute("name", "send");
}
</script>
And this is the code for my ordermodal2.php
<!-- Modal -->
<div class="modal fade" id="myDropdown" role="dialog" style="z-index: 1600;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form action="" method="post" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title" id="titleModal2">Choose Driver</h4>
</div>
<div class="modal-body" >
<div class="form-group">
<label for="order_id" class="col-sm-2 control-label">Order ID</label>
<div class="col-lg-3">
<input type="text" input style="width:450px" class="form-control" name="ORDER_ID_MODAL_2" id="ORDER_ID_MODAL_2" placeholder="" value="" required="required" readonly>
</div>
</div>
<strong> Select Driver : </strong>
<select name="empName">
<option value=""> -----------ALL----------- </option>
<?php
$databaseHost = "localhost";
$databaseUser = "";
$databasePassword = "";
$databaseName = "";
$con=mysql_connect($databaseHost ,$databaseUser ,$databasePassword )or die ('Connection Error');
mysql_select_db("",$con) or die ('Database Error');
$dd_res=mysql_query("SELECT driver_number FROM driver_tbl");
while($r=mysql_fetch_row($dd_res))
{
echo "<option value='$r[0]'> $r[0] </option>";
}
?>
</select>
</div>
<div class="modal-footer">
<button type="submit" input style="background-color:#FFFF00;color:black" name="send" class="btn btn-primary"onclick="if(!confirm('Are you sure you want to send order?')){return false;}" >Confirm!</button>
<?php
if(isset($_POST['send'])){
$order_id = trim(addslashes($_POST['ORDER_ID_MODAL_2']));
$query = "UPDATE order_tbl SET `order_status`='Dispatched' WHERE `order_id` = $order_id";
if (mysqli_query(connection(), $query)) {
mysqli_query(connection(), "COMMIT");
$_SESSION['message'] = "Order Dispatched"; }
else {
$_SESSION['message'] = mysqli_error(connection());
mysqli_query(connection(), "ROLLBACK");
}
}
?>
</div>
</form>
</div>
</div>
</div>
The output will be: when I click the send button in ordermodal then the ordermodal2 will popup obviously,then the Order Id textbox have a value in it already when send button from ordermodal is clicked(the value is same with the ordermodal.php) then when i click the send button in ordermodal2(this is where i need that value) it will change the driver status to dispatched. I hope you can help me with my problem. TIA!

From reading your code, it looks like it should be simple.....
Change
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
To
document.getElementsByName("ORDER_ID_MODAL_2")[0].value('<?php echo $order_id?>');

populate field with data from DB in Modal Bootstrap 3 using Codeigniter and jquery

im using bootstrap 3 framework and codeigniter 3, i want to edit a row from table but i want to display row in thier field in modal
Code Html of table
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Nom et prénom</th>
<th>Age</th>
<th>Sexe</th>
<th>Assurance</th>
<th>Téléphone</th>
<th>E-mail</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
foreach ($query->result() as $row)
{
?>
<tr>
<td><?php echo $row->no_dossier_pt; ?></td>
<td><?php echo $row->nom_pt .' '. $row->prenom_pt ?></td>
<?php
$date = new DateTime($row->datenaissance_pt);
$now = new DateTime();
$interval = $now->diff($date);
?>
<td><?php echo $interval->y .' ans'; ?></td>
<td><?php echo $row->sexe_pt; ?></td>
<td><?php echo $row->assurance_pt; ?></td>
<td><?php echo $row->telephone_pt; ?></td>
<td><?php echo $row->email_pt; ?></td>
<td>
<a type="button" href="<?php echo base_url() ?>patient/patient_delete/<?php echo $row->id; ?>" class="btn btn-danger">Supprimer</a>
<a type="button" data-toggle="modal" href="#editpatient" data-id="<?php echo $row->id; ?>" class="btn btn-warning" >Editer</a>
<?php $this->load->view('template/patient_update'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php
$this->load->view('template/footer');
?>
but i can't understand how can i pass 'id' of this row to the controller and return the specific data row from controller to thier field in Modal form,
this is code of button
<a type="button" data-toggle="modal" href="#editpatient" data-id="<?php echo $row->id; ?>" class="btn btn-warning" >Editer</a>
and my Modal form Code
<!-- Modal -->
<div class="modal fade" id="editpatient" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Information patient 2</h4>
</div>
<!-- formulaire -->
<?php echo form_open('patient/patient_update'); // action to the controller?>
<div class="modal-body">
<!-- hidden input montinned with class sr-only -->
<label class="sr-only" =""></label>
<input type="text" name="no_dossier_pt" class="sr-only" >
<div class="form-group">
<input type="text" class="form-control" id="nom_pt" name="nom_pt" id="nom_pt" placeholder="Nom ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="prenom_pt" name="prenom_pt" id="prenom_pt" placeholder="Prénom ....">
</div>
<div class="form-group">
<label for="exampleInputFile">Sexe : </label>
<input type="radio" name="sexe_pt" id="radio-choice-1" value="homme" checked="checked" />
<label for="radio-choice-1"> Homme </label>
<input type="radio" name="sexe_pt" id="radio-choice-2" value="femme" />
<label for="femme"> Femme </label>
<input type="radio" name="sexe_pt" id="radio-choice-3" value="enfant" />
<label for="enfant">Enfant</label>
</div>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">Assurance : </label>
<input type="radio" name="assurance_pt" id="radio-choice-1" value="oui" checked="checked" />
<label for="radio-choice-1"> Oui </label>
<input type="radio" name="assurance_pt" id="radio-choice-2" value="non" />
<label for="femme"> Non </label>
</div>
<div class="form-group">
<input type="text" class="form-control" name ="telephone_pt" placeholder="Téléphone ...">
</div>
<div class="form-group">
<input type="text" class="form-control" name ="email_pt" placeholder="Email ...">
</div>
<div class="form-group">
<textarea class="form-control" cols="40" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
<!-- Modal -->
Controller Methode to display
public function patient_selectbyid()
{
$data = array();
$id = $this->input->post('pt_id');
$this->load->model('patient_model');
$data = $this->studentModel->getStudent($id);
echo $data;
}
Code jquery
$(document).ready(function() {
var id_edit = $(this).data('id');
var base_url = <? php echo base_url('patient/patient_selectbyid'); ?> ;
$('.editStudent').click(function() {
$.ajax({
url: base_url,
type: 'POST',
data: {
'pt_id': id_edit
},
dataType: 'JSON';
success: function(result) {
$('.modal-body #nom_pt').val(result[0].nom_pt);
$('.modal-body #prenom_pt').val(result[0].prenom_pt);
}
});
});
});
I hope someone can help me coding this, thanks you

thanks brother for your recommandations , i had resolve the problem by using event listner as you say, i just sent data DB using data attribute in the button like this:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#editPatient" data-id="<?php echo $row->id ?>" data-nom="<?php echo $row->nom_pt ?>" data-prenom="<?php echo $row->prenom_pt ?>" data-nod="<?php echo $row->no_dossier_pt ?>" data-sexe="<?php echo $row->sexe_pt; ?>" data-dn="<?php echo $row->datenaissance_pt; ?>" data-assur="<?php echo $row->assurance_pt; ?>" data-tele="<?php echo $row->telephone_pt; ?>" data-email="<?php echo $row->email_pt; ?>" data-note="<?php echo $row->note_pt; ?>" >
Modifier
the modal like this
<!-- Modal -->
<div class="modal fade" id="editPatient" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Information patient </h4>
</div>
<div class="modal-body">
<!-- formulaire -->
<?php echo form_open('patient/patient_update'); ?>
<label class="sr-only" =""></label>
<input type="text" name="id" class="sr-only" id="id_hidd" >
<div class="form-group">
<input type="text" class="form-control" id="nom_pt" name="nom_pt" placeholder="Nom ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="prenom_pt" name="prenom_pt" placeholder="Prénom ....">
</div>
<div class="form-group">
<label for="exampleInputFile">Sexe : </label>
<input type="radio" name="sexe" id="homme" value="homme" checked="checked" />
<label for="homme"> Homme </label>
<input type="radio" name="sexe" id="femme" value="femme" />
<label for="femme"> Femme </label>
<input type="radio" name="sexe" id="enfant" value="enfant" />
<label for="enfant">Enfant</label>
</div>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">Assurance : </label>
<input type="radio" name="assurance" id="assur" value="oui" checked="checked" />
<label for="radio-choice-1"> Oui </label>
<input type="radio" name="assurance" id="nonassur" value="non" />
<label for="femme"> Non </label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="telephone_pt" name ="telephone_pt" placeholder="Téléphone ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id ="email_pt" name ="email_pt" placeholder="Email ...">
</div>
<div class="form-group">
<textarea class="form-control" cols="40" id="note_pt" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
script that recive data and displayed on Modal form like this:
<script type="text/javascript">
$('#editPatient').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id')
var prenom = button.data('prenom')
var nom = button.data('nom')
var nod = button.data('nod')
var sexe = button.data('sexe')
var dn = button.data('dn')
var tele = button.data('tele')
var email = button.data('email')
var note = button.data('note')
if (sexe == 'femme'){
var id_sexe = "femme"
document.getElementById(id_sexe).setAttribute("checked", "checked")
}
if (sexe == 'homme'){
var id_sexe = "homme"
document.getElementById(id_sexe).checked = true
}
if (sexe == 'enfant'){
var id_sexe = "enfant"
document.getElementById(id_sexe).checked = true
}
if (assur == 'oui'){
var id_assur = "assur"
document.getElementById(id_assur).checked = true
}
if (assur == 'non'){
var id_assur = "nonassur"
document.getElementById(id_assur).checked = true
}
var modal = $(this)
modal.find('.modal-title').text('Modifier patient ('+nod+')')
modal.find('.modal-body #id_hidd').val(id)
modal.find('.modal-body #nom_pt').val(nom)
modal.find('.modal-body #prenom_pt').val(prenom)
modal.find('.modal-body #date').val(dn)
modal.find('.modal-body #telephone_pt').val(tele)
modal.find('.modal-body #email_pt').val(email)
modal.find('.modal-body #note_pt').val(note)
})
</script>
thanks for your help if you have any other suggestion or question i'll be gratfull

javascript - stop refresh if error is returned from php

I was wondering whether it would be possible to add something to my javascript which would allow a refresh if the form is submitted fine however will not refresh the page if an error is returned back from PHP.
is this possible? if so could anyone provide me with any guidance that will help me achieve this please. I have manage to get the javascript to refresh when the form is submitted and a message is returned.
this is the js:
function addCall() {
var data = $('#addForm').serialize();
$.post('../Admin/ManageCourses_AddSubmit.php', data, function(response){
$("#addForm").html(response);
//'soft'reload parent page, after a delay to show message
setTimeout(function(){
$('#addModal').modal('hide')
location.reload();
},3500);
}).fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
and the php which processes the form and validates it:
<?php
session_start();
if (empty($_POST['course_title'])) {
$message = " Value is required";
}
else {
$course_title = trim($_POST['course_title']);
# Validate Course #
if (!ctype_alpha($course_title)) {
$message = '<p class="error">Course title should be alpha characters only.</p>';
}
elseif (strlen($course_title) < 3 OR strlen($course_title) > 50) {
$message = '<p class="error">Course title should be within 3-50 characters long.</p>';
}
else {
include "../includes/db_conx.php";
try
{
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = $db_conx->prepare("INSERT INTO `insights`.`course_details` (`course_title`) VALUES (:course_title)");
$sql->bindParam(':course_title', $course_title, PDO::PARAM_STR);
$sql->execute();
$message = "<p class='text-success'> Record Successfully Added <span class='glyphicon glyphicon-ok'/></p>";
}
catch(Exception $e) {
if( $e->getCode() == 23000)
{
$message = 'Course already exists in database';
}
else
{
$message = $e->getMessage();
}
}
}
}
die($message);
?>
It would really useful to the user to be able to make amendments to the form instead of rewriting it all again.
the form:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Add New Record: </h4>
</div>
<div class="modal-body">
<form id="addForm" class="addForm">
<div class="form-group">
<label class="control-label" for="forename">Forename:</label>
<div class="controls">
<input id="forename" name="forename" type="text" placeholder="Enter forename(s)" class="form-control" maxlength="100" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="surname">Surname:</label>
<div class="controls">
<input id="surname" name="surname" type="text" placeholder="Enter surname" class="form-control" maxlength="100" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="email">Email:</label>
<div class="controls">
<input id="email" name="email" type="email" placeholder="Enter a valid email" class="form-control" maxlength="255" value="" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="username">Username:</label>
<div class="controls">
<input id="username" name="username" type="text" placeholder="username" class="form-control" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" type="password" placeholder="password" class="form-control" maxlength="40" required="">
</div>
</div>
<div class="form-group">
<label class="control-label" for="confirm_password">Confirm Password:</label>
<div class="controls">
<input id="confirm_password" name="confirm_password" type="password" placeholder="retype password" class="form-control" maxlength="40" required="">
</div>
</div>
<?php
include "../includes/db_conx.php";
try {
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt2 = $db_conx->prepare('SELECT * FROM role_type');
$stmt2->execute();
$roles = $stmt2->fetchAll(PDO::FETCH_ASSOC);
}
catch(Exception $e)
{
die ("Could not connect to the database $mysql_dbname :" . $e->getMessage());
}
?>
<div class="control-group">
<label class="control-label" for="role_type">Select User Type:</label><p></p>
<select name="role">
<option value=''>Select One</option>";
<?php foreach($roles as $role): ?>
<option value="<?php echo $role['role_type_code'] ?>"><?php echo $role['role_title'] ?></option>
<?php endforeach ?>
</select>
</div>
<p></p>
<?php
include "../includes/db_conx.php";
try {
$db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt3 = $db_conx->prepare('SELECT * FROM course_details ORDER BY course_title');
$stmt3->execute();
$courses = $stmt3->fetchAll(PDO::FETCH_ASSOC);
}
catch(Exception $e)
{
die ("Could not connect to the database $mysql_dbname :" . $e->getMessage());
}
?>
<div class="control-group">
<label class="control-label" for="course_details">Select Course:</label><p></p>
<select name="course">
<option value=''>Select One</option>";
<?php foreach($courses as $course): ?>
<option value="<?php echo $course['course_code'] ?>"><?php echo $course['course_title'] ?></option>
<?php endforeach ?>
</select>
</div>
<input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
</form>
</div>
<div class="modal-footer">
<div class="btn-toolbar">
<button type="button" class="btn btn-default" class="pull-right" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" class="pull-right" onclick="addUCall();">Submit <span class="glyphicon glyphicon-saved"></button>
</div>
</div>
</div>
</div>
</div>
Thank you in advance.

Your message variable contain both error and success message. It will reload page every time when it receives response.
Add this after $("#addForm").html(response); -
var n = response.search("class=\'text-success\'");
if(n!=-1){
//reload success
}
else{
//stay on page, errors
}

As you're returning the error messages in the response, check for the error class and do the reload if necessary.
$.post('../Admin/ManageCourses_AddSubmit.php', data, function(response){
if(response.contains("text-success")) {
// put your logic here for success
} else {
// logic for errors
}
});

How to pass a variable from a page to other in php

I have a page *book_order*,which is used to add orders into a table *order_management*, where order_id is auto incremented in that table. once after submit this page i want the order_id to be passed to other page *book_order2* to add products under same order_id. For that i have created seperete *order_management2* table in which order_id is not auto-incremented.
My requirement is that i want to pass order_id from book_order page to book_order2 page and that variable is to be remembered till i do keep on adding....if i want to add new order, i will go to book_order page, else i will use book_order2 page.
book_order.php
<div class="grid_4">
<div class="da-panel">
<div class="da-panel-header">
<span class="da-panel-title">
<img src="images/icons/color/wand.png" alt="" />
<font face="Cambria" size="7" color="#009900"><b>Book Order</b></font>
</span>
</div>
<div class="da-panel-toolbar top">
<ul>
<li><div class="da-button blue large">View all Orders</div></li>
</ul>
</div>
<div class="da-panel-content">
<?php
if(isset($_POST['submit']))
{
extract($_POST);
$order_date=date("Y-m-d");
$sql=mysql_query("select sku,quantity_in_stock,sold_quantity,crdate from stock_info where product_name = '$prod'");
$array=mysql_fetch_array($sql);
$sku = $array[0];
$qis = $array[1];
$sold_quan = $array[2];
$crdate = $array[3];
$sql2=mysql_query("INSERT INTO order_management(order_date,brand,product,price,customer_name,phone_number,email,address,quantity,channel,courier,order_status,sku)
VALUES
('$order_date','$brand','$prod','$pri','$customername','$phonenumber', '$email','$address','$quantity','$channel','$courier','booked','$sku')");
if($sql2)
{
echo "<div class='da-message success'>Successfully Booked Your Order</div>";
?>
<script>
var r = confirm("want to add more products?");
if (r == true)
{
//x="You pressed OK!";
window.location = "main.php?page=book_order2";
}
else
{
//x="You pressed Cancel!";
window.location = "main.php";
}
</script>
<?php
}
else
{
die(mysql_error());
}
$quantity_left = $qis - $quantity;
$sold_quan = $sold_quan + $quantity;
$diff_in_days = (strtotime($order_date) - strtotime($crdate))/(60 * 60 * 24);
$expctd_stock=round((7*$quantity_left)/$diff_in_days);
//echo $expctd_stock;
$sql3 =mysql_query("UPDATE stock_info SET quantity_in_stock = '$quantity_left',last_sold_date='$order_date', sold_quantity='$sold_quan', expected_stock='$expctd_stock' WHERE sku='$sku'");
/*$sql3 = mysql_query("update order_management set sku='$sku' where order_date=''");*/
$sql4 =mysql_query("select order_id from order_management where sku='$sku'");
$idarray=mysql_fetch_array($sql4);
$id = $idarray[0];
//$_SESSION['id'] = $id;
}
?>
<form id="da-ex-validate1" class="da-form" method="post" action="">
<div class="da-form-row">
<label>Brand<span class="required">*</span></label>
<div class="da-form-item small">
<!--<input type="text" name="brand" id="brand" class="required" value=""/>-->
<select name="brand" id="brand" onChange="retrievedata(this.value)">
<option value="">--- select brand ---</option>
<?php
$ord=mysql_query("select * from brand_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['brand'];?>"><?php echo $ord1['brand'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Product<span class="required">*</span></label>
<div class="da-form-item small">
<select name="prod" id="prod" onChange="retrievequantity(this.value)">
<option value="">--- select product ---</option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Customer name<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="customername" id="customername" class="required char" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Phone Number<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="phonenumber" id="phonenumber" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Email<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="email" id="email" class="required email" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Address<span class="required">*</span></label>
<div class="da-form-item small">
<textarea name="address" id="address" class="required"></textarea>
</div>
</div>
<div class="da-form-row">
<label>Quantity<span class="required">*</span></label>
<div class="da-form-item small">
<select name="quantity" id="quantity">
<option value=""> --- select Quantity--- </option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Total Price<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="pri" id="pri" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Courier<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="courier" id="courier" class="required" value=""/>-->
<select name="courier" id="courier">
<option value=""> ---select courier --- </option>
<?php
$ord=mysql_query("select courier_name from courier_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['courier_name'];?>"><?php echo $ord1['courier_name'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Channel<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="channel" id="channel" class="required" value=""/>-->
<select name="channel" id="channel">
<option value=""> --- select channel ---</option>
<?php
$ord=mysql_query("select channel from channel_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['channel'];?>"><?php echo $ord1['channel'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-button-row">
<input type="submit" name="submit" value="submit" class="da-button grey" />
</div>
</fieldset>
</form>
</div>
<!-- End of .grid_4 --> </div>
</div>
<script>
function retrievedata(data)
{
var option_html = "";
<?php
$sql=mysql_query("SELECT distinct brand,product_name FROM stock_info");
while($ord1=mysql_fetch_array($sql))
{
?>
if(data == '<?php echo $ord1['brand']; ?>')
{
option_html += "<option><?php echo $ord1['product_name']; ?></option>";
/*alert(option_html);*/
}
<?php
}
?>
var par = document.getElementById("prod");
par.innerHTML = "<option>--- select product ---</option>"+option_html;
}
function retrievequantity(product)
{
var option_quantity_html = "";
<?php
$sql=mysql_query("SELECT product_name, quantity_in_stock FROM stock_info");
while($ord2=mysql_fetch_array($sql))
{
$i=1;
?>
if(product == '<?php echo $ord2['product_name']; ?>')
{
<?php
while($i<=intval($ord2['quantity_in_stock'])){?>
option_quantity_html += "<option><?php echo $i++; ?></option>";
<?php }?>
}
<?php
}
?>
var par = document.getElementById("quantity");
par.innerHTML = option_quantity_html;
}
</script>
book_order2.php
<?php /*?><?php
$id = $_SESSION['id'];
echo $id;
?><?php */?>
<?php
include("includes/db.php");
?>
<div class="grid_4">
<div class="da-panel">
<div class="da-panel-header">
<span class="da-panel-title">
<img src="images/icons/color/wand.png" alt="" />
<font face="Cambria" size="7" color="#009900"><b>Book Order</b></font>
</span>
</div>
<div class="da-panel-toolbar top">
<ul>
<li><div class="da-button blue large">View all Orders</div></li>
</ul>
</div>
<div class="da-panel-content">
<?php
if(isset($_POST['submit']))
{
extract($_POST);
$order_date=date("Y-m-d");
$sql=mysql_query("select sku,quantity_in_stock,sold_quantity,crdate from stock_info where product_name = '$prod'");
$array=mysql_fetch_array($sql);
$sku = $array[0];
$qis = $array[1];
$sold_quan = $array[2];
$crdate = $array[3];
$sql2=mysql_query("INSERT INTO order_management2(order_id,order_date,brand,product,price,customer_name,phone_number,email,address,quantity,channel,courier,order_status,sku)
VALUES
('$id','$order_date','$brand','$prod','$pri','$customername','$phonenumber', '$email','$address','$quantity','$channel','$courier','booked','$sku')");
if($sql2)
{
echo "<div class='da-message success'>Successfully Booked Your Order</div>";
?>
<script>
var r = confirm("want to add more products?");
if (r == true)
{
//x="You pressed OK!";
window.location = "main.php?page=book_order2";
}
else
{
//x="You pressed Cancel!";
window.location = "main.php";
}
</script>
<?php
}
else
{
die(mysql_error());
}
$quantity_left = $qis - $quantity;
$sold_quan = $sold_quan + $quantity;
$diff_in_days = (strtotime($order_date) - strtotime($crdate))/(60 * 60 * 24);
$expctd_stock=round((7*$quantity_left)/$diff_in_days);
//echo $expctd_stock;
$sql3 =mysql_query("UPDATE stock_info SET quantity_in_stock = '$quantity_left',last_sold_date='$order_date', sold_quantity='$sold_quan', expected_stock='$expctd_stock' WHERE sku='$sku'");
/*$sql3 = mysql_query("update order_management set sku='$sku' where order_date=''");*/
//$sql4 =mysql_query("select order_id from order_management where sku='$sku'");
//$idarray=mysql_fetch_array($sql4);
}
?>
<form id="da-ex-validate1" class="da-form" method="post" action="">
<div class="da-form-row">
<label>Brand<span class="required">*</span></label>
<div class="da-form-item small">
<!--<input type="text" name="brand" id="brand" class="required" value=""/>-->
<select name="brand" id="brand" onChange="retrievedata(this.value)">
<option value="">--- select brand ---</option>
<?php
$ord=mysql_query("select * from brand_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['brand'];?>"><?php echo $ord1['brand'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Product<span class="required">*</span></label>
<div class="da-form-item small">
<select name="prod" id="prod" onChange="retrievequantity(this.value)">
<option value="">--- select product ---</option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Customer name<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="customername" id="customername" class="required char" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Phone Number<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="phonenumber" id="phonenumber" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Email<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="email" id="email" class="required email" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Address<span class="required">*</span></label>
<div class="da-form-item small">
<textarea name="address" id="address" class="required"></textarea>
</div>
</div>
<div class="da-form-row">
<label>Quantity<span class="required">*</span></label>
<div class="da-form-item small">
<select name="quantity" id="quantity">
<option value=""> --- select Quantity--- </option>
</select>
</div>
</div>
<div class="da-form-row">
<label>Total Price<span class="required">*</span></label>
<div class="da-form-item small">
<input type="text" name="pri" id="pri" class="required number" value=""/>
</div>
</div>
<div class="da-form-row">
<label>Courier<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="courier" id="courier" class="required" value=""/>-->
<select name="courier" id="courier">
<option value=""> ---select courier --- </option>
<?php
$ord=mysql_query("select courier_name from courier_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['courier_name'];?>"><?php echo $ord1['courier_name'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-form-row">
<label>Channel<span class="required"></span></label>
<div class="da-form-item small">
<!--<input type="text" name="channel" id="channel" class="required" value=""/>-->
<select name="channel" id="channel">
<option value=""> --- select channel ---</option>
<?php
$ord=mysql_query("select channel from channel_info");
while($ord1=mysql_fetch_array($ord))
{
?>
<option value="<?php echo $ord1['channel'];?>"><?php echo $ord1['channel'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="da-button-row">
<input type="submit" name="submit" value="submit" class="da-button grey" />
<?php /*?><a href="book_order2.php?&id=<?php echo $id; ?>" name="submit" value="submit" class="da-button grey">Book Order</a<?php */?>
</div>
</fieldset>
</form>
</div>
<!-- End of .grid_4 --> </div>
</div>
<script>
function retrievedata(data)
{
var option_html = "";
<?php
$sql=mysql_query("SELECT distinct brand,product_name FROM stock_info");
while($ord1=mysql_fetch_array($sql))
{
?>
if(data == '<?php echo $ord1['brand']; ?>')
{
option_html += "<option><?php echo $ord1['product_name']; ?></option>";
/*alert(option_html);*/
}
<?php
}
?>
var par = document.getElementById("prod");
par.innerHTML = "<option>--- select product ---</option>"+option_html;
}
function retrievequantity(product)
{
var option_quantity_html = "";
<?php
$sql=mysql_query("SELECT product_name, quantity_in_stock FROM stock_info");
while($ord2=mysql_fetch_array($sql))
{
$i=1;
?>
if(product == '<?php echo $ord2['product_name']; ?>')
{
<?php
while($i<=intval($ord2['quantity_in_stock'])){?>
option_quantity_html += "<option><?php echo $i++; ?></option>";
<?php }?>
}
<?php
}
?>
var par = document.getElementById("quantity");
par.innerHTML = option_quantity_html;
}
</script>

You can store the order number in the session. This way, it will be protected and persisted across pages.
When you insert the order in book_order.php, store it in the session:
$sql2=mysql_query(....); // inserting
if($sql2){
$_SESSION['order_id'] = mysql_insert_id();
}
Now, in book_order2.php you can retrieve the order ID before you do the insert of the product:
$id = $_SESSION['order_id'];
// insert product with order_id = $id
In order to use PHP sessions, you must calll session_start() at the beginning of any script that makes use of the session. If you have a global/header include then you can do it there.
Side notes:
mysql_* is deprecated. Consider upgrading to PDO or MySQLi. This is a good PDO tutorial, especially if you're upgrading from mysql_*.
Use a Prepared Statement with bound parameters instead of concatenating variables into SQL.

I would use ajax. For example:
$(document).ready(function()
{
$("form").on('submit',function(event)
{
event.preventDefault();
data = "var=data";
$.ajax
({
type: "GET",
url: "parser.php",
data: data
}).done(function(msg)
{
alert(msg);
});
});
});
It will send GET into parser.php. And the data field would be data in $_GET['var']