Get value text from p:inputText javascript

Question

I'm trying something simple, just to get the text value inside a p:inputText thought Javascript, but I`m not getting it. Perhaps it's a different procedure with Primefaces, since if I don't use that, I don't encounter the problem.

My code:

<p:inputText value="any text" widgetVar="youtlink" ></p:inputText>
        <p:commandButton value="Search"    onclick="loadPlayer();" icon="ui-icon-search" />  


<script type="text/javascript">
    function loadPlayer() {
        alert(youtlink.text);
    }
</script>

I have tried also with JQuery but also no success.

Rendered view:

<form id="editlFrm" enctype="application/x-www-form-urlencoded" method="post"
name="editlFrm">
    <input id="editlFrm:j_id_7" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
    type="text" value="assd" name="editlFrm:j_id_7" role="textbox" aria-disabled="false"
    aria-readonly="false" aria-multiline="false">
    <button id="editlFrm:j_id_8" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
    type="submit" onclick="loadPlayer();;PrimeFaces.ab({source:'editlFrm:j_id_8'});return false;"
    name="editlFrm:j_id_8" role="button" aria-disabled="false">

Your question has also `jQuery` tag, you want solution in it too? — Blaster, Jul 19 '12 at 10:20
`jQuery` works with the rendered HTML, so putting your template/server-side doesn't really help. Post some of the rendered source please. — Fabrício Matté, Jul 19 '12 at 10:20
Adding it to your question through the Edit button is usually more useful. `;)` — Fabrício Matté, Jul 19 '12 at 10:29

score 12 · Accepted Answer · edited Aug 05 '16 at 17:54

12

Add id to your <p:inputText

like this

<p:inputText id="someID" value="any text" widgetVar="youtlink" ></p:inputText>

make sure your form got prependId="false"

than access the value like this

alert(jQuery('#someID').val());

if you don't want to add prependId="false" to your form you will have to change the jquery selector from jQuery('#someID').val() to jQuery("[id$='someID']").val()

EDIT

since your form called editlFrm

try this (make sure to assign someID id to your p:inputText)

alert(jQuery('#editlFrm\\:someID').val());

edited Aug 05 '16 at 17:54

Kukeltje

12,223
4
24
47

answered Jul 19 '12 at 10:26

Daniel

36,833
10
119
200

what do you see when u run this `alert(jQuery('#editlFrm\\:someID').length)` ? – Daniel Jul 19 '12 at 11:24
1

Ok i manage to do it, Thing is that id and widgetVar should be different. – cri_sys Jul 19 '12 at 11:28
NEVER use `prependId="false"` see https://stackoverflow.com/questions/7415230/uiform-with-prependid-false-breaks-fajax-render – Kukeltje Jan 28 '20 at 15:54

score 9 · Answer 2 · answered Oct 06 '14 at 04:59

I came across this question when trying to do something similar, and discovered that PrimeFaces exposes a widget's JQuery element through the jq property.

So in your example, you could simply do:

function loadPlayer() {
    alert(youtlink.jq.val());
}

In more recent PrimeFaces versions (since 5.0), exported widgets seem to no longer pollute the global namespace, but need to be accessed using the PF() method. The JQuery element can however still be accessed in the same way.

function loadPlayer() {
    alert(PF('youtlink').jq.val());
}

Michal.S · Answer 3 · 2020-01-28T15:51:23.200

7

My I think the simplest way:

PF('youtlink').jq.val();

You can set the value of input field like this:

PF('youtlink').jq.val('new value');

other way:

PrimeFaces.widgets.youtlink.jq.val()

and another way if you have ID:

$(PrimeFaces.escapeClientId("yourFormID:youtlink")).val()

tested with PF 5.3

edited Jan 28 '20 at 15:51

answered Sep 26 '16 at 10:11

Michal.S

501
6
12

score 0 · Answer 4 · answered May 02 '16 at 14:15

0

Also, there a simple way with javascript:

<h:form id="yourID" >
    <p:inputText id="anyID" value="any text" widgetVar="youtlink" ></p:inputText>
</h:form>

function loadPlayer() {
    alert(document.getElementById('yourID:anyID').value);
}

answered May 02 '16 at 14:15

Edson Cezar

25,884
5
19
27

Get value text from p:inputText javascript

4 Answers4

Linked