مشکل در ضرب دو مقدار و نمایش آن

[MasoudAdmin]

با درود خدمت همه
من در وب فرمم چند TextBox دارم که مثلا یکی مساحت هست و یکی دیگر مبلغ که این مبلغ رو از این طریق به صورت جداکننده نمایش می دهد. مشکل از اینجا شروع میشه که وقتی مقدار تکست باکس مساحت رو در تکست باکس مبلغ که به صورت جداکننده نمایش میده مقدار مبلغ کل که ضرب این دو هست اشتباه نمایش میده.

<script type="text/javascript">

            $(function () {

                $('[id*=txtBachelorPrice]').keyup(function (event) {

                    // skip for arrow keys

                    if (event.which >= 37 && event.which <= 40) return;

                    // format number

                    $(this).val(function (index, value) {

                        return value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");

                    });

                });

            });

        </script>













اینم تابعش محاسبه هست:





<script type="text/javascript">

            function CalcArea() {

                var textLenght = document.getElementById('txtLenght').value;

                var textWidth = document.getElementById('txtWidth').value;

                var textBachelorPrice = document.getElementById('txtBachelorPrice').value;

                if (textLenght == "")

                    textLenght = 0;

                if (textWidth == "")

                    textWidth = 0;

                if (textBachelorPrice == "")

                    textBachelorPrice = 0;

                var Area = parseFloat(textLenght) * parseFloat(textWidth);

                var BachelorPrice = parseFloat(textBachelorPrice);

                var TotalPrice = Area * BachelorPrice;

                if (!isNaN(Area)) {

                    document.getElementById('txtPartArea').value = Area;

                    document.getElementById('txtTotalPrice').value = TotalPrice;

                }

            }

        </script>

به عنوان مثال طبق تصویر متراژ مساحت: 87.5 هست و مبلغ کارشناسی با حالت جداکننده 24,500,000 هست. ولی مقدار مبلغ کل که مقدار متراژ مساحت ضرب در مبلغ کارشناسی هست منطق ریاضی میشه 2,143,750,000 ولی مبلغ کل رو 2,100 نمایش میده. یعنی 87.5 رو ضرب در 24 میکنه.
چجوری می تونم این مشکل رو برطرف کنم؟ ممنون میشم راهنمایی کنید.
با سپاس
JQCalc.jpg

[mazoolagh]

سلام و روز خوش

وقتی مقدار txtBachelorPrice رو فرمت کردین دیگه تابع parseFloat درست کار نمیکنه
چون کاما در اون هست.

اول باید همه کاما ها رو بردارین:

var BachelorPrice = parseFloat(textBachelorPrice.replace('/,/'g , ''));

در ضمن:
الان مشخص نیست که inputها دقیقا از چه نوعی هست - احتمالا text ،
بهتره از type=number استفاده کنین،
و هم این که یک نگاهی به کتابخانه jquery ui بندازین (spinner)

[MasoudAdmin]

با درود و ادب
بله. من در Asp.net از تکست باکس استفاده کردم.
با این حال type=text ست کردم. وقتی تایپش رو به number تغییر بدم دیگه اون تابعی که اعداد را با جداکننده وقتی دارم توی تکست باکس ورود می کنم کار نمیکنه و فقط داره 0 نمایش میده.
در head فرم Asp.net فرمم واسه اینکه با Enter به کنترل های بعدی برم این رو دارم

<script type="text/javascript" src="../JSFiles/jquery-3.7.1.min.js"></script>

<script>

        $(document).ready(function () {

            $('#form1 input[tabindex]:not([type="submit"])')

                .on('keydown', function (event) {

                    if (event.keyCode == 13) {

                        event.preventDefault();

                        $('#form1 input[tabindex="' + (this.tabIndex + 1) + '"]').focus();

                    }

                });

        });

    </script>

واسه محاسبه مساحت و قیمت کل هم که همون تابعی که قبلا گفتم گذاشتم

با این تغییری هم که فرمودید دادم

var BachelorPrice = parseFloat(textBachelorPrice.replace('/,/'g , ''));

ولی کلا دیگه اون تابع محاسبه کار نمیکنه.

[mazoolagh]

با درود دوباره و احترام متقابل

1- شرمنده، اون replace رو اشتباه نوشتم.
درستش اینه :

var BachelorPrice = parseFloat(textBachelorPrice.replace(/,/g , ''));

در واقع اول کاما درون سینگل کوت بود - ولی یادم آمد که این همه رو replace نمیکنه،
برای همین regex pattern گذاشتم ولی یادم رفت سینگل کوت رو بردارم.
این بار تست کردم.

