how to get input value from sharepoint people editor textbox(not checked value) via js?

Question

I'm meeting a problem with getting input value from sharepoint people editor via js.

usually, we can get value from this control via below codes:

 var user;
    var pe = document.getElementById('<%=peStaffAccount.ClientID %>').getElementsByTagName('div');
    var i;
    var peopleEnt;
    for (i in pe) {
        if (pe[i].id != null) {
            if (pe[i].id == 'divEntityData' && pe[i].description != null) {
                peopleEnt = pe[i]
            }
        }

    }
// this is the value from this textbox but only after we click checked user
alert(peopleEnt .description)

my question is, when i input some value into this textbox directly, how can I get this value? refer to below image, my input value.. I want to get this... enter image description here

Is you JS code included in an ASPX page? When you view the source code in the browser, does getElementById('<%=peStaffAccount.ClientID %>') point to an existing control on the page? — Philipp Schmid, Jul 20 '11 at 20:42
What is the error you are seeing? Alert of an empty string (description), or does the script stop executing because getElementById('<%=peStaffAccount.ClientID %>') fails to return a valid object? — Philipp Schmid, Jul 20 '11 at 20:43
Hi Philipp, yes this JS code is included in aspx and it can get that control, but after observing with IE developer tool, i found it is based of 4 controls which cause me i cannot cant that text box... — Iori-kyo, Jul 27 '11 at 02:34

James Montagne · Answer 1 · 2011-07-20T20:59:54.457

Working with people picker in javascript is pretty awful. The actual control that you type into is really a content editable div. It will have an ID which is the ID of your control followed by _upLevelDiv. You will need to grab that and then parse what is within.

The code you posted is actually dealing with the nested divs created when an entity is resolved. These divs are contained within upLevelDiv.

If you only have text in the control as shown in your screenshot, then it's pretty straightforward. If you have a mix of text and resolved entities then it's more complicated as there will be both text and html in the div.

NOTE: All of the above is only true for IE, in other browsers it uses a textarea (which is hidden when in IE).

Hi Kingjiv, I've tried to found that textarea but failed, don't know how to get its input value yet.... Thanks for your reply... — Iori-kyo, Jul 27 '11 at 02:35

score 0 · Accepted Answer · answered Jul 20 '11 at 05:10

I am not sure if I have understood the question properly.

You can bind KeyPress Event to the textbox, so that you can get the text real time while typing before clicking checked user button.

    yourTextField.onKeyPress = function(){
          var txt = yourTextField.value;
    }

score 0 · Answer 3 · answered Jul 20 '11 at 20:46

Use the following to investigate the rendered page:

Use 'View Source' to make sure that getElementById('<%=peStaffAccount.ClientID %>') is correctly substituted by the server with a valid ClientID.
Use the browser's debugger (F12 in IE9, Developer tools in Chrome) to inspect the DOM for the existence of the element by that ClientID
Using the same tools, watch for any script error reported by the debugging tools (which are otherwise silently ignored by the browsers).

Hi Philipp, I have used tools to find that control but failed, will continue to observe it. — Iori-kyo, Jul 27 '11 at 02:38

how to get input value from sharepoint people editor textbox(not checked value) via js?

3 Answers3