<apex:page Controller="RFIForm" showHeader="false">
<apex:includeScript value="{!$Resource.StNorbertCollege_logo}"/>
<styl...
.checkrow {vertical-align:bottom; overflow: hidden; display: block; padding:
0; margin:0; }
.Column { width: 300px; }
.fie...
$('#filedErrorBox').show();
}
else
{
});

$(this).removeClass("fielderror");

}

$('.inputRequiredIfUS').each(function() {...
<apex:selectList value="{!studentType}" multiselect="false" size="1"
styleClass="inputRequired">
<apex:selectOptions value...
<apex:panelGroup >
<apex:outputText styleclass="label" value="International Access
Code"/>

</apex:panelGroup>
<apex:input...
Code"/><apex:outputText styleclass="req" value="" rendered="{!
con.MailingCountry=='US'}" />
</apex:panelGroup>
<apex:inpu...
<apex:panelGrid columns="2" columnClasses="Column" rendered="{!
studentType=='Freshman'}">
<apex:panelGroup >
<apex:output...
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School Zip Code"/>
</apex:panelGroup>
<apex:inputField ...
/>

Code"/>

<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College Zip
</apex:panelGroup>
<apex:inpu...
<div class="bottombuttons">
<apex:commandbutton value="Submit" onclick="submitForm(); return false;"
/>

</div>

</apex:fo...
Upcoming SlideShare
Loading in …5
×

Vf page

233 views
133 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
233
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vf page

  1. 1. <apex:page Controller="RFIForm" showHeader="false"> <apex:includeScript value="{!$Resource.StNorbertCollege_logo}"/> <style> table { border-color:#000000; border-style:none; font-weight:normal; font-size:12px; } td { text-align:left; vertical-align:top; padding: 2px 0; } th { text-align:left; background-color:#7D7D7D; font-size:14px; font-style:normal; color: #FFFFFF; vertical-align:top; } .small { color:#4F4F4F; font-size:10px; font-weight:normal; font-style:italic; } .req { font-weight:normal; color:red; backgroundimage:url('https://cwispssb.snc.edu/wtlgifs/web_required_cascade.png'); background-repeat: no-repeat; font-size: 90%; padding: 5px; display: inline-block; } .header { font-weight:bold; font-size:12px; color:#A24C1D; } label.error { color:red; font-size: 10px; line-height: 20px; padding: 0 5px; } input.error { border: 1px dotted red; }
  2. 2. .checkrow {vertical-align:bottom; overflow: hidden; display: block; padding: 0; margin:0; } .Column { width: 300px; } .fielderror{ border-color: red; } .errorBox { background-color: pink; border: 2px solid red; border-radius: 10px 10px 10px 10px; color: #CC0000; font-size: 14px; margin: 5px; padding: 5px; text-align: center; } .errorBtn input { margin: 5px; padding: 4px 10px; } .errorText { margin: 5px; } .cell { width: 300px } #filedErrorBox { display: none; } form{ margin: 10px; background-color: #FFFFFF; background-repeat: no-repeat; color: black; font-family: Verdana,Arial Narrow,helvetica,sans-serif; font-style: normal; } input, select, textarea{ font-family: Verdana,Arial Narrow,helvetica,sans-serif; } .requiredmsgtext { font-family: Verdana,Arial Narrow,helvetica,sans-serif; } .label { font-weight: bold; font-family: Verdana,Arial Narrow,helvetica,sans-serif; } .tableHeader { text-decoration: underline; font-family: Verdana,Arial Narrow,helvetica,sans-serif; font-weight: bold; } .headerUnderline { background-color: #A62900; width: 100%; padding: 2px; } .contentText { margin-bottom: 20px; display: block; } #banner { background-image: url("https://cwispssb.snc.edu/sncgifs/knightline_banner60.png"); backgroundrepeat: no-repeat; padding: 30px; } h1{ width: 100%; font-size: 20px; margin: 10px 0; display: block; } </style> <script> function submitForm() { var errorFound = false; $('#filedErrorBox').hide(); $('.inputRequired').each(function() { if($(this).val()=='' || $(this).val()==null) { $(this).addClass("fielderror"); errorFound=true;
  3. 3. $('#filedErrorBox').show(); } else { }); $(this).removeClass("fielderror"); } $('.inputRequiredIfUS').each(function() { if($('select[id$=mailingCountry]').val()=='US' && ($(this).val()=='' || $(this).val()==null)) { $(this).addClass("fielderror"); errorFound=true; $('#filedErrorBox').show(); } else { $(this).removeClass("fielderror"); } }); $('.validDate').each(function() { if(validateDate($(this).val())==false) { $(this).addClass("fielderror"); errorFound=true; $('#filedErrorBox').show(); } }); $('.inputRequired input.fielderror, .inputRequired select.fielderror').each(function(){$ ('#'+this.id.replace('_lkid','').replace(/:/g,':')).addClass('fielderror')}); if(errorFound==false){ save(); } else{ alert('Please Fix the Highlighted Errors'); } } function validateDate(testdate) { var date_regex = /^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$/ ; return date_regex.test(testdate); } </script> <apex:pageMessages ></apex:pageMessages> <apex:form Id="form"> <div id="banner"></div> <h1>Prospect Inquiry Request</h1> <div class="headerUnderline"></div> <span class="contentText">Please enter your information in the fields below. When completed click on the <b>Submit</b> button at the bottom of page. Please allow 3 to 5 business days for processing your request for information.</span> <span class="req"></span><apex:outputLabel styleClass="requiredmsgtext"> indicates a required field.</apex:outputLabel> <apex:actionFunction action="{!save}" name="save" /> <apex:panelGrid columns="2" columnClasses="Column"> <apex:outputText styleclass="tableHeader" value="Name and Personal Data" /><apex:outputText styleclass="tableHeader" value="" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Student Type"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup>
  4. 4. <apex:selectList value="{!studentType}" multiselect="false" size="1" styleClass="inputRequired"> <apex:selectOptions value="{!studentTypeOptions}"/> <apex:actionSupport event="onchange" rerender="studType"/> </apex:selectList> <apex:panelGroup > <apex:outputText styleclass="label" value="Domestic or International"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:selectList value="{!admitType}" multiselect="false" size="1" styleClass="inputRequired"> <apex:selectOptions value="{!admitTypeOptions}"/> <apex:actionSupport event="onchange" rerender="InternationalOnly"/> </apex:selectList> <apex:panelGroup > <apex:outputText styleclass="label" value="Student Legal First Name"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputText value="{!con.firstName}" id="firstName" styleClass="inputRequired" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Student Middle Name"/> </apex:panelGroup> <apex:inputText value="{!con.Middle_Name__c}" id="middleName"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Student Last Name"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputText value="{!con.lastName}" id="lastName" styleClass="inputRequired" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Suffix"/> </apex:panelGroup> <apex:inputText value="{!con.Suffix__c}" id="Suffix"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Nickname"/> </apex:panelGroup> <apex:inputText value="{!con.Nickname__c}" id="Nickname"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Date of Birth (MM/DD/YYYY)"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputText value="{!con.BirthDate}" id="BirthDate" styleClass="inputRequired validDate" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Gender"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputField value="{!con.Gender__c}" styleClass="inputRequired"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Home Phone"/> </apex:panelGroup> <apex:inputField value="{!con.Phone}" />
  5. 5. <apex:panelGroup > <apex:outputText styleclass="label" value="International Access Code"/> </apex:panelGroup> <apex:inputText value="{!intAccessCode}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Cell Phone"/> </apex:panelGroup> <apex:inputField value="{!con.MobilePhone}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Email Address"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputField value="{!con.Email}" styleClass="inputRequired"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Citizenship"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputField value="{!con.Citizenship__c}" styleClass="inputRequired"/> <apex:outputText styleclass="tableHeader" value="Home Address" /><apex:outputText styleclass="tableHeader" value="" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Street Address"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputField value="{!con.MailingStreet}" styleClass="inputRequired"/> <apex:panelGroup > <apex:outputText styleclass="label" value="City"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:inputText value="{!con.MailingCity}" styleClass="inputRequired"/> <apex:panelGroup > <apex:outputText styleclass="label" value="State/Province"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:selectList value="{!con.MailingState}" multiselect="false" size="1" styleClass="inputRequired"> <apex:selectOptions value="{!StateOptions}"/> </apex:selectList> <apex:panelGroup > <apex:outputText styleclass="label" value="Country"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:selectList id="mailingCountry" value="{!con.MailingCountry}" multiselect="false" size="1" styleClass="inputRequired"> <apex:selectOptions value="{!CountryOptions}"/> <apex:actionsupport event="onchange" rerender="zipCodeLable, countyLable" /> </apex:selectList> <apex:panelGroup id="zipCodeLable"> <apex:outputText styleclass="label" value="Zip
  6. 6. Code"/><apex:outputText styleclass="req" value="" rendered="{! con.MailingCountry=='US'}" /> </apex:panelGroup> <apex:inputField value="{!con.MailingPostalCode}" styleClass="inputRequiredIfUS"/> <apex:panelGroup id="countyLable"> <apex:outputText styleclass="label" value="County"/><apex:outputText styleclass="req" value="" rendered="{!con.MailingCountry=='US'}" /> </apex:panelGroup> <apex:inputField value="{!con.Current_County_Code__c}" styleClass="inputRequiredIfUS"/> <apex:outputText styleclass="tableHeader" value="Planning to Apply for" /><apex:outputText styleclass="tableHeader" value="" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Desired entry Term"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:selectList value="{!interest.Desired_Entry_Term__c}" multiselect="false" size="1" styleClass="inputRequired" > <apex:selectOptions value="{!desiredEntryTermOptions}"/> </apex:selectList> <apex:panelGroup > <apex:outputText styleclass="label" value="Desired Major"/> </apex:panelGroup> <apex:inputField value="{!interest.Desired_Major__c}" /> <apex:outputText styleclass="tableHeader" value="Interests" /><apex:outputText styleclass="tableHeader" value="" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Athletic Interests"/> <br/> <div class="small">Hold ctrl to select multiple<br/>Specific sport refers to Varsity level at SNC</div> </apex:panelGroup> <apex:selectList value="{!interest.Athletic_Interests__c}" multiselect="true" size="5" > <apex:selectOptions value="{!athleticInterestsOptions}"/> </apex:selectList> <apex:panelGroup > <apex:outputText styleclass="label" value="Other Interests"/> <br/> <div class="small">Hold ctrl to select multiple</div> </apex:panelGroup> <apex:selectList value="{!interest.Other_Interests__c}" multiselect="true" size="5" > <apex:selectOptions value="{!otherInterestsOptions}"/> </apex:selectList> </apex:panelGrid> <apex:outputPanel id="studType"> <apex:outputText styleclass="tableHeader" value="High School Information" rendered="{!studentType=='Freshman'}" /> <apex:outputText styleclass="tableHeader" value="" rendered="{! studentType=='Freshman'}" />
  7. 7. <apex:panelGrid columns="2" columnClasses="Column" rendered="{! studentType=='Freshman'}"> <apex:panelGroup > <apex:outputText styleclass="label" value="Home Schooled"/> </apex:panelGroup> <apex:inputField value="{!interest.Home_Schooled__c}" > <apex:actionSupport event="onchange" rerender="highSchoolPanel"/> </apex:inputField> <apex:outputPanel id="highSchoolPanel"> <apex:panelGrid columns="2" rendered="{! interest.Home_Schooled__c==false}"> <apex:panelGroup > <apex:outputText styleclass="label" value="High School Country"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_Country__c}"> <apex:actionSupport event="onchange" rerender="highSchoolNamePanel"/> </apex:inputField> <apex:panelGroup > <apex:outputText styleclass="label" value="High School State/Province"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_State__c}"> <apex:actionSupport event="onchange" rerender="highSchoolNamePanel"/> </apex:inputField> <apex:panelGroup > <apex:outputText styleclass="label" value="High School Name"/><apex:outputText styleclass="req" value=""/> </apex:panelGroup> <apex:outputPanel id="highSchoolNamePanel"> <apex:selectList value="{!con.High_School__c}" multiselect="false" size="1" styleClass="inputRequired"> <apex:selectOptions value="{!HighSchoolOptions}"/> <apex:actionsupport event="onchange" rerender="highSchoolOtherLabel, highSchoolOtherField" /> </apex:selectList> </apex:outputPanel> <apex:outputPanel id="highSchoolOtherLabel"><apex:panelGroup rendered="{!con.High_School__c==otherHighschoolId}"> <apex:outputText styleclass="label" value="High School Other"/> </apex:panelGroup></apex:outputPanel> <apex:outputPanel id="highSchoolOtherField"><apex:inputField value="{! con.High_School_Other__c}" rendered="{! con.High_School__c==otherHighschoolId}" /></apex:outputPanel> <apex:panelGroup > <apex:outputText styleclass="label" value="High School Address"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_Address__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="High School City"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_City__c}" />
  8. 8. <apex:panelGroup > <apex:outputText styleclass="label" value="High School Zip Code"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_Zip_Code__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="High School GPA"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_GPA__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="ACT score"/> </apex:panelGroup> <apex:inputField value="{!interest.ACT_Score__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="HS Graduation Date" /><apex:outputText styleclass="req" value=""/> <br/> <div class="small">Approximate date graduating from High School</div> </apex:panelGroup> <apex:inputField value="{!interest.High_School_Grad_Date__c}" styleClass="inputRequired" /> </apex:panelGrid> </apex:outputPanel> </apex:panelGrid> <apex:outputText styleclass="tableHeader" value="Prior College Information" rendered="{!studentType=='Transfer'}" /> <apex:outputText styleclass="tableHeader" value="" rendered="{! studentType=='Transfer'}" /> <apex:panelGrid columns="2" columnClasses="Column" rendered="{! studentType=='Transfer'}"> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College Code"/> </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_Code__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College Name"/> </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_Name__c}" /> Address"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_Address__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College City"/> </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_City__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College State/Province"/> </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_State_Province__c}"
  9. 9. /> Code"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College Zip </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_Zip_Code__c}" /> Country"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_Country__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Date Attended From"/> </apex:panelGroup> <apex:inputField value="{! interest.Prior_College_Date_Attended_From__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Date Attended To"/> </apex:panelGroup> <apex:inputField value="{! interest.Prior_College_Date_Attended_To__c}" /> Degree"/> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_Degree__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Prior College GPA"/> </apex:panelGroup> <apex:inputField value="{!interest.Prior_College_GPA__c}" /> </apex:panelGrid> </apex:outputPanel> <apex:outputPanel id="InternationalOnly"> <apex:outputText styleclass="tableHeader" value="International Information" rendered="{!admitType=='International'}" /><apex:outputText styleclass="tableHeader" value="" rendered="{!admitType=='International'}" /> <apex:panelGrid columns="2" columnClasses="Column" rendered="{! admitType=='International'}"> <apex:panelGroup > <apex:outputText styleclass="label" value="Native Language"/> </apex:panelGroup> <apex:inputField value="{!con.First_Language__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Nation of Citizenship"/> </apex:panelGroup> <apex:inputField value="{!con.Citizenship_Country__c}" /> <apex:panelGroup > <apex:outputText styleclass="label" value="Nation of Birth"/> </apex:panelGroup> <apex:inputField value="{!con.Birth_Country__c}" /> </apex:panelGrid> </apex:outputPanel>
  10. 10. <div class="bottombuttons"> <apex:commandbutton value="Submit" onclick="submitForm(); return false;" /> </div> </apex:form> </apex:page> <apex:outputPanel id="studType"> <apex:outputText styleclass="tableHeader" value="High School Information" rendered="{!studentType=='Freshman'}" /> <apex:outputText styleclass="tableHeader" value="" rendered="{! studentType=='Freshman'}" /> <!-- two column table specified --> <apex:panelGrid columns="2" columnClasses="Column" rendered="{! studentType=='Freshman'}"> <!-- row 1 cell 1 --> <apex:panelGroup > <apex:outputText styleclass="label" value="Home Schooled"/> </apex:panelGroup> <!-- row 1 cell 2 --> <apex:inputField value="{!interest.Home_Schooled__c}" > <apex:actionSupport event="onchange" rerender="highSchoolPanel"/> </apex:inputField> <!-- row 2 cell 1 --> <apex:outputPanel id="highSchoolPanel"> <!-- nested table within the first cell in the second row --> <apex:panelGrid columns="2" rendered="{! interest.Home_Schooled__c==false}"> <apex:panelGroup > <apex:outputText styleclass="label" value="High School Country"/> </apex:panelGroup> <apex:inputField value="{!interest.High_School_Country__c}"> <apex:actionSupport event="onchange" rerender="highSchoolNamePanel"/> </apex:inputField> <apex:panelGroup > <apex:outputText styleclass="label" value="High School State/Province"/> </apex:panelGroup> [snip] </apex:panelGrid> </apex:outputPanel> </apex:panelGrid>

×