Click here to Skip to main content
15,068,988 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,

I have this code to Calculate Percentage in Fee, but I am using a button click to calculate the percentage.

I want someone to help me in getting the same result without the button click. I mean to make it a bit simple.

What I have tried:

HTML
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()   
	<div class="form-group">
            @Html.LabelFor(model => model.FeeAmount, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FeeAmount, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FeeAmount, "", new { @class = "text-danger" })
            </div>
        </div>
		
		 <div class="form-group">
            <Label class="col-md-2 text-primary">Percent: </Label>  <input type="checkbox" name="Percent" id="Percent" class="form-check-input" />
        </div>
		
   <div class="form-group">
            @Html.LabelFor(model => model.DiscountAmount, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DiscountAmount, new { htmlAttributes = new { @class = "form-control" } })
                <input type="button" id="btnPercent" value="Calc Discount" class="form-control btn-sm btn-warning" />
                @Html.ValidationMessageFor(model => model.DiscountAmount, "", new { @class = "text-danger" })
            </div>
        </div>

		
		<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
		}


JavaScript
		<script src="~/Scripts/jquery-3.5.1.js"></script>
<script>
 $(function () {
        $("#btnPercent").click(function () {
            var state = $('#Percent').prop("checked");
            var disc = $("#DiscountAmount").val();
            feeamount = $('#ClassFee').text();
            var amount = $('#DiscountAmount').val();
            var discount = 0;
            if (state)
            {
                discount = (disc * feeamount) / 100;
            }
            else
            {
                discount = feeamount - disc;
            }
            $('#DiscountAmount').empty().val(discount);
        });
    });
</script>
Posted
Updated 16-Aug-20 23:28pm
Comments
Sandeep Mewara 17-Aug-20 5:23am
   
What do you mean by same result without button click? It's not clear on what are you trying to do achieve?

1 solution

Use the change event to run the calculation:
JavaScript
$(function(){
    var calculateDiscount = function(){
        var state = $('#Percent').is(":checked");
        var disc = $("#DiscountAmount").val();
        var feeamount = $('#ClassFee').text();
        var discount = state ? (disc * feeamount) / 100 : feeamount - disc;
        $('#DiscountAmount').val(discount);
    };
    
    $("#Percent, #DiscountAmount").change(calculateDiscount);
    calculateDiscount();
});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900