Javascript to blank textbox value wont work, but jquery does

Question

I have an update panel in a page for the users to specify an "owner" for an event. that owner would be a user in our active directory. The panel lets the user enter some text then click on a search button to find matching users in our Active Directory. When the user selects a user from the matching list, the owner's name and username are populated. The username is kept hidden because the user does not need to see that. All of that works fine

My problem is that I have an event handler that is triggered whenever the text of the owner name is changed, if the user changes the owner name, I want to blank the owner username until the user actually brings up the matching list and selects a valid entry.

My problem is that when I try to access the value of the hidden textbox with Javascript, I cannot, but when I try jquery equivalent code, it works just 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 ownernametextbox change event

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

This sets my OwnerNameTextBox to blank, which is not what I want. I want to set the OwnerUsernameTextbox to blank. But when I change the subscript for childNodes to 2, nothing is changed (examining the value of childNodes[2] with an alert, gives me "undefined"). But if I try using jquery:

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

that works just fine. Why would the jquery child selection work, but not the javascript one?

Nikhil Aggarwal · Accepted Answer · 2015-12-01 19:44:45Z

6

+100

As 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 the spacing between tags (get rid of one childnode)

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 documentation - childNodes also includes e.g. 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>

edited Dec 1, 2015 at 19:44

answered Dec 1, 2015 at 18:11

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user4843530 Over a year ago

Thank you. Went to lunch and came back to check, not expecting to have an answer, much less such a thorough answer with code snippets and all. I think I am running up against a lack of understanding of the DOM. Changed my code to use children instead of childNodes, and it works just fine. Again, thanks!

Nikhil Aggarwal Over a year ago

@AgapwIesu - Welcome. Happy to help you and need not worry about understanding. As the time progress, your efforts will get that for you :)

user4843530 Over a year ago

But... what text nodes? Even when I inspect the resulting html (from my aspx), it only has those inputs, nothing else in between.

Nikhil Aggarwal Over a year ago

@AgapwIesu - The div element has a text node at index 0. Then at index 1 is the first input element. Then as there is an enter/next line/space between input 1 and input 2, there is another text node at index 2. And finally, second input is at index 3. I have added more details in the answer for reference.

user4843530 Over a year ago

Ok, I am adding an appointment to my calendar that will remind me to put a bounty on this question and award it to you, as soon as the SO software will allow me. You have been more than helpful, and I can't thank you enough.

|

Collectives™ on Stack Overflow

Javascript to blank textbox value wont work, but jquery does

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related