Calculate textbox input Total times textbox input percent equals new input textbox total

Question

Calculate textbox input Total times textbox input percent equals new input textbox total

42 Views Asked by Jason At 28 October 2023 at 22:27

I have looked up and down trying to figure this out, I am trying to make a simple calculation on change event with 3 textbox inputs

Cost of Item textbox

Discount Percentage which would be entered manually of value exp: 29

Total: which will equal the Cost *'s Discount equal the new Total.

When Discount or Cost is changed then the Total will change with them I have the javascript of getting the total somewhat...but i also need to format the Cost & Total from numeric to currency instead of 2500 it formats to $2,500.00 etc

Any help is appreciated im new to this and still learning but im just lost

var number = 14000;
var percentToGet = 29;
var percent = (percentToGet / 100) * number;
alert(percentToGet + "% of " + number + " is " + percent);
function calculatePercent(percent, num){
return (percent / 100) * num;


This gives me the discount of 4,060 of 14,000 which total becomes 9,940

I may need to use jquery or ajax but i have no idea where to begin.

Original Q&A

There are 1 best solutions below

**Sahab** · Accepted Answer · 2023-10-29T07:48:17.553000

hope below test implementation can help , please input all item price and discount to observe the result 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Form</title>
    <!-- Include Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Calculate Discount </h1>
        <form id="discountForm">
            <div class="row mb-3">
            
                <div  class="row col-md-12">
                
                    <div class="col-md-3">
                    <label for="name" class="form-label">Item Name</label>
           </div>
           <div class="col-md-3">
                    Item Price
           </div>
           <div class="col-md-3 text-center">
                    Item Price After Dicount
           </div>                
                    
                </div>
                
                 
                <div class="row col-md-12 mt-2">
                
                   <div class="col-md-3">
                    <label for="name" class="form-label">Item 1</label>
           </div>
           <div class="col-md-3">
                    <input type="text" class="form-control" id="item__1">
           </div>
           <div class="col-md-3 text-center" id="discunt_price_1">
                    
           </div>                    
                    
                </div>
                
                <div class="row col-md-12 mt-2">
                
                   <div class="col-md-3">
                    <label for="name" class="form-label">Item 2</label>
           </div>
           <div class="col-md-3">
                    <input type="text" class="form-control" id="item__2">
           </div>
           <div class="col-md-3 text-center" id="discunt_price_2">
                    
           </div>                    
                    
                </div>
                
                <div class="row col-md-12 mt-2">
                
                   <div class="col-md-3">
                   
                    Discount %
                    
           </div>
           <div class="col-md-3">
                    <input type="text" class="form-control" id="discount" >
           </div>
           <div class="col-md-3 text-center">
                    
           </div>                    
                    
                </div>
                
                <div class="row col-md-12 mt-2">
                
                   <div class="col-md-3">
                    
           </div>
           <div class="col-md-3 text-right">
                    Total After Discount
           </div>
           <div class="col-md-3 text-center" id="total_price">
                    
           </div>                    
                    
                </div>
                
                
               
            </div>
           
            <!-- <button type="button" class="btn btn-primary">Submit</button>-->
        </form>
    </div>

    <!-- Include Bootstrap JS (optional) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
    
       const isDigit = (value) => /^\d+$/.test(value) ;   


       const calculatePercent = (percent, num) => {          
          return num - ((percent / 100) * num);     
       }
       
       const setDiscountPrice = () => {
           
            let flagInputError = false;
            $("[id^='item__']").each(function (e) {
               
               
               let id = $(this).attr('id').replace("item__", "");
               let itemPrice = $("#item__"+id).val();
               let discount = $("#discount").val();
               
               if(isDigit(itemPrice) && isDigit(discount)) { 
                  $("#discunt_price_"+id).html(calculatePercent(discount, itemPrice).toFixed(2));   
               }
               else {
                  flagInputError = true;        
               } 
               
            });
            
            if(flagInputError) {
               
               $("[id^='item__']").each(function (e) {
               
             let id = $(this).attr('id').replace("item__", "");        
            $("#discunt_price_"+id).html("");
            $("#total_price").html("");
           });
            
            }
            else {
            
                let total = 0;
                $("[id^='item__']").each(function (e) {
               
             let id = $(this).attr('id').replace("item__", "");
            total += parseFloat($("#discunt_price_"+id).html());           
            
           });
           
           $("#total_price").html(total.toFixed(2));
            }
       
       }
       
       
       $(document).ready(function() {
        
        var inputs = $('#discountForm input');
        
        inputs.change(function() {
           
            setDiscountPrice();
        });
        
        
    });
    </script>
    

</body>
</html>

Calculate textbox input Total times textbox input percent equals new input textbox total

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in AJAX

Related Questions in CALCULATED-FIELD

Trending Questions

Popular # Hahtags

Popular Questions