This tutorial will teach you how to make a inventory management system using php with jquery.this example is very useful for your future inventory project.
Paste the code inside the index.php page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <!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.