2- اون type=number برای width و length هست که خودتون فرمت نمیکنین،
و خوبیش اینه که میتونین min و max و step هم بدین.
برای price اسپینر jquery-ai رو پیشنهاد دادم چون امکان فرمت شماره رو میدونم داره - ولی این که در زمان تایپ باشه رو تست نکردم.

3- سعی میکنم سر فرصت یک نمونه آماده کنم که همه خواسته ها رو در بر بگیره (از جمله فوکوس روی فیلد بعدی با enter).

[MasoudAdmin]

با درود و ادب مجدد
متاسفانه با این کد اصلاحی هم کار نکرد و کلا دیگه کار نمیکنه.
بنا به دلایلی TextBox هایی که تعریف کردم تایپش رو Text گذاشتم و واسه مدیریت اینکه کاربر فقط عدد وارد کنه در رویداد onkeydown این رو گذاشتم:

onkeydown="return (((event.keyCode>=48 && event.keyCode<=57)||(event.keyCode>=96 && event.keyCode<=105)||event.keyCode==8 ||event.keyCode==46 ||event.keyCode==37||event.keyCode==39 ||event.keyCode==36||event.keyCode==35 ||event.keyCode==9 ||event.keyCode==110) && event.keyCode!=32);"

اون تابع CalcArea() که با تغییرات جدید گذاشتم دیگه کلا کار نمی کنه:

<script type="text/javascript">

            function CalcArea() {

                var textLenght = document.getElementById('txtLenght').value;

                var textWidth = document.getElementById('txtWidth').value;

                var textBachelorPrice = document.getElementById('txtBachelorPrice').value;

                if (textLenght == "")

                    textLenght = 0;

                if (textWidth == "")

                    textWidth = 0;

                if (textBachelorPrice == "")

                    textBachelorPrice = 0;

                var Area = parseFloat(textLenght) * parseFloat(textWidth);

                var BachelorPrice = parseFloat(textBachelorPrice.replace(/,/g, ''));

var TotalPrice = Area * BachelorPrice;

                if (!isNaN(Area)) {

                    document.getElementById('txtPartArea').value = Area;

                    document.getElementById('txtTotalPrice').value = TotalPrice;

                }

            }

        </script>

این تابع CalcArea() هم در رویداد onkeyup گذاشتم

onkeyup="CalcArea();"

این کل داستان هست. بازم ممنون میشم که راهنمایی مجدد بفرمایید.
سپاس

[mazoolagh]

خب،
اول یک توضیح میدم برای رفع ابهام کسان دیگری که این تاپیک رو میخونن:
کنترل های input که اینجا بهشون اشاره میشه در واقع کنترل های asp.net webforms هستن (asp:textbox) که توسط iis به صورت html input رندر میشن.
برای همین بعضی attribute ها که بهشون اشاره میشه مربوط به کنترلهای server-side هست، ولی در نهایت اونچه به مرورگر فرستاده میشه html هست.

اما کدهای javascript رو که برای این مسئله خواهید دید (و روش کار) رو میتونین برای هر فرم دیگه ای استفاده کنین.

1-

بنا به دلایلی TextBox هایی که تعریف کردم تایپش رو Text گذاشتم

برای BachelorPrice چون نیاز به فرمت دارین (گروه بندی هر 3 رقم) درسته،
ولی برای length و width که گویا نیازی به فرمت نیست textmode=number بذارین (بعدا به input type=number رندر میشه)

2- کدی رو که برای فرمت کردن استفاده کردین کلا بگذارین کنار.
این کد قدیمی هست، الان خیلی راحت با متد tolocalestring انجام میشه، که توضیح میدم.

3-

واسه مدیریت اینکه کاربر فقط عدد وارد کنه در رویداد onkeydown این رو گذاشتم

برای length و width که نیازی نیست (مورد 1)
برای BachelorPrice هم در همون کد فرمت بندی
تغییر کوچکی داده شده که فقط 0 تا 9 رو قبول میکنه (با فرض این که قیمت integer هست).

کلا در این مسئله از keydown فقط و فقط برای تشخیص enter و رفتن به فیلد بعد استفاده میکنیم.
برای توضیح بیشتر سوال: رفتن به کنترل بعدی در وب فرم با زدن دکمه Enter (barnamenevis.org) رو ببینین.

