А как же я?.. Показать кнопку "Отправить", когда текстовое поле заполняется (в MVC)
Я делаю следующий шаг в своем проекте и добавляю некоторое поведение с помощью Javascript. Я знаю, что мне нужно разделить JS на отдельный скрипт и ссылаться на этот файл, но я просто хочу сначала заставить его работать.
Теперь первый скрипт работает при загрузке и устанавливает текст заголовка и кнопку сохранения в зависимости от того, является ли это новая или существующая запись.
Теперь я пытаюсь заставить кнопку Сохранить отображаться только после заполнения текстового поля.
F12 выдает мне эту ошибку:
Uncaught TypeError: txtPartType.Value is undefined
@model Models.ViewModels.PartTypeViewModel @{ ViewData["Title"] = "Rabso Solutions: Manage Part Types"; Layout = "~/Views/_Shared/_Layout.cshtml"; } <div class="card"> <div class="card-header" id="managePartType">Placeholder Text</div> <div class="card-body"> @using (Html.BeginForm("Save", "PartType")) { @Html.HiddenFor(x => x.PartType.Id) <div class="form-group"> @Html.LabelFor(x => x.PartType.PartTypeName) @Html.TextBoxFor(x => x.PartType.PartTypeName, new { @class = "form-control", @id = "partTypeName", onkeyup = "EnableSaveButton()" }) </div> <button class="btn btn-primary btn-block" id="savePartType">Placeholder Text</button> } </div> </div> <hr /> <div class="card"> <div class="card-header">List Of Current Part Types</div> <div class="card-body"> <table class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th>#</th> <th>Part Type Name</th> <th>Edit</th> </tr> </thead> @foreach (var item in Model.PartTypes) { <tr> <td>@item.Id</td> <td>@item.PartTypeName</td> <td> @Html.ActionLink("Edit/Details", "Manage", new { id = item.Id }) </td> </tr> } </table> </div> </div> <script> window.onload = function SetText () { if (@Model.PartType.Id === 0) { this.document.getElementById("managePartType").innerHTML = "Create A New Part Type"; this.document.getElementById("savePartType").innerHTML = "Save New Part Type"; } else { this.document.getElementById("managePartType").innerHTML = "Update Existing Part Type"; this.document.getElementById("savePartType").innerHTML = "Save Updated Part Type"; } document.getElementById("savePartType").disabled = true; }; function EnableSaveButton() { const btnSave = this.document.getElementById('savePartType'); const txtPartType = this.document.getElementById('partTypeName'); if (txtPartType.Value.Trim() !== '') { btnSave.disabled = false; } else { btnSave.disabled = true; } } </script>
Что я уже пробовал:
Я пробовал переписывать, менять подход, пробовать разные обработчики событий.