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.

Image seclection not working properly in Add / Remove Fields

I have created Add / Remove fields to collect data such as Member Pic, Member name, Member Email, Member Role, and Member FB Id. Everything is working perfectly.
The only problem I am facing is that when I want to change the already saved image of a member with a new one, then it changes the first image only. Means If I try to change the second or third or next member's image it updates the first image only. This happens only with the pre-saved images only.
If I add a new member then it works perfectly.
Following is the code:
<div class="card">
<div class="card-header text-center">
<b>Team Members</b>
</div>
<div class="card-body">
<?php
$member_details = $wpdb->get_var( $wpdb->prepare( "SELECT member_details FROM {$wpdb->prefix}project_members WHERE author_id = %s AND project_id = %s", $current_user_id, $project_id ) );
$member_details_decode = json_decode( $member_details, true );
?>
<div class="row">
<div class="col-md-4">
<?php
if ( ! empty( $member_details_decode['member_images'][0] ) ) { ?>
<img src="<?php echo site_url( '/wp-content/img/member-images/' ); echo $member_details_decode['member_images'][0]; ?>" class="img-thumbnail" id="output_member0">
<?php } else { ?>
<img src="<?php echo site_url( '/wp-content/assets/img/blank-image.png' ); ?>" class="img-thumbnail" id="output_member0">
<?php }
?>
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]" value="<?php if ( $member_details_decode['member_names'][0] != '' ) echo esc_attr( $member_details_decode['member_names'][0] ); ?>">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]" value="<?php if ( $member_details_decode['member_emails'][0] != '' ) echo esc_attr( $member_details_decode['member_emails'][0] ); ?>">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]" value="<?php if ( $member_details_decode['member_roles'][0] != '' ) echo esc_attr( $member_details_decode['member_roles'][0] ); ?>">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]" value="<?php if ( $member_details_decode['member_fbs'][0] != '' ) echo esc_attr( $member_details_decode['member_fbs'][0] ); ?>">
</div>
</div>
</div>
<?php
$member_count = count( $member_details_decode['member_images'] );
for ( $i=1; $i < $member_count; $i++ ) { ?>
<div class="all-member-fields"><hr>
<div class="row">
<div class="col-md-4">
<?php
if ( ! empty( $member_details_decode['member_images'][$i] ) ) { ?>
<img src="<?php echo site_url( '/wp-content/img/member-images/' ); echo $member_details_decode['member_images'][$i]; ?>" class="img-thumbnail" id="output_member0">
<?php } else { ?>
<img src="<?php echo site_url( '/wp-content/assets/img/blank-image.png' ); ?>" class="img-thumbnail" id="output_member0">
<?php }
?>
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]" value="<?php if ( $member_details_decode['member_names'][$i] != '' ) echo esc_attr( $member_details_decode['member_names'][$i] ); ?>">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]" value="<?php if ( $member_details_decode['member_emails'][$i] != '' ) echo esc_attr( $member_details_decode['member_emails'][$i] ); ?>">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]" value="<?php if ( $member_details_decode['member_roles'][$i] != '' ) echo esc_attr( $member_details_decode['member_roles'][$i] ); ?>">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]" value="<?php if ( $member_details_decode['member_fbs'][$i] != '' ) echo esc_attr( $member_details_decode['member_fbs'][$i] ); ?>">
</div>
</div>
</div>
<button type="button" class="btn btn-danger" id="remove-member-fields" style="float: right;">Remove Member</button><br><br></div>
<?php }
?>
<div id="member-fields">
</div>
<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>
</div>
</div>
My Javascript Code:
<script type="text/javascript">
var i = 0;
function preview_member(event, inp) {
var reader = new FileReader();
console.log(inp);
reader.onload = function() {
var output = document.getElementById('output_member' + inp);
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on("click", '#remove-member-fields', function(event) {
event.preventDefault();
$(this)
.parent()
.fadeOut(300, function() {
$(this).empty();
return false;
});
});
//add input
$('#add-member-fields').click(function() {
i++;
var rows = `<div class="all-member-fields"><hr><div class="row"><div class="col-md-4"><img src="<?php echo esc_url( site_url('/wp-content/assets/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-md-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger" id="remove-member-fields" style="float: right;">Remove Member</button><br><br></div>`;
$(rows)
.fadeIn("slow")
.appendTo('#member-fields');
return false;
});
});
</script>

