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
Bob_zBob_z 

force.com form make fields read only when a value exist

I am having a issue with finding a solution to a visualforce page i created.  it is a web form via force.com site and I am trying to make any field on the form read only if there is a value in that field. I created a sample web form ( code is below) to hopefully have someone help resolve this issue.  In my sample i have javascript, but that doesnt seem to work either. What am I doing wrong? Any help would be greatly appreciated.

Link to sample record (https://mymerchandiseco-developer-edition.na39.force.com/ap?id=a0t0L0000051CZ0):

Code for visualforce page: 
<apex:page doctype="html-5.0" sidebar="false" showheader="false" cache="false" standardcontroller="ACME_Product__c" >
    <apex:form id="theform">
        <apex:pageMessages />
        <html>
        <style>
            ::-webkit-input-placeholder {
                color: blue;
            }

            div {
                border-bottom: solid;
                border-bottom-color: #000000;
                border-width: 1px;
                padding-top: 25px;
                padding-bottom: 3px;
                padding-left: 10px;
            }

            th {
                padding-left: 20px;
                margin-left: 10px;
                padding-top: 5px;
            }

            td {
                padding-left: 20px;
            }


            input, textarea {
                padding: 9px;
                border: solid 1px #E5E5E5;
                outline: 0;
                font: normal 13px/100% Verdana, Tahoma, sans-serif;
                background: #FFFFFF url('bg_form.png') left top repeat-x;
                background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
                background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
                box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
                -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
                -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
            }

            textarea {
                width: 250px;
                max-width: 250px;
                height: 100px;
                line-height: 150%;
            }

                input:hover, textarea:hover,
                input:focus, textarea:focus {
                    border-color: #C9C9C9;
                    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
                }

            .form label {
                margin-left: 10px;
                color: #999999;
            }

            .submit input {
                width: auto;
                padding: 9px 15px;
                background: #617798;
                border: 0;
                font-size: 14px;
                color: #FFFFFF;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
            }

            img {
                display: block;
                margin-left: auto;
                margin-right: auto;
                padding-top: 20px;
            }


            p {
                display: block;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                font-size: 15px;
            }
        </style>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        </head>

        <body>

           <div><h2>Information</h2></div>
            <table>

                <tr><th>Model #</th></tr>
                <tr>
                    <td>
                        <apex:inputField value="{!ACME_Product__c.Product_Model__c}" />
                    </td>
                </tr>

                <tr><th>Serial Number</th></tr>
                <tr>
                    <td>
                        <apex:inputField id="serial" value="{!ACME_Product__c.Serial_Number__c}" />
                    </td>
                </tr>
                <tr><th>Discharge Direction</th></tr>
                <tr>
                    <td>
                        <apex:inputField value="{!ACME_Product__c.Product_Options__c}" />
                    </td>
                </tr>

</table>
        </body>
    </html>
</apex:form>
<script>
    var serial = document.getElementById("{!$Component.theform.serial}");

    if (this.value != 0) {
        serial.disabled = true;
    } else {
        serial.disabled = false;
    }
        }
</script>
</apex:page>