Click here to Skip to main content
15,891,033 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();
});
 
Share this answer
 

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