function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Prakash@SFDCPrakash@SFDC 

Problem with document.getElementbyID

Hi i am unable to get the selected radio button value into the javascript . I am getting as undefined .

i want the value when i am clicking another button in the same form.

<apex:page controller="sampleCon" sidebar="false" showHeader="false" id="testpage">
<script>
function checkThis(){
alert('hi');
var a=document.getElementById('{!$Component.theform.country}').value
alert(a);
}
</script>
<apex:form id="theform">
<apex:selectRadio value="{!country}" id="country" >
<apex:selectOptions value="{!items}"/>
</apex:selectRadio><p/>
<apex:commandButton value="Test" action="" onclick="checkThis();" rerender="out" status="status"/>
</apex:form>
</apex:page>

<apex:outputPanel id="out">
<apex:actionstatus id="status" startText="testing...">
<apex:facet name="stop">
<apex:outputPanel >
<p>You have selected:</p>
<apex:outputText value="{!country}"/>
</apex:outputPanel>
</apex:facet>
</apex:actionstatus>
</apex:outputPanel>
</apex:page>

=============================
Controller :

public class sampleCon {
String country = null;

public PageReference test() {
return null;
}

public List<SelectOption> getItems() {
List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption('US','US'));
options.add(new SelectOption('CANADA','Canada'));
options.add(new SelectOption('MEXICO','Mexico')); return options;
}

public String getCountry() {
return country;
}

public void setCountry(String country) { this.country = country; }
}

Best Answer chosen by Admin (Salesforce Developers) 
harsha__charsha__c

Hi

 

here I am pasting the page code of yours with a small tweak.

<apex:page controller="selectradio" sidebar="false" showHeader="false" id="testpage">
	<apex:form id="theform">
		<script>
			var a = '';
			function checkThis(){
				alert('hi');
				a1 = document.getElementById('{!$Component.theform.country}');
				alert(a1);
				alert(a);
			}
		</script>
		<apex:selectRadio value="{!country}" id="country" onchange="a=this.value;">
		<apex:selectOptions value="{!items}"/>
		</apex:selectRadio><p/>
		<apex:commandButton value="Test" onclick="checkThis();" rerender="out, theform" status="status"/>
	</apex:form>
	<apex:outputPanel id="out">
		<apex:actionstatus id="status" startText="testing...">
			<apex:facet name="stop">
				<apex:outputPanel >
					<p>You have selected:</p>
					<apex:outputText value="{!country}"/>
				</apex:outputPanel>
			</apex:facet>
		</apex:actionstatus>
	</apex:outputPanel>
</apex:page>

 If you observe the value resulted for alert(a1) and alert(a); , you may find object:HTML table element for the first alert.

 

This means that the selectradio component is decoded to HTML table element. That's the reason you are not able to get the value of the decoded table element.

 

And you will find the proper value for second alert. This is due to the onchange event. On change of the radio button value it will fetch the value of the selected radio button's value.

 

 

All Answers

harsha__charsha__c

Hi

 

here I am pasting the page code of yours with a small tweak.

<apex:page controller="selectradio" sidebar="false" showHeader="false" id="testpage">
	<apex:form id="theform">
		<script>
			var a = '';
			function checkThis(){
				alert('hi');
				a1 = document.getElementById('{!$Component.theform.country}');
				alert(a1);
				alert(a);
			}
		</script>
		<apex:selectRadio value="{!country}" id="country" onchange="a=this.value;">
		<apex:selectOptions value="{!items}"/>
		</apex:selectRadio><p/>
		<apex:commandButton value="Test" onclick="checkThis();" rerender="out, theform" status="status"/>
	</apex:form>
	<apex:outputPanel id="out">
		<apex:actionstatus id="status" startText="testing...">
			<apex:facet name="stop">
				<apex:outputPanel >
					<p>You have selected:</p>
					<apex:outputText value="{!country}"/>
				</apex:outputPanel>
			</apex:facet>
		</apex:actionstatus>
	</apex:outputPanel>
</apex:page>

 If you observe the value resulted for alert(a1) and alert(a); , you may find object:HTML table element for the first alert.

 

