Why Won't Js / Jquery Read The Text Box Values?

I have looked all over for a reason behind why this code does not work and I am stumped. I have an ASPX page with C# code behind. The HTML mark-up has a JQuery dialog that functi

Solution 1:

The issue here is you're attempting to get the value right as soon as the page loads, before the input field gets filled out. Place this code inside the button click function:

varCategoryName = document.getElementById('txtCategoryName').value;

and it should work for you. If not, let us know.

Your code should look something like this:

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

Solution 2:

You are fetching the values from your dialog at page startup time BEFORE they have been edited.

It looks like this:

varCategoryName = $("#txtCategoryName").val();

is run at page startup time before the page has been edited. This will fetch the default value for the input field and will never reflect any editing that is done on the page. The line of code above does not create a "live" connection with the input field on the page. It just gets the value at the time that line of code is run and from then on there is no connection to any edits made to the field.

I would think you want to fetch the value only later when you actually need to value for something. In general, you do not want to cache a value like this because the cached value gets out of sync with what is in the actual field on the page. Just fetch it at the very moment that you need it for something and it will never have a stale value.

If the place that you're using this value is inside the dialog click handler, then fetch it there so you are getting the latest value:

click: function () {
            $(this).dialog("close");
            varCatChk = $("#chkCatActive").val() ? 1 : 0;
            varCategoryName = $("#txtCategoryName").val(); 
            varCatDDL = document.getElementById("ddlCategoryParent3");
            varParentID = CatDDL.options[CatDDL.selectedIndex].value;               
            window.alert(PageMethods.saveCat(categoryName, ParentID, CategoryID, CatChk));

        }