4- برای تشخیص هر تغییری در فیلدها از oninput استفاده میکنیم،
این هم به ما کمک میکنه مقادیر محاسباتی (area و total price) رو همزمان با تایپ اونها محاسبه کنیم،
و هم این که جلوی ورود مقادیر نادرست با copy/paste رو هم میگیره (که در رویدادهایی مثل keydown از دست در میره).

[mazoolagh]

فرض کنین که فرم زیر رو در یک asp.net webform page ساختیم:

<form id="form1" runat="server">

    <asp:Label ID="l1" runat="server">Length</asp:Label>

    <asp:TextBox ID="TB_Length" runat="server" TabIndex="1" TextMode="Number" min="0" step="any"></asp:TextBox>

    <asp:Label ID="l2" runat="server">Width</asp:Label>

    <asp:TextBox ID="TB_Width" runat="server" TabIndex="2" TextMode="Number" min="0" step="any"></asp:TextBox>

    <asp:Label ID="l3" runat="server">Area</asp:Label>

    <asp:TextBox ID="TB_Area" runat="server" ReadOnly="true"></asp:TextBox>

    <asp:Label ID="l4" runat="server">Price</asp:Label>

    <asp:TextBox ID="TB_Price" runat="server" TabIndex="3"></asp:TextBox>

    <asp:Label ID="l5" runat="server">Total Price</asp:Label>

    <asp:TextBox ID="TB_TotalPrice" runat="server" ReadOnly="true"></asp:TextBox>

    <asp:Button ID="BTN_Submit" runat="server" Text="submit" TabIndex="4" />

</form>

[mazoolagh]

این فرم توسط وب سرور به html فرم زیر تبدیل و به مرورگر فرستاده میشه (قسمتهای نامربوط به بحث حذف شده):

<form method="post" action="./BN589009.aspx" id="form1">

    <span id="l1">Length</span>

    <input name="TB_Length" type="number" id="TB_Length" tabindex="1" min="0" step="any" />

    <span id="l2">Width</span>

    <input name="TB_Width" type="number" id="TB_Width" tabindex="2" min="0" step="any" />

    <span id="l3">Area</span>

    <input name="TB_Area" type="text" readonly="readonly" id="TB_Area" />

    <span id="l4">Price</span>

    <input name="TB_Price" type="text" id="TB_Price" tabindex="3" />

    <span id="l5">Total Price</span>

    <input name="TB_TotalPrice" type="text" readonly="readonly" id="TB_TotalPrice" />

    <input type="submit" name="BTN_Submit" value="submit" id="BTN_Submit" tabindex="4" />

</form>

[mazoolagh]

که با style زیر:

#form1 {

    display: grid;

    grid-template-columns: 120px 200px;

    gap: 5px;

}





    #form1 span {

        grid-column: 1;

        width: 100%;

    }





    #form1 input {

        grid-column: 2;

        width: 100%;

    }

[mazoolagh]

به این شکل در مرورگر دیده میشه:

Screenshot 2024-08-03 214822.png

[mazoolagh]

خب،
حالا کدهای جاوااسکریپت رو میتونیم بنویسیم:

<script src="scripts/jquery-3.7.1.js"></script>



<script>

    $(document).ready(function () {

        $('#form1 input[tabindex]:not([type="submit"])')

            .on('keydown', function (event) {

                if (event.keyCode == 13) {

                    event.preventDefault();

                    $('#form1 input[tabindex="' + (this.tabIndex + 1) + '"]').focus();

                }

            })





        $('#form1').on('input', function (sender, event) {

            if (sender.target.id == 'TB_Price') {

                const price_text = $('#TB_Price').val().replace(/[^0-9]/g, '');

                const Price = parseInt(price_text);

                $('#TB_Price').val((isNaN(Price) ? '' : Price.toLocaleString("en-US")));

            };

            Calc();

        });

    });





    function Calc() {

        const Length = parseFloat($('#TB_Length').val());

        const Width = parseFloat($('#TB_Width').val());

        const Area = Length * Width;

        const Price = parseInt($('#TB_Price').val().replace(/,/g, ''));

        const TotalPrice = Area * Price;

        $('#TB_Area').val(isNaN(Area) ? '' : Area.toLocaleString("en-US"));

        $('#TB_TotalPrice').val(isNaN(TotalPrice) ? '' : TotalPrice.toLocaleString("en-US"));

    }

</script>

[mazoolagh]

تست کدها:

asp.net enter move to next field and format number while type using jquery

[MasoudAdmin]

با درود و ادب و سپاس بیکران. بله مشکل با این تغییرات در کدها حل شد.