This means that the selectradio component is decoded to HTML table element. That's the reason you are not able to get the value of the decoded table element.

 

And you will find the proper value for second alert. This is due to the onchange event. On change of the radio button value it will fetch the value of the selected radio button's value.

 

 

This was selected as the best answer
Prakash@SFDCPrakash@SFDC

Harsh...........Superb Man... I am breaking my head from morning onwards...

 

Thanks alot dude... Its working fine..:-)
Prakash@SFDCPrakash@SFDC

Harsha.. One more problem here..In onother case i need to set radio button value from some another javascript method . 

 

I am passing a JSON value from controller to page . As long as the page is loaded i need to pasre the JSON and i need to set those values to the corresponding VF tags. If the radio button is a div tag then with Jquery or document.getElementbyId we can set the value directly . But it is VF selectOptions . So how can i set the value .

 

Assume that in getJson() we have that value . we need to set that to selectOptions radio tag . Please Check the below code and help me how to acheive . I dont want to  bind the values from constructor  to the appropriate tag. This should happen through the JS method of a page .

 

<apex:page controller="selectradio" sidebar="false" showHeader="false" id="testpage">
	<apex:form id="theform">
		<script>
		function getJson(){	
                     var a = 'Canada';// I got this value from controller
                        // I need to set this value to select radio id="country". Something like
                        document.getElementId('{$component.theform.country}') = a;
                    }
			function checkThis(){
				alert('hi');
				a1 = document.getElementById('{!$Component.theform.country}');
				alert(a1);
				alert(a);
			}
		</script>
		<apex:selectRadio value="{!country}" id="country" onchange="a=this.value;">
		<apex:selectOptions value="{!items}"/>
		</apex:selectRadio><p/>
		<apex:commandButton value="Test" onclick="checkThis();" rerender="out, theform" status="status"/>
	</apex:form>
	<apex:outputPanel id="out">
		<apex:actionstatus id="status" startText="testing...">
			<apex:facet name="stop">
				<apex:outputPanel >
					<p>You have selected:</p>
					<apex:outputText value="{!country}"/>
				</apex:outputPanel>
			</apex:facet>
		</apex:actionstatus>
	</apex:outputPanel>
</apex:page>
harsha__charsha__c

Hi Prakash, 

 

add this to your script and check!

a = 'US';
var labelArray = document.getElementsByTagName('label');
for(var i=0;i<labelArray.length;i++)
{
   alert('----------------'+labelArray[i].innerHTML);
   if(labelArray[i].innerHTML == ' ' + a || labelArray[i].innerHTML == a)
   {
     alert(' ' + a);
     labelArray[i].previousSibling.checked = true;
   }
}

 


Give KUDOs if the posts are helping you!
Prakash@SFDCPrakash@SFDC

Hi hasha,

 

It sound good .

 

But  multiple radio button section are there in my page so each time if use document.getElementsByTagName('label'); for which section this value will go . For example there are two sections country (radio) and State(radio) like that 4 sections are there . i got all the values in Javascript i need to pass these values to the corresponding tags. This is my original scnerio . I am looking for document.getElementById('{!$Component.theform.country}'); this type of scnerio but it seems there no way to set like this . Those sections were keep on  increasing or decreasing in the page . Do you have any idea to set these values for  multiple sections accordingly.

 

 
harsha__charsha__c

Ohh, Ok I got you.

 

This can be resolved by doing this.

 

var labelArray = document.getElementsByTagName('label');

 Change this as  followed

 

var labelArray = document.getElementById('{!$Component.theform.country}').getElementsByTagName('label');

 By this you can be able to fetch the labels of perticular selectRadio component.

 

I believe you have different ids for different selectRadio components.

 

 
Prakash@SFDCPrakash@SFDC

 It's Perfect Now.  Thanks alot harsha 

 

Adding to that we can try this way also .

 

var labelArray = document.getElementByName('{!$Component.theform.country}');
var radioValue;
for(var i=0;i<labelArray.length;i++){
  if(labelArray[i].checked)
    radioValue = labelArray[i].value;

   alert(radioValue);
}