Javascript for a pure text field value does not work, but jquery does

Question

I have an update panel on the page where users can specify the "owner" for the event. this owner will be a user in our active directory. The panel allows the user to enter text and click the search button to find the corresponding users in our Active Directory. When a user selects a user from the matching list, the owner name and username are populated. The username is hidden because the user does not need this. It all works great.

My problem is that I have an event handler that fires whenever the text of the owner’s name changes, if the user changes the owner’s name, I want to delete the owner’s username until the user displays the corresponding list and selects a valid entry .

My problem is that when I try to access the value of a hidden text field using Javascript, I cannot, but when I try to use the equivalent jquery code, it works fine. Why?

Here is my html

<asp:UpdatePanel ID="OwnerUpdatePanel" runat="server" UpdateMode="Conditional" ClientIDMode="Static"> <ContentTemplate> <asp:TextBox id="OwnerNameTextbox" runat="server" class="form-control input-sm" Width="200"/> <asp:TextBox id="OwnerUsernameTextbox" runat="server" class="hidden"/> <asp:LinkButton class="btn btn-default btn-sm StopClickPropagation" id="GetOwners" AutoPostBack="True" runat="server" OnClientClick="CheckLength()" OnClick="GetMatchingOwners"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </asp:LinkButton> <asp:ListBox id="OwnersList" runat="server" AutoPostBack="True" class="dropdown-list" onblur='$(".dropdown-list").hide();' OnSelectedIndexChanged="OwnerSelectionChanged"> </asp:ListBox> <p> </ContentTemplate> </asp:UpdatePanel> 

And here is my handler for the event of changing my own nametextbox

  function OwnerNameTextChanged() { document.getElementById("OwnerUpdatePanel").childNodes[1].value = ""; } 

This sets my OwnerNameTextBox to empty, which is not what I want. I want to set empty for OwnerUsernameTextbox. But when I change the index for childNodes to 2, nothing changes (checking the value of childNodes [2] with a warning gives me "undefined"). But if I try to use jquery:

 $("#OwnerUpdatePanel").children(":nth-child(2)").val(""); 

which works great. Why choose jquery child but not javascript?

Answer 1

Since textNode is also a childNode, you need to try

 document.getElementById("OwnerUpdatePanel").childNodes[3].value = ""; 

 <div id="OwnerUpdatePanel"> <input type="text" id="OwnerNameTextbox" value="name"> <input type="text" id="OwnerUsernameTextbox" value="user"> </div> 

Remove tag spacing (get rid of one child node)

 document.getElementById("OwnerUpdatePanel").childNodes[2].value = ""; 

 <div id="OwnerUpdatePanel"> <input type="text" id="OwnerNameTextbox" value="name"><input type="text" id="OwnerUsernameTextbox" value="user"> </div> 

From the documentation - childNodes also includes, for example, text nodes and comments. To skip them, use children

 document.getElementById("OwnerUpdatePanel").children[1].value = ""; 

  <div id="OwnerUpdatePanel"> <input type="text" id="OwnerNameTextbox" value="name"> <input type="text" id="OwnerUsernameTextbox" value="user"> </div>