دریافت اطلاعات یک input و نمایش در input دیگر توسط جاوااسکریپت
سلام من یک سری فیلد اینپوت در ویو درست کردم که از کاربر اطلاعاتی رو دریافت میکنه مثلا یک عددی رو کاربر وارد میکنه و میخوام در فیلد بعدی عددی رو که کاربر داده رو بگیرم و فرضا منهای 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>
پاسخ هوش مصنوعی
شما می توانید برای دریافت اطلاعات از یک فیلد ورودی و اعمال تغییرات بر روی آن به یکی از دیگر فیلدهای ورودی، از جاوااسکریپت استفاده کنید. در این کد، ما به کاربر اجازه می دهیم تا عددی را در فیلد اول وارد کند و در فیلد دوم، 30 سانتی متر از آن عدد کسر شود و نتیجه در فیلد سوم نمایش داده شود.
در این کد:
- فیلد ورودی اول (ltak70arz) عددی را از کاربر دریافت می کند.
- تابع
calculate()
با استفاده از رویدادoninput
فراخوانی می شود. - نتیجه محاسبه در فیلد ورودی دوم (ltak70ertefa) نمایش داده می شود.
- فیلد دوم فقط برای نمایش نتیجه است و قابل ویرایش نیست (با استفاده از ویژگی
readonly
).
اگر شما میخواید اطلاعات یک 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>
}
- آموزش استفاده از پلاگین گردونه شانس در Asp.net core به همراه سورس
- نمایش متن به صورت فرمت شده در CkEditor
- آموزش استفاده از SignalR در Asp.net Core با مثال عملی
- ادغام چند گزارش استیمول سافت بصورت پی دی اف در یک فایل
- نحوه تغییر استایل کامپوننت select2 چگونه است ؟
- چگونه امنیت پروژه را در Asp.net Core افزایش دهیم ؟
- ارسال پارامتر در دستور window.open جی کویری
- ارسال پارامتر از طریق جاوااسکریپت با کلیک روی تگ a
- خطای 500 زمان اجرا شدن پروژه روی هاست
- کویری نویسی در استیمول سافت جهت فیلتر اطلاعات
- کار با CkEditor با قابلیت آپلود عکس
- خطا در ایجاد migration در Asp.net core
- تفاوت های Asp.net core و Asp.net mvc چیه؟
- دلیل اسپم شدن ایمیل های ارسالی از سرور
- نحوه لایه بندی پروژه Core و اضافه کردن به IIS
- ارسال ایمیل در Asp.net core
- آیا میشه در mvc core از کامپونت استفاده کرد
- آپلود فایل در Asp.net core چگونه است؟
- حذف کامل یک رکورد در جدول ریلیشن شده
- اشکال در آپلود فایل ویدیو در mvc core 2