javascript - 为什么 JS/JQuery 不读取文本框的值？

Question

我找遍了这段代码不起作用的原因，我很困惑。

我有一个带有 C# 代码的 ASPX 页面。 HTML 标记有一个功能正常的 JQuery 对话框。单击提交按钮时，对话框关闭，数据被传递到 Web 公开方法并写入数据库。为 ddl 和 chkbox 控件保存了所有值，但文本框的字符串值为空。对于文本框正在填充的字段，数据库设置为 NOT NULL，并且正在保存数据，因此我知道正在传递数据，但它不是输入到文本框中的值。

文本框ID为txtCategoryName，Client ID模式设置为static。我尝试使用以下方法获取值:

var CategoryName = $('#txtCategoryName').val();
var CategoryName = $('#txtCategoryName').text();
var CategoryName = $(document.getElementById('txtCategoryName')).text();
var CategoryName = $(document.getElementById('txtCategoryName')).val();
var CategoryName = document.getElementById('txtCategoryName').value;

所有这些都返回相同的空白字段。我一次试了一个。 目前我正在使用这个 JS 代码:

$(document).ready(function () {

var CategoryDialog = $(".EditCategories");
var BtnNew = $("#btnNew");
var CatDDL = document.getElementById("ddlCategoryParent3");
var CatChk = $("#chkCatActive").val();
var CategoryID = 0;
var CategoryName = $("#txtCategoryName").val();
var ParentID = CatDDL.options[CatDDL.selectedIndex].value;
if (CatChk) { CatChk = 1; } else { CatChk = 0; }



var CatDialog = $(CategoryDialog.dialog({

    maxHeight: 1000,
    closeOnEscape: true,
    scrollable: false,
    width: 650,
    title: 'Category Editor',
    autoOpen: false,


    buttons: [
        {
            width: 170,
            text: "Save",
            icons: {
                primary: "ui-icon-disk"
            },
            click: function () {
                $(this).dialog("close");
                window.alert(PageMethods.saveCat(CategoryName, ParentID, CategoryID, CatChk));

            }

        },

        {
            width: 170,
            text: "Delete",
            icons: {
                primary: "ui-icon-circle-minus"
            },
            click: function () {
                $(this).dialog("close");
            }

        },
        {
            width: 170,
            text: "Cancel",
            icons: {
                primary: "ui-icon-circle-close"
            },
            click: function () {
                $(this).dialog("close");
            }

        }
    ]
})






);



BtnNew.click(function () {
    $(CatDialog).dialog('open');
    $(CatDialog).parent().appendTo($("form:first"));

});




});

aspx 页面 (categories.aspx) 的代码标记

<div class="EditCategories">
    <div class="Table">
        <div class="TableRow">

                <div class="TableCell">
                           <div class="TextBlock220">Category Name </div>
                </div><!-- End Table Cell -->
                <div class="TableCell">
                    <input id="txtCategoryName" class="ControlTextBox" />
                    <!--<asp:TextBox ID="txtCategoryName" CssClass="ControlTextBox" runat="server" ClientIDMode="Static"></asp:TextBox>-->
                 </div><!--End Table Cell-->
             </div><!-- End Row 1 -->
         <div class="TableRow">
               <div class="TableCell">
                           Parent Category
               </div><!-- End Table Cell -->
               <div class="TableCell">
                    <asp:DropDownList ID="ddlCategoryParent3" runat="server" CssClass="ControlDropDownList" ClientIDMode="Static"></asp:DropDownList>
               </div><!--End Table Cell-->
         </div>
         <div class="TableRow">
                    <div class="TableCell">
                          Active
                    </div><!-- End Table Cell -->
                    <div class="TableCell">
                          <asp:Checkbox ID="chkCatActive"      CssClass="ControlCheckBox" runat="server" ClientIDMode="Static"></asp:Checkbox>
                    </div><!--End Table Cell-->
         </div><!-- End Row 3-->


        </div>
</div>

ASPX 页面的 C# 代码隐藏方法:

[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static string saveCat(string _Name_, int _parent_id_, int ID, int _Status_)
{
    Category eCT = new Category();
    eCT.CategoryName = _Name_;
    eCT.ParentID = _parent_id_;
    eCT.ID = ID;
    eCT.Status = _Status_;
    eCT.Save();
    return eCT.resultMessage; 
}

保存方法:

/// <summary>
/// If the ID = 0 the data is written as a new category.
/// If the ID is greater than 0 the data is updated.
/// </summary>
/// <returns>The objects result value will hold the result of the attempt to update data as type Boolean.  The objects resultMessage value will contain the string result of the attempt to add data.</returns>
public void Save()
{

    result = dl.CategoryExists(this);
    if (result) { resultMessage = "The parent category already contains a category named " + CategoryName.Trim(); }
    else { 
        if (ID > 0)
        {
            if (!result) { resultMessage = "There was an unexpected error updating " + CategoryName.Trim() + ". No changes were saved."; }
        }
        else
        {
            result = dl.InsertCategory(this);
            if (!result) { resultMessage = "There was an unexpected error creating the Category."; }
        }
    }
    if (result) { resultMessage = "New Category Successfully Created"; }

}

非常感谢任何帮助。

Answer 1

这里的问题是您试图在页面加载后立即获取正确的值，然后再填写输入字段。将这段代码放在按钮点击函数中:

var CategoryName = document.getElementById('txtCategoryName').value;

它应该适合您。如果没有，请告诉我们。

Your code should look something like this:

       click: function () {
            // note: CategoryID not used yet.
            var CategoryName = $("#txtCategoryName").val();
            var CatChk = $("#chkCatActive").val();
            var CatDDL = document.getElementById("ddlCategoryParent3")
            var ParentID = CatDDL.options[CatDDL.selectedIndex].value;
            if (CatChk) { CatChk = 1; } else { CatChk = 0; }
            $(this).dialog("close");
            window.alert(PageMethods.saveCat(CategoryName, ParentID, CategoryID, CatChk));
        }