locked
Cannot get value on dropdown change event mvc RRS feed

  • Question

  • User2041008840 posted

    I cant get value on change event of dropdown.
    when  i change the value it adding the previous value. 

    //view
                    <div class="form-group col-lg-2  col-md-2 col-sm-2 col-xs-12">
    
    
                        <label class="control-label">Category </label>
                        @Html.DropDownList("ItemCategory", null, htmlAttributes: new { @class = "form-control", @id = "ItemCategoryID"
                        })
    
                    </div>
                    <div class="form-group col-lg-2  col-md-2 col-sm-2 col-xs-12">
                        @Html.LabelFor(model => model.ItemID, "ItemID", htmlAttributes: new { @class = "control-label" })
    
                        @Html.DropDownList("ItemID", null, htmlAttributes: new { @class = "form-control", @id = "ItemID"
                        })
                        @Html.ValidationMessageFor(model => model.ItemID, "", new { @class = "text-danger" })
    
                    </div>
                    
                    <div class="form-group col-lg-2  col-md-2 col-sm-2 col-xs-12">
                        @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label  " })
    
    
    
    
                        @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control txt", @Value = "1", @required = "required" } })
                        @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
    
    
    
                    </div>
    
                    <div class="form-group col-lg-2  col-md-2 col-sm-2 col-xs-12">
                        @Html.LabelFor(model => model.Rate, htmlAttributes: new { @class = "control-label  " })
    
                        @Html.EditorFor(model => model.Rate, new { htmlAttributes = new { @class = "form-control txt", @id = "txtRate", @Value = "0", @required = "required" } })
                        @Html.ValidationMessageFor(model => model.Rate, "", new { @class = "text-danger" })
    
                    </div>
    
    //script
    
    $(document).ready(function () {
    
            //iterate through each textboxes and add keyup
            //handler to trigger sum event
            $(".txt").each(function () {
    
                $(this).keyup(function () {
                    calculateSum();
                });
                $(this).change(function () {
                    calculateSum();
                });
    
                
    
            });
    
    
    
        });
    
        function calculateSum() {
    
            var sum = 0;
            //iterate through each textboxes and add the values
            $(".txt").each(function () {
    
                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }
    
            });
            //.toFixed() method will roundoff the final sum to 2 decimal places
    
    
            $("#sum").val(sum.toFixed(2));
        }
    

    key up function is working fine but on change event not working 

    it adds the value of previous then again on change add previous it does not add current value 

    Friday, October 26, 2018 3:59 PM

Answers

  • User-271186128 posted

    Hi Prathamesh shende,

    I cant get value on change event of dropdown.
    when  i change the value it adding the previous value. 

    Do you mean the DropDownList change event? From your code, I just see the Textbox change event. So, please explain more details about your requirement and share related code.

    Beside, I tried to add your code in my sample, code as below:

    the dropdownlist change event is used to set the price, and in the success function, we could call the calculatesum method to calculate the sum.

            <div class="form-group">
                @Html.LabelFor(model => model.Product, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("IDProduct", ViewBag.IDProduct as SelectList, "-- Select Product --", new { @Class = "form-control", @onchange = "myFunction(this)" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control txt" } })
                    @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control txt"  } })
                    @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Sum, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Sum, new { htmlAttributes = new { @class = "form-control", id="sum" } })
                    @Html.ValidationMessageFor(model => model.Sum, "", new { @class = "text-danger" })
                </div>
            </div>

    JQuery script:

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function myFunction(e) {
            var Idproduct = $(e).val();
            if (Idproduct != "") {
                $.ajax({
                    type: "Post",
                    url: "/Home/GetProductPrice",
                    data: { IDProduct: Idproduct },
                    datatype: "json",
                    success: function (response) {
                        //set the price value
                        $("input[name='Price']").val(response);
                        //calculate the sum.
                        calculateSum();
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
            }
            else {
                $("input[name='Price']").val("");
            }
        };
        $(document).ready(function () {
            //iterate through each textboxes and add keyup
            //handler to trigger sum event
            $(".txt").each(function () {
                $(this).keyup(function () {
                    calculateSum();
                });
                $(this).change(function () {
                    calculateSum();
                });
            });
        });
        function calculateSum() {
            var sum = 0;
            //iterate through each textboxes and add the values
            //$(".txt").each(function () {
            //    //add only if the value is number
            //    if (!isNaN(this.value) && this.value.length != 0) {
            //        sum += parseFloat(this.value);
            //    }
            //});
            var price = $("input[name='Price']").val();
            var quantity = $("input[name='Quantity']").val();
            if (!isNaN(price) && price.length != 0 && !isNaN(quantity) && quantity.length != 0) {
                sum = price * quantity;
            }
    
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#sum").val(sum.toFixed(2));
        }
    </script>

    The screenshot as below:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 29, 2018 3:12 AM

All replies

  • User2041008840 posted

    I am retrieve value from database to editorfor (textbox)

    Friday, October 26, 2018 4:03 PM
  • User-271186128 posted

    Hi Prathamesh shende,

    I cant get value on change event of dropdown.
    when  i change the value it adding the previous value. 

    Do you mean the DropDownList change event? From your code, I just see the Textbox change event. So, please explain more details about your requirement and share related code.

    Beside, I tried to add your code in my sample, code as below:

    the dropdownlist change event is used to set the price, and in the success function, we could call the calculatesum method to calculate the sum.

            <div class="form-group">
                @Html.LabelFor(model => model.Product, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("IDProduct", ViewBag.IDProduct as SelectList, "-- Select Product --", new { @Class = "form-control", @onchange = "myFunction(this)" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control txt" } })
                    @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control txt"  } })
                    @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Sum, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Sum, new { htmlAttributes = new { @class = "form-control", id="sum" } })
                    @Html.ValidationMessageFor(model => model.Sum, "", new { @class = "text-danger" })
                </div>
            </div>

    JQuery script:

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function myFunction(e) {
            var Idproduct = $(e).val();
            if (Idproduct != "") {
                $.ajax({
                    type: "Post",
                    url: "/Home/GetProductPrice",
                    data: { IDProduct: Idproduct },
                    datatype: "json",
                    success: function (response) {
                        //set the price value
                        $("input[name='Price']").val(response);
                        //calculate the sum.
                        calculateSum();
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
            }
            else {
                $("input[name='Price']").val("");
            }
        };
        $(document).ready(function () {
            //iterate through each textboxes and add keyup
            //handler to trigger sum event
            $(".txt").each(function () {
                $(this).keyup(function () {
                    calculateSum();
                });
                $(this).change(function () {
                    calculateSum();
                });
            });
        });
        function calculateSum() {
            var sum = 0;
            //iterate through each textboxes and add the values
            //$(".txt").each(function () {
            //    //add only if the value is number
            //    if (!isNaN(this.value) && this.value.length != 0) {
            //        sum += parseFloat(this.value);
            //    }
            //});
            var price = $("input[name='Price']").val();
            var quantity = $("input[name='Quantity']").val();
            if (!isNaN(price) && price.length != 0 && !isNaN(quantity) && quantity.length != 0) {
                sum = price * quantity;
            }
    
            //.toFixed() method will roundoff the final sum to 2 decimal places
            $("#sum").val(sum.toFixed(2));
        }
    </script>

    The screenshot as below:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 29, 2018 3:12 AM