دریافت اطلاعات یک input و نمایش در input دیگر توسط جاوااسکریپت

10:19:00 AM - 1400/04/26

سلام من یک سری فیلد اینپوت در ویو درست کردم که از کاربر اطلاعاتی رو دریافت میکنه مثلا یک عددی رو کاربر وارد میکنه و میخوام در فیلد بعدی عددی رو که کاربر داده رو بگیرم و فرضا منهای 30 سانتیمتر کنم و در فیلد بعدی بهش نشون بدم ، نمیدونم دقیقا چطوری کدش رو بنویسم و اینکه در همین صفحه view باید بزارم یا منطق درستش اینکه تو کنترلر باید باشه این عملیات

ممنون از راهنماییتون

<div style="text-align:center; width:100%; background-color:darkorange; height:1px; margin-bottom:15px;" class="col-xs-12"></div>
            <div>
                <label asp-for="ltak70arz" class="control-label col-md-2 col-xs-12 LabelClass"></label>
                <div class="col-md-4 col-xs-12">
                    <input asp-for="ltak70arz" type="text" class="form-control custominput" placeholder=" عرض پشت تا پشت کپس..." />
                    <span asp-validation-for="ltak70arz" class="text-danger"></span>
                </div>
            </div>

            <div>
                <label asp-for="ltak70ertefa" class="control-label col-md-2 col-xs-12 LabelClass"></label>
                <div class="col-md-4 col-xs-12">
                    <input asp-for="ltak70ertefa" type="text" class="form-control custominput" placeholder="  ارتفاع..." />
                    <span asp-validation-for="ltak70ertefa" class="text-danger"></span>
                </div>
            </div>

            <div>
                <label asp-for="ltak70price" class="control-label col-md-2 col-xs-12 LabelClass"></label>
                <div class="col-md-4 col-xs-12">
                    <input asp-for="ltak70price" type="text" class="form-control custominput" placeholder=" قیمت هرمتر..." />
                    <span asp-validation-for="ltak70price" class="text-danger"></span>
                </div>
            </div>
            <!--نیاز به ریل-->
            <div>
                <label asp-for="ltak70rail" class="control-label col-md-pull-3 col-xs-12 LabelClass"></label>
                <div class="col-md-9 col-xs-12" style="height:45px;">
                    <label class="col-md-3 col-xs-4">
                        دارد
                        <input asp-for="ltak70rail" type="radio" value="1" checked />
                    </label>
                    <label class="col-md-3 col-xs-4">
                        ندارد
                        <input asp-for="ltak70rail" type="radio" value="2" />
                    </label>
                </div>


                <div>
                    <label asp-for="nice" class="control-label col-md-2 col-xs-12 LabelClass"></label>
                    <div class="col-md-4 col-xs-12">
                        <input asp-for="nice" type="text" class="form-control custominput" placeholder=" ریل نایس..." />
                        <span asp-validation-for="nice" class="text-danger"></span>
                    </div>

ویرایش شده در شنبه ۲۶ تیر ۱۴۰۰ ساعت ۱۲:۵۴:۳۲

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 2650

پاسخ دهنده : saedbfd 01:04:00 PM - ۱۴۰۰/۰۴/۲۶

اگر شما میخواید اطلاعات یک input رو دریافت کنید و با تغییراتی در input دیگه ای نمایش بدید با توجه به اینکه همه این عملیات در سمت کلاینت انجام میشه میتونید از جی کوئری و یا جاوااسکریپت برای این کار استفاده کنید. به مثال زیر دقت کنید.

فرض کنید دو تا input با id های txt1 و txt2 داریم.

<div>
    <input id="txt1" type="number" />
</div>


<div>
    <input id="txt2" type="number" />
</div>

حالا می خواهیم هر مقداری که در txt1 وارد شد 30 تا ازش کم بشه و در txt2 نمایش داده بشه. خب کافیه در قسمت کدهای جی کوئری دستور زیر رو بنویسید :

@section Scripts{
    <script>
        $("#txt1").on("input", function () {
            var txt1 = $("#txt1").val() - 30;
            
            $("#txt2").val(txt1);
        });
    </script>
}

در مجموع کدها به شکل زیر میشه :

<div>
    <input id="txt1" type="number" />
</div>


<div>
    <input id="txt2" type="number" />
</div>

@section Scripts{
    <script>
        $("#txt1").on("input", function () {
            var txt1 = $("#txt1").val() - 30;
            
            $("#txt2").val(txt1);
        });
    </script>
}