在JavaScript中获取p：selectOneMenu的选定值

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.

Answer 1

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

Answer 2

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>

Answer 3

    **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]

Answer 4

In your JSF form, set prependId=false. ie

<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");