This tutorial will teach you how to make a simple inventory management system using php with jquery.this example is very useful for your future inventory project.if you an interested to learn inventory management using php this is the right place where you learn.
Paste the code inside the index.php page.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Fish Shop</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="card" style="width: 18rem;">
<div class="card-body">
<div class="card-title"><h3>Fish Shop GR KG Calculation 1 kg - 140</h3></div>
<div class="card-title">
<img src="images/fish.jpg" width="200" height="150">
</div>
<div>
<form>
<div class="form-group">
<label>Qty </label>
<input type="text" class="form-control" id="qty" name="qty" placeholder="Qty">
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control" id="option" name="option"
placeholder="Option" required>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</div>
<div class="form-group">
<label>Total Amount</label>
<input type="text" class="form-control" id="calamount" name="calamount" placeholder="CalAmount">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function() {
$('#option').change(function() {
if ($(this).val() == 2){
var calamount = (
Number($("#qty").val())* 140 );
$("#calamount").val(calamount);
}
if ($(this).val() == 1){
var calamount = ( Number($("#qty").val()) /1000 * 140 );
$("#calamount").val(calamount);
}
});
});
</script>
</body>
</html>
I have attached the video tutorial below it will help you to do this step by step.