You forgot to add your $i to preview_member() and to image id in your loop
Your preview_member() functions changes element with id output_member0 everytime.
In your for loop:
Change images ID from id="output_member0" to id="output_member<?= $i ?>" in your
Change onchange="preview_member(event, 0)" to onchange="preview_member(event, <?= $i ?>)"

Show uploading form only if video or image selected from dropdown

I have very simple form. I have one dropdown menu where default is text selected. I want show file uploading box only if we select image or video from dropdown menu. Its HTML/PHP page. I have tried to put javascript in my body tag but its not working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
$("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' :
'none');
});
</script>
my dropdown form is like this
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0" <?php if($row['type'] == "0") echo "selected"; ?>>Text</option>
<option value="1" <?php if($row['type'] == "1") echo "selected"; ?>>Image</option>
<option value="2" <?php if($row['type'] == "2") echo "selected"; ?>>Video</option>
</select>
</div>
My full page is like this
<?php include("includes/header.php");
require("includes/function.php");
require("language/language.php");
require_once("thumbnail_images.class.php");
if(isset($_POST['submit']) and isset($_GET['add']))
{
$picture_name=rand(0,99999)."_".$_FILES['picture_name']['name'];
$pic1=$_FILES['picture_name']['tmp_name'];
$tpath1='images/'.$picture_name;
copy($pic1,$tpath1);
$thumbpath='images/thumbs/'.$picture_name;
$obj_img = new thumbnail_images();
$obj_img->PathImgOld = $tpath1;
$obj_img->PathImgNew =$thumbpath;
$obj_img->NewWidth = 100;
$obj_img->NewHeight = 100;
if (!$obj_img->create_thumbnail_images())
{
echo $_SESSION['msg']="Thumbnail not created... please upload image again";
exit;
}
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type'],
'picture_name' => $picture_name
);
$qry = Insert('faq',$data);
$_SESSION['msg']="10";
header( "Location:faq.php");
exit;
}
if(isset($_GET['faq_id']))
{
$qry="SELECT * FROM faq where id ='".$_GET['faq_id']."'";
$result=mysqli_query($mysqli,$qry);
$row=mysqli_fetch_assoc($result);
}
if(isset($_POST['submit']) and isset($_POST['faq_id']))
{
if($_FILES['picture_name']['name']!="")
{
$img_res=mysqli_query($mysqli,'SELECT * FROM faq WHERE id='.$_GET['faq_id'].'');
$img_res_row=mysqli_fetch_assoc($img_res);
if($img_res_row['picture_name']!="")
{
unlink('images/thumbs/'.$img_res_row['picture_name']);
unlink('images/'.$img_res_row['picture_name']);
}
$picture_name=rand(0,99999)."_".$_FILES['picture_name']['name'];
$pic1=$_FILES['picture_name']['tmp_name'];
$tpath1='images/'.$picture_name;
copy($pic1,$tpath1);
$thumbpath='images/thumbs/'.$picture_name;
$obj_img = new thumbnail_images();
$obj_img->PathImgOld = $tpath1;
$obj_img->PathImgNew =$thumbpath;
$obj_img->NewWidth = 100;
$obj_img->NewHeight = 100;
if (!$obj_img->create_thumbnail_images())
{
echo $_SESSION['msg']="Thumbnail not created... please upload image again";
exit;
}
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type'],
'picture_name' => $picture_name
);
$faq_edit=Update('faq', $data, "WHERE id = '".$_POST['faq_id']."'");
}
else
{
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type']
);
$faq_edit=Update('faq', $data, "WHERE id = '".$_POST['faq_id']."'");
}
if ($faq_edit > 0)
{
$_SESSION['msg']="11";
header( "Location:add_faq.php?faq_id=".$_POST['faq_id']);
exit;
}
}
?>
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
$("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' :
'none');
});
</script>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="page_title_block">
<div class="col-md-5 col-xs-12">
<div class="page_title">Add FAQ</div>
</div>
</div>
<div class="clearfix"></div>
<div class="card-body mrg_bottom">
<form class="form form-horizontal" action="" method="post" enctype="multipart/form-data" onsubmit="return checkValidation(this);">
<input type="hidden" name="faq_id" value="<?php echo $_GET['faq_id'];?>" />
<div class="section">
<div class="section-body">
<div class="form-group">
<label class="col-md-3 control-label">FAQ Type :-</label>
<?php if(isset($_GET['faq_id'])) {?>
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0" <?php if($row['type'] == "0") echo "selected"; ?>>Text</option>
<option value="1" <?php if($row['type'] == "1") echo "selected"; ?>>Image</option>
<option value="2" <?php if($row['type'] == "2") echo "selected"; ?>>Video</option>
</select>
</div>
<?php } else {?>
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0">Text</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<?php }?>
</div>
<div class="form-group" id="upload" style="display: none">
<label class="col-md-3 control-label">Select File :-</label>
<div class="col-md-6">
<div class="fileupload_block" >
<input type="file" name="picture_name" value="fileupload" id="fileupload">
<?php if(isset($_GET['faq_id']) and $row['picture_name']!="") {?>
<div class="fileupload_img"><img type="image" src="images/<?php echo $row['picture_name'];?>" alt="category image" /></div>
<?php } else {?>
<div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
<?php }?>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Question :-</label>
</div>
<div class="col-md-6">
<textarea name="question" id="question" rows="1" class="form-control" ><?php if(isset($_GET['faq_id'])){echo $row['question'];}?></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Answer:-</label>
</div>
<div class="col-md-6">
<textarea name="answer" id="answer" rows="1" class="form-control" data-emojiable="true"><?php if(isset($_GET['faq_id'])){echo $row['answer'];}?></textarea>
</div>
</div>
<div class="form-group"> </div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<?php include("includes/footer.php");?>
Let me know if someone can correct, whats wrong in this.

Dropdown list set put selected value from database

I am trying to create a drop down menu that will select a value that is stored in the database. Right now the code creates a dropdown with the first option selected. I have read through several tutorials, and tried to apply them, but I cannot get this working. I hope someone can help.
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</div>
Whole code :
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include("../includes/connect.php");
if (isset($_SESSION['logged_in'])) {
if(isset($_POST['btnSlaOp'])) {
$id=$_POST['id'];
$uitgeleend=$_POST['uitgeleend'];
$nr=$_POST['nr'];
$model=$_POST['model'];
$serienummer=$_POST['serienummer'];
$capaciteit=$_POST['capaciteit'];
$uptodate=$_POST['uptodate'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql="UPDATE ipads SET uitgeleend='$uitgeleend', nr='$nr', model='$model', serienummer='$serienummer', capaciteit='$capaciteit', uptodate='$uptodate', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$result=$db->query($sql);
header("location:overzicht-ipads.php");
} else if (isset($_POST['btnSlaOpInGs'])) {
$id=$_POST['id'];
$uitgeleend=$_POST['uitgeleend'];
$nr=$_POST['nr'];
$model=$_POST['model'];
$serienummer=$_POST['serienummer'];
$capaciteit=$_POST['capaciteit'];
$uptodate=$_POST['uptodate'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql ="UPDATE ipads SET nr='$nr', model='$model', serienummer='$serienummer', capaciteit='$capaciteit', uptodate='$uptodate', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$sql .="INSERT INTO geschiedenis (SELECT * FROM ipads WHERE id='$id')";
$sql .="UPDATE ipads SET uitgeleend='Nee', persoon='', datumuitgeleend='', datumretour='', opmerking='' WHERE id='$id'";
$result=mysqli_multi_query($db, $sql);
header("location:overzicht-ipads.php");
}
if(isset($_GET['id'])) {
$id=$_GET['id'];
$sql="SELECT id, uitgeleend, nr, model, serienummer, capaciteit, uptodate, persoon, datumuitgeleend, datumretour, opmerking FROM ipads WHERE id='$id'";
$result=$db->query($sql);
$rij=$result->fetch_assoc();
$uitgeleend=$rij['uitgeleend'];
$nr=$rij['nr'];
$model=$rij['model'];
$serienummer=$rij['serienummer'];
$capaciteit=$rij['capaciteit'];
$uptodate=$rij['uptodate'];
$persoon=$rij['persoon'];
$datumuitgeleend=$rij['datumuitgeleend'];
$datumretour=$rij['datumretour'];
$opmerking=$rij['opmerking'];
include("../includes/get_header_wn.php");
?>
<h1 class="page-title">Wijzigen</h1>
<ul class="breadcrumb">
<li>Home </li>
<li class="active">Leen iPad <?php echo $nr ?></li>
</ul>
</div>
<form id="gegevensForm" class="col-xs-4" form method="POST" action="overzicht-ipads-edit.php">
<input type="hidden" name="id" value="<?php echo $id?>">
<div class="form-group">
<label>Uitgeleend</label>
<input type="text" class="form-control" name="uitgeleend" value="<?php echo $uitgeleend ?>" />
</div>
<div class="form-group">
<label>Nr</label>
<input type="text" class="form-control" name="nr" value="<?php echo $nr ?>" />
</div>
<div class="form-group">
<label>Model</label>
<input type="text" class="form-control" name="model" value="<?php echo $model ?>" />
</div>
<div class="form-group">
<label>Serienummer</label>
<input type="text" class="form-control" name="serienummer" value="<?php echo $serienummer ?>" />
</div>
<div class="form-group">
<label>Capaciteit</label>
<input type="text" class="form-control" name="capaciteit" value="<?php echo $capaciteit ?>" />
</div>
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</div>
<div class="form-group">
<label>Persoon</label>
<input type="text" class="form-control" name="persoon" value="<?php echo $persoon ?>" />
</div>
<div class="form-group">
<label>Datum uitgeleend</label>
<input type="text" id="datepicker" class="form-control" name="datumuitgeleend" value="<?php echo $datumuitgeleend ?>" />
</div>
<div class="form-group">
<label>Datum retour</label>
<input type="text" id="datepicker1" class="form-control" name="datumretour" value="<?php echo $datumretour ?>" />
</div>
<div class="form-group">
<label for="comment">Opmerking</label>
<textarea class="form-control" rows="5" id="comment" name="opmerking" /><?php echo $opmerking ?></textarea>
</div>
<button class="btn btn-primary pull-right" name="btnSlaOp" input type="submit"><i class="fa fa-save"></i> Opslaan</button>
<input type="button" name="btnCancel" value="Annuleer" class="btn btn-primary pull-left">
<button class="btn btn-primary pull-middle" name="btnSlaOpInGs" type="submit"><i class="fa fa-save"></i> Opslaan & Archiveren</button>
<?php
include('../includes/get_footer.php');
?>
</form>
<?php
}
} else {
header("location:overzicht-ipads.php");
}
?>

php: if($selectedVal == "yourVal") echo "selected";
e.g.:
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja" <?php if($selectedVal == "Ja") echo "selected";?>>Ja</option>
<option value="Nee" <?php if($selectedVal == "Nee") echo "selected";?>>Nee</option>
</select>
</div>
edit: in your case, replace $selectedVal with $uptodate

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']