How do you get which radio is selected within p:selectOneRadio
using javascript/jquery ?
Since the p:selectOneRadio
uses no radio tags I have no idea how to get the checked option using CSS selectors.
<p:selectOneRadio onchange="reactToChangedRadio()" >
<f:selectItem itemLabel="....." itemValue="..." />
<f:selectItem itemLabel="....." itemValue="..." />
<f:selectItem itemLabel="....." itemValue="..." />
</p:selectOneRadio>
You can use the jquery solution or choose a simple javascript solution:
document.getElementById("myFormId:mySelectId")[0].checked
See the post from CodeRanch: http://www.coderanch.com/t/210871/JSF/java/selectOneRadio-javascript-value
UPDATE: I must admit that I'm in a dept, and I'm sorry for that but yesterday I haven't had much time...
I must say that I haven't been able to get the radio value in the old fashioned javascript way:
<script type="text/javascript">
/* <![CDATA[ */
function reactToChangedRadio(){
alert("I'm in!");
var myval;
for(i=0;i<3;i++){
if(document.forms['myFormId']['myFormId:myRadio'][i].checked == true ){
myval = document.forms['myFormId']['myFormId:myRadio'].text/value;
}
}
alert( "val = " + myval );
}
/* ]]> */
</script>
On the other hand, this hard-coded solution works:
<script type="text/javascript">
/* <![CDATA[ */
function reactToChangedRadio(){
alert("I'm in");
var myval;
if(document.forms['myFormId']['myFormId:myRadio'][0].checked == true ){
myval = "first button";
}else if(document.forms['myFormId']['myFormId:myRadio'][1].checked == true ){
myval = "second button";
}else if(document.forms['myFormId']['myFormId:myRadio'][2].checked == true ){
myval = "third button";
}
alert( "val = " + myval );
}
/* ]]> */
</script>
,but of course, because of Primefaces power, there is a server side solution(using ReuqestContext component):
<h:form id="myFormId">
<p:selectOneRadio id="myRadio" value="#{handleFiles.radioVal}" >
<p:ajax event="change" oncomplete="handleComplete(xhr, status, args)" listener="#{handleFiles.testMethod}" />
<f:selectItem itemLabel="1" itemValue=" first" />
<f:selectItem itemLabel="2" itemValue=" second" />
<f:selectItem itemLabel="3" itemValue=" third" />
</p:selectOneRadio>
</h:form>
<script type="text/javascript">
function handleComplete(xhr, status, args) {
alert("Selected Radio Value" + args.myRadVal);
}
</script>
The server side code:
private String radioVal;
public String getRadioVal() {
return radioVal;
}
public void setRadioVal(String radioVal) {
this.radioVal = radioVal;
}
public void test(){
RequestContext context = RequestContext.getCurrentInstance();
context.addCallbackParam("myRadVal", radioVal);
System.out.println("radioVal: "+radioVal);
}
the ReuqestContext component can be found here: http://www.primefaces.org/showcase-labs/ui/requestContext.jsf (only for PF 3)