Bootstrap Forms:

Bootstrap Discount Calculator using JS

On most online shops, you may have seen the forms with prices and discounts. In this post, we have presented a code with a great performance. This code is the Bootstrap Discount Calculator using JS and you can apply it on your website. With the help of this amazing Bootstrap Discount Form, you can attract new visitors and interest older users. In this JavaScript Calculator Code, the online shops are able to provide several services for their customers. So, it is better to use this code and improve your website. As a result, you can increase your sales in a shorter time.

There is a preview of the mentioned code down below. As you see, this HTML Discount Form has a pure background and you can use it if you have a simple website. This code is presented for discounts and the price of the products. By using the following bootstrap, customers can calculate the price of their needed product. As the preview represents, this JavaScript Calculate Discount shows four fields with black writings. The customer should fill in all blanks and at the end, click on the blue button at the bottom of the page. Then, the website calculates the money that you have to pay.

Bootstrap Discount Form

Javascript Calculator Code

HTML Discount Form

Javascript Calculate Discount

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <form action="" method="GET">
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Customer Name</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                name="C_name" >
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Product Name</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="pname">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Price</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="price">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Discount</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="dicount">
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary" onclick="bill()">Submit</button>
    </form>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

function bill() {
    var C_name = document.getElementsByName("C_name")[0].value;
    var pname = document.getElementsByName("pname")[0].value;
    var price = Number(document.getElementsByName("price")[0].value);
    var Discount = Number(document.getElementsByName("dicount")[0].value);
    var all = Number(Discount * price / 100);
    var total = Number(price - all);
    document.write('<table style="border: 1px solid black;  width: 100%;"> <tr><th style="border: 1px solid black;"> Customer Name</th> <th style="border: 1px solid black;"> Product Name</th><th style="border: 1px solid black;"> Price</th><th style="border: 1px solid black;">Discount</th></tr> <tr style="border: 1px solid black;tex-align:center;"><td style="border: 1px solid black;text-align:center;">' + C_name + '</td> <td style="border: 1px solid black;text-align:center;">' + pname + '</td><td style="border: 1px solid black;text-align:center;">' + price + '</td><td style="border: 1px solid black;text-align:center;">' + Discount + '</td></tr>   <tr style="border:1px solid black;"><td style="border:1px solid black;font-size:20px;text-align:center;"colspan="2">Total Amount</td>    <td style="border:1px solid black;font-size:20px;text-align:center;"colspan="2">$ ' + total + '</td>  </tr>            </table>');
    document.write("<br>")
    document.write('<button onclick="print()" style="float:right; padding:8px;width:140px;background-color:grey;color:white;border:none;border-radius:5px;">Print Bill</button>');
    document.write('<center><a href="http://www.frontendfreecode.com/">Home</a></center>')
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <form action="" method="GET">
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Customer Name</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                name="C_name" >
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Product Name</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="pname">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Price</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="price">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Discount</label>
            <input type="text" class="form-control" id="exampleInputPassword1" name="dicount">
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary" onclick="bill()">Submit</button>
    </form>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function bill() {
    var C_name = document.getElementsByName("C_name")[0].value;
    var pname = document.getElementsByName("pname")[0].value;
    var price = Number(document.getElementsByName("price")[0].value);
    var Discount = Number(document.getElementsByName("dicount")[0].value);
    var all = Number(Discount * price / 100);
    var total = Number(price - all);
    document.write('<table style="border: 1px solid black;  width: 100%;"> <tr><th style="border: 1px solid black;"> Customer Name</th> <th style="border: 1px solid black;"> Product Name</th><th style="border: 1px solid black;"> Price</th><th style="border: 1px solid black;">Discount</th></tr> <tr style="border: 1px solid black;tex-align:center;"><td style="border: 1px solid black;text-align:center;">' + C_name + '</td> <td style="border: 1px solid black;text-align:center;">' + pname + '</td><td style="border: 1px solid black;text-align:center;">' + price + '</td><td style="border: 1px solid black;text-align:center;">' + Discount + '</td></tr>   <tr style="border:1px solid black;"><td style="border:1px solid black;font-size:20px;text-align:center;"colspan="2">Total Amount</td>    <td style="border:1px solid black;font-size:20px;text-align:center;"colspan="2">$ ' + total + '</td>  </tr>            </table>');
    document.write("<br>")
    document.write('<button onclick="print()" style="float:right; padding:8px;width:140px;background-color:grey;color:white;border:none;border-radius:5px;">Print Bill</button>');
    document.write('<center><a href="http://www.frontendfreecode.com/">Home</a></center>')
}
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS