Fetch selected value of p:selectOneMenu in JavaScript

Question

i need to fetch a value of a <p:selectOneMenu> in javascript but the result that i get is null. I am able to call the function but when i am trying to access the value of the <p:selectOneMenu>. i get null in alert box.

Please find the below code.

<p:outputLabel for="year" value="Year: " /> 
        <p:selectOneMenu id="year" style="width:150px   " value="#{someBean.year}">
        <f:selectItem itemLabel="All" itemValue="All"/>
        <f:selectItem itemLabel="2014" itemValue="2014"/>
        <f:selectItem itemLabel="2013" itemValue="2013"/>
        <f:selectItem itemLabel="2012" itemValue="2012"/>
        <f:selectItem itemLabel="2011" itemValue="2011"/>
        <f:selectItem itemLabel="2010" itemValue="2010"/>
        <f:selectItem itemLabel="2009" itemValue="2009"/>
    </p:selectOneMenu>

Javascript function:

function validateYearMonth()
{
    var yearValue1=document.getElementById('Form:year_input');
    var yearValue2=document.getElementById('Form:year');
    alert(yearValue1);
    alert(yearValue2);

}

Call to function:

 <p:commandButton id="Submit" action="#{someBean.functionName}"
    onclick="validateYearMonth()" value="Submit" ajax="false" style="float:right;">
  </p:commandButton>

I dont understand whats wrong. while i am able fetch the element if i am doing

var yearValue1=document.getElementById('Form:year_input');

but i am not able to fetch the value. Any help much appreciated.

@BalusC : I tried your method..I have updated my question with your solution that you gave but even for them i get null. Year is my entity ID and year_input is the id that i get after doing view source. Why is that i am receiving null? — sTg, Aug 06 '14 at 09:18
@BalusC : No as per the changes made i am not getting undefined. But i am getting null in both alerts mentioned in validateYearMonth function. — sTg, Aug 06 '14 at 09:23
@BalusC : Is there anything that i can do for solving the issue?. Please guide. — sTg, Aug 06 '14 at 09:26

score 4 · Answer 1 · answered Aug 06 '14 at 12:29

4

A very simple approach would be setting a widgetVar name and then get the current value!

<p:selectOneMenu widgetVar="yearWV">

in javascript (PF 4 and higher)

PF('yearWV').value

You can test this right away in your console

enter image description here

answered Aug 06 '14 at 12:29

Hatem Alimam

9,968
4
44
56

score 1 · Answer 2 · answered Jun 07 '19 at 18:30

    **BEST WORKING SOLUTION :**

       <p:selectOneMenu id="year" style="width:150px" value="#{someBean.year}" widgetVar="test" onchange="myTestFunction()">
                <f:selectItem itemLabel="All" itemValue="All"/>
                <f:selectItem itemLabel="2014" itemValue="2014"/>
                <f:selectItem itemLabel="2013" itemValue="2013"/>
                <f:selectItem itemLabel="2012" itemValue="2012"/>
                <f:selectItem itemLabel="2011" itemValue="2011"/>
                <f:selectItem itemLabel="2010" itemValue="2010"/>
                <f:selectItem itemLabel="2009" itemValue="2009"/>
            </p:selectOneMenu>

Java Script Code:

function myTestFunction()
        {

        var selectedValue=PF('test').getSelectedValue();

        alert(selectedValue);

        }

    [**For more information please check this link ** https://forum.primefaces.org/viewtopic.php?t=39793][1]

Got undefined with value, getSelectedValue did the job, thank you. — WaLinke, Mar 11 '21 at 12:40

score 0 · Answer 3 · answered Aug 06 '14 at 04:29

0

you have to add return keyword in onclick event. Eg.

         <p:commandButton id="Submit" action="#{someBean.functionName}"
          onclick="return validateYearMonth()" value="Submit" ajax="false" style="float:right;">
    </p:commandButton>

answered Aug 06 '14 at 04:29

Vicky

603
5
6

Tried but still i get undefined. – sTg Aug 06 '14 at 04:55

score -1 · Answer 4 · answered Aug 06 '14 at 05:04

-1

In your JSF form, set prependId=false. i.e.

<h:form id="myform" prependId="false">

If you do not set prependId to false, what you get in your generated HTML dropdown's id will be

<select id="myform:year">

In this case, in your javascript you have to get the element using document.getElementById("myform:year");

answered Aug 06 '14 at 05:04

user77318

80
5

I appreciate your answer. Helped me in some progress. I did what you said but now i get a null in alert box. Anything that i have missed. – sTg Aug 06 '14 at 05:19
1

@Shirish your `alert` is with the variable undefined. e.g using `year` but it should be `yearValue`. See on `month` case too. – Wundwin Born Aug 06 '14 at 05:38
Try this: `var e = document.getElementById("year");` `var yearValue = e.options[e.selectedIndex].value;` – user77318 Aug 06 '14 at 05:55
I have updated my answer. The main issue that i am facing is that i receive null at the beginning itself. what can be the problem? – sTg Aug 06 '14 at 09:19
I suspect if you are using the right id in the javascript for the select list component. If you are using Firefox, you can right click on the the select list and select "Inspect Element". I put your javascript in JSFiddle and did some modification to let you see how it works: http://jsfiddle.net/TL8r2/ – user77318 Aug 06 '14 at 09:56

Fetch selected value of p:selectOneMenu in JavaScript

4 Answers4