Apex Code Development You need to sign in to do that
Don't have an account?
Julianne How to disable output panel???
In need of Javascript Advice
We need some Javascript help, so I thought I'd post this question here and on developerforce:
We are in the process of developing a public facing site that exposes some input fields from a custom object and allows the guest user to edit those fields. The business requirement is to provide a check box that says something to the effect of "check this box if you want to keep all your information the same", and if the box is checked, the UI will lock the input fields from being edited. We cannot figure out the javascript that will make this happen. We've tried “rendered”, “disabled”, and “hidden” to try and collapse/hide the outputpanel, etc, etc. Here is the code thus far (I've highlighted the section that is causing trouble using red font):
<apex:page standardController="ION_LPP_Account_Detail__c" extensions="LPPdetail" showHeader="false" sidebar="false">
<apex:includeScript value="{!$Resource.jquery}"/>
<head>
<script>
function changeFont(input, textid) {
var x=document.getElementById(textid);
if(input.checked) { x.rendered = (input.checked); x.hide = (input.checked); x.style.fontWeight = "bold"; }
else { x.disabled = (input.checked); x.style.fontWeight = "normal"; }
}
</script>
</head>
<apex:form >
<!-- The first outputPanel calls the function, passing in the existing occurance of the checkbox, as well as the DOM ID of the output component. -->
<apex:outputPanel layout="block">
<label for="checkbox">Click this box to collapse fields below: </label>
<input id="checkbox" type="checkbox"
onclick="changeFont(this,'{!$Component.thePanel}');"/>
</apex:outputPanel>
<!-- The second outputPanel contains the text that will be changed. -->
<apex:outputPanel id="thePanel" layout="block">
Physician:<apex:inputField id="sp" value="{!ION_LPP_Account_Detail__c.OG_Secondary_Physician__c}"/>
</apex:outputPanel>
</apex:form>
</apex:page>
If anyone has any ideas they would be greatly welcomed! Thanks!
I don't know about doing it via Javascript - but you could have two output panels - one showing the fields as input fields, and one showing them as output fields - by default, only show the input panel, but if they check the box, re-render the page to only show the output panel instead - you can do that via an action support, so you should be able to the same via javascript
Hi Julianne,
You can try this,
document.getElementById(x).style.display = 'none'; // to show
document.getElementById(x).style.display = ''; // to hide