RabsoInc Ответов: 2

А как же я?.. Показать кнопку "Отправить", когда текстовое поле заполняется (в 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>


Что я уже пробовал:

Я пробовал переписывать, менять подход, пробовать разные обработчики событий.

2 Ответов

Рейтинг:
14

F-ES Sitecore

js чувствителен к регистру, и это свойство называется "value", а не "Value"

HTML DOM Input Text value свойство[^]


RabsoInc

Вы, ребята, гении, я уже целую вечность чешу в затылке.

Рейтинг:
10

Chris Copeland

Uncaught TypeError: txtPartType.Value is undefined

Эта часть объясняет проблему, вы пытаетесь решить свойство с именем Value на входе, но это неверно, он должен быть value (нижний регистр).

Обычно эти проблемы можно диагностировать путем отладки скрипта в браузере и пошагового просмотра кода строка за строкой.


RabsoInc

Вы, ребята, гении, я уже целую вечность чешу в затылке.