Apex Code Development You need to sign in to do that
Don't have an account?
Salesforce 283 When we click the button the name will be displayed in outputpanel with color Using Javascript
I am new to the Javascript with salesforce.
<apex:page controller="changecolorusingjs" >
<script>
function onclick()
{
var x,text;
x=document.getElementById('out').value;
x.style.color="blue";
if(x!=null)
{
name="acc.name";
}
document.getElementById('ou').innerHTML=name;
}
</script>
<apex:form id="d" >
<apex:pageBlock >
<apex:pageBlockSection id="out" >
<apex:inputField value="{!acc.name}" required="false"/>
<apex:inputField value="{!acc.phone}"/>
<apex:commandButton value="click" action="{!click}" onclick="onclick" reRender="d"/>
</apex:pageBlockSection>
<apex:outputPanel id="ou">
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
<apex:page controller="changecolorusingjs" >
<script>
function onclick()
{
var x,text;
x=document.getElementById('out').value;
x.style.color="blue";
if(x!=null)
{
name="acc.name";
}
document.getElementById('ou').innerHTML=name;
}
</script>
<apex:form id="d" >
<apex:pageBlock >
<apex:pageBlockSection id="out" >
<apex:inputField value="{!acc.name}" required="false"/>
<apex:inputField value="{!acc.phone}"/>
<apex:commandButton value="click" action="{!click}" onclick="onclick" reRender="d"/>
</apex:pageBlockSection>
<apex:outputPanel id="ou">
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
We have written ids to every component so we can easily traverse to any component in javascript.
In our visualforce page 'onclick' event fires first then action method will fire. If we write 'return false' then action method will not fire.
to give blue color to text in javascript rewrite code as below:
<script>
function showName()
{
var text;
var x = document.getElementById("pgAccount:frm:pbAccount:out:ifName").value;
document.getElementById("pgAccount:frm:pbAccount:ou").innerHTML=x;
document.getElementById("pgAccount:frm:pbAccount:ou").style.color = "blue";
}
</script>
If it helps you then mark question as 'SOLVED'.
Warm Regards,
Darshan Shah
All Answers
Just make small changes as shown below:
Kindly let me know if it helps you.
<apex:page Controller="changecolorusingjs" id="pgAccount">
<script>
function showName()
{
var text;
var x = document.getElementById("pgAccount:frm:pbAccount:out:ifName").value;
x.fontcolor("blue");
document.getElementById("pgAccount:frm:pbAccount:ou").innerHTML=x;
}
</script>
<apex:form id="frm" >
<apex:pageBlock id="pbAccount">
<apex:pageBlockSection id="out" >
<apex:inputField value="{!acc.name}" required="false" id="ifName"/>
<apex:inputField value="{!acc.phone}" id="ifPhone"/>
<apex:commandButton value="click" action="{!click}" onclick="showName();return true;" reRender="ou"/>
</apex:pageBlockSection>
<apex:outputPanel id="ou">
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
</apex:page>
Warm Regards,
Darshan Shah
We have written ids to every component so we can easily traverse to any component in javascript.
In our visualforce page 'onclick' event fires first then action method will fire. If we write 'return false' then action method will not fire.
to give blue color to text in javascript rewrite code as below:
<script>
function showName()
{
var text;
var x = document.getElementById("pgAccount:frm:pbAccount:out:ifName").value;
document.getElementById("pgAccount:frm:pbAccount:ou").innerHTML=x;
document.getElementById("pgAccount:frm:pbAccount:ou").style.color = "blue";
}
</script>
If it helps you then mark question as 'SOLVED'.
Warm Regards,
Darshan Shah
Let me know whether above answers solved your problem or not so I can help you.
If code is working fine then mark this question as solved so other people can get help from this.
Regards,
Darshan