Click here to Skip to main content
15,040,003 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm taking the next step in my project and adding some behaviour using Javascript. I know that I need to split the JS onto a separate script and reference that file but I just want to get it working first.

Now the first script works on load and sets the header text and save button based on whether its a new or an existing record.

Now I am trying to get the save button to only show once the text box is populated.
F12 Gives me this error:
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>
                    class="fa fa-pencil">
                        @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>


What I have tried:

I have tried rewriting, changing the approach, trying different on event handlers.
Posted
Updated 28-Jul-20 1:13am

js is case-sensitive and the property is called "value", not "Value"

HTML DOM Input Text value Property[^]
   
Comments
RabsoInc 28-Jul-20 7:18am
   
You guys are geniuses, I have been scratching my head for ages.
Uncaught TypeError: txtPartType.Value is undefined

This part explains the issue, you're attempting to resolve a property named Value on an input, but this is incorrect, it should be value (lowercase).

You can usually diagnose these problems by debugging the script in your browser and stepping through the code line by line.
   
Comments
RabsoInc 28-Jul-20 7:17am
   
You guys are geniuses, I have been scratching my head for ages.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900