Edit bar disappears
Permalink
Hello,
I am including Prototype.js in my template page and have placed it after <?php Loader::element('header_required'); ?>
this makes the Edit bar disappear when in edit mode. I need to have prototype.js since my client's production site uses it for form validation. Is there a solution?
Thank you in advance
I am including Prototype.js in my template page and have placed it after <?php Loader::element('header_required'); ?>
this makes the Edit bar disappear when in edit mode. I need to have prototype.js since my client's production site uses it for form validation. Is there a solution?
Thank you in advance
I am not putting it in the footer. I am putting in the header. That is the only place you can include script files.
Thank you,
Hesam
Thank you,
Hesam
I've got mine at the bottom of my theme just above the footer.
<div id="botsection"><? $a = new Area('Main9');$a->display($c);?></div> <script type='text/javascript' src='<?=$this->getThemePath()?>/smooth.js'></script> <noscript>JavaScript page scroll effect present.</noscript> <?php $this->inc('elements/footer.php'); ?>
I typically disable any of my scripts or non-C5 libraries while in edit mode so I don't accidently fudge up any C5 edit mode process.
Your site will still run as intended for normal users and any dependent functionality will be in place.
if(!$c->isEditMode()){ echo ' <script type="text/javascript" src="' . $this->getThemePath() . '/media/js/main.js"></script>'; }
Your site will still run as intended for normal users and any dependent functionality will be in place.
Hi Beebs,
I have already tried that ant isEditMode() does not work for some reason.
Hesam
I have already tried that ant isEditMode() does not work for some reason.
Hesam
Also there will be error popus if there are still javascript calls but the functions are not icluded.
Hesam
Hesam
Did you mean the script still loads while in edit mode?
The $c variable is available in page templates without the need to declare it global, but in case it's being overridden by something else you can do:
Or, did you mean that even though the script is not being loaded you are still getting the same conflict?
The $c variable is available in page templates without the need to declare it global, but in case it's being overridden by something else you can do:
$c = Page::getCurrentPage(); if(!$c->isEditMode()){ // Load scripts here }else{ // Do not load any scripts }
Or, did you mean that even though the script is not being loaded you are still getting the same conflict?
I have html blocks that contain function calls, for validation purposes, that call functions that are in js files that are included in the header of my template. the isEditMode does not work and the script files are still being included in edit mode, but even if they didnot, there would be errors since the function calls would still be there. I hope that makes sense.
Thank you,
Hesam
Thank you,
Hesam
Yup, that makes sense now. Any chance we could see the contents of the HTML block in question? If you're doing inline JS we could take it out of the HTML itself and place it an external or inline script.
Here is the js but why does isEditMode not work?
Here it is:
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="right" class="formtxt">
<tbody><tr>
<td><img width="1" height="20" src="images/spacer.gif"> </td>
</tr>
<tr>
<td align="justify">If you are interested in learning more about how Sterling's solutions can support your needs, let us know! Call, email, or provide us your details. Our representatives will be pleased to assist you.</td>
</tr>
<tr>
<td><img width="1" height="10" src="images/spacer.gif"> </td>
</tr>
<tr>
<td><form action="./themes/sterling/enquiry-form.php" id="contact-form" name="contact-form" method="post">
<table width="100%" cellspacing="0" cellpadding="3" border="0" class="formtable1">
<tbody><tr>
<td colspan="2">
</td>
</tr>
<tr>
<td width="44%"><label> <span class="errors">* </span>First Name</label></td>
<td width="56%"><input type="text" id="firstname" class="required validate-alpha" name="firstname"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Last Name</label></td>
<td><input type="text" title="Enter your Last Name" class="required validate-alpha" id="lastname" name="lastname"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Phone</label></td>
<td><input type="text" class="required validate-phone" id="phone" name="phone"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Email Address</label></td>
<td><input type="text" class="required validate-email" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><hr size="1"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Company Name</label></td>
<td><input type="text" class="required" title="Enter your Company Name" id="company" name="company"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>City</label></td>
<td><input type="text" class="required" id="city" name="city"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>State</label></td>
<td><select onchange="displayState(this.value);" class="validate-selection" name="state">
<option value="" selected="selected">Select...</option>
<option value="OTHER">OTHER---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="District of Columbia">District of Columbia</option>
</select></td>
</tr>
<tr>
<td colspan="2"><div class="hiddenDiv" id="OTHER">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td width="45%"><label><span class="errors">* </span>Non US Region</label></td>
<td width="55%"><input type="text" class="hiddenDiv" id="non_us_state" name="non_us_state"></td>
</tr>
</tbody></table>
</div></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Zip Code</label></td>
<td><input type="text" class="required validate-zipcode" id="us_zip" name="us_zip"></td>
</tr>
<tr>
<td height="25"><label><span class="errors">* </span>Country</label></td>
<td valign="top"><select id="country" onblur="this.style.width='155px';" onclick="this.style.width='auto';" style="width:155px; position:absolute;" class="validate-selection" name="country">
<option value="">Select...</option>
<option value="United States" selected="selected">United States</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, the democratic republic of the">Congo, the democratic republic of the</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'ivoire">Cote D'ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakstan">Kazakstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia, the former yugoslav republic of">Macedonia, the former yugoslav republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="arshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States Of">Micronesia, Federated States Of</option>
<option value="Moldova, Republic Of">Moldova, Republic Of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk island">Norfolk island</option>
<option value="Northern mariana islands">Northern mariana islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="174">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan, Province of China">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Yugoslavia">Yugoslavia</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
</select></td>
</tr>
<tr>
<td colspan="2"><hr size="1"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Industry</label></td>
<td><select class="validate-selection" name="industry">
<option selected="selected" value="">Select...</option>
<option value="Agriculture">Agriculture</option>
<option value="Apparel">Apparel</option>
<option value="Banking">Banking</option>
<option value="Biotechnology">Biotechnology</option>
<option value="Chemicals">Chemicals</option>
<option value="Communications">Communications</option>
<option value="Construction">Construction</option>
<option value="Education">Education</option>
<option value="Electronics">Electronics</option>
<option value="Energy">Energy</option>
<option value="Engineering">Engineering</option>
<option value="Entertainment">Entertainment</option>
<option value="Environmental">Environmental</option>
<option value="Finance">Finance</option>
<option value="Financial Services">Financial Services</option>
<option value="Food And Beverage">Food And Beverage</option>
<option value="Government">Government</option>
<option value="Healthcare">Healthcare</option>
<option value="Hospitality">Hospitality</option>
<option value="Insurance">Insurance</option>
<option value="Machinery">Machinery</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Media">Media</option>
<option value="Not For Profit">Not For Profit</option>
<option value="Recreation">Recreation</option>
<option value="Retail">Retail</option>
<option value="Shipping">Shipping</option>
<option value="Staffing">Staffing</option>
<option value="Technology">Technology</option>
<option value="Telecommunications">Telecommunications</option>
<option value="Transportation">Transportation</option>
<option value="Utilities">Utilities</option>
<option value="Other...">Other...</option>
</select></td>
</tr>
<tr>
<td width="44%" height="25" style="white-space:nowrap;"><label><span class="errors">* </span>How did you hear?</label></td>
<td valign="top"><select onchange="displayReff(this.value); return false" class="validate-selection" id="hearofus" name="hearofus">
<option selected="selected" value="">Select...</option>
<option value="Referral">Referral</option>
<option value="Ceridian">Ceridian</option>
<option value="Ultimate Software">Ultimate Software</option>
<option value="LabCorp">LabCorp</option>
<option value="Jackson Lewis">Jackson Lewis</option>
<option value="Walton Management">Walton Management</option>
<option value="JobScience">JobScience</option>
<option value="WebHire">WebHire</option>
<option value="Other Sterling Partner">Other Sterling Partner</option>
<option value="Trade Show">Trade Show</option>
<option value="Search Engine">Search Engine</option>
<option value="From other">Other</option>
</select></td>
</tr>
<tr>
<td colspan="2"><div style="text-align:left; padding: 0 5px 0 15px;" class="hiddenDiv" id="Referral"><div id="txt">Please name company referral</div>
<input type="text" style="width:265px;" class="hiddenDiv" id="referredfrom" name="referredfrom">
</div>
</td>
</tr>
<tr>
<td><label> Comments</label></td>
<td align="left"> </td>
</tr>
<tr>
<td align="center" colspan="2"><textarea style="width:270px;" rows="5" id="comments" name="comments"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2"><label>
<input type="checkbox" value="Please scedule a Demo" style="width:auto;" id="demo" name="demo">
Please contact me to schedule a Demo</label></td>
</tr>
<tr>
<td colspan="2"><hr size="1"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="Submit" style="width:100px;" id="button" name="submit">
<input type="reset" value="Reset" onclick="valid.reset(); return false" style="width:100px;" id="Reset" name="Reset"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table></form>
<script type="text/javascript">
Validation.add('validate-phone', 'Invalid Phone Number! Please check digits', {
minLength : 7, // value must be at least 6 characters
maxLength : 10, // value must be no longer than 13 characters
include : ['validate-digits'] // also tests each validator included in this array of validator keys (there are no sanity checks so beware infinite loops!)
});
Validation.add('validate-zipcode', 'Invalid Zip Code! Please provide currect Zip Code', {
minLength : 5, // value must be at least 6 characters
maxLength : 7, // value must be no longer than 13 characters
include : ['validate-digits'] // also tests each validator included in this array of validator keys (there are no sanity checks so beware infinite loops!)
});
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('contact-form', {immediate : true, useTitles : true, onFormValidate : formCallback})
</script>
</td>
</tr>
</tbody></table>
Here it is:
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="right" class="formtxt">
<tbody><tr>
<td><img width="1" height="20" src="images/spacer.gif"> </td>
</tr>
<tr>
<td align="justify">If you are interested in learning more about how Sterling's solutions can support your needs, let us know! Call, email, or provide us your details. Our representatives will be pleased to assist you.</td>
</tr>
<tr>
<td><img width="1" height="10" src="images/spacer.gif"> </td>
</tr>
<tr>
<td><form action="./themes/sterling/enquiry-form.php" id="contact-form" name="contact-form" method="post">
<table width="100%" cellspacing="0" cellpadding="3" border="0" class="formtable1">
<tbody><tr>
<td colspan="2">
</td>
</tr>
<tr>
<td width="44%"><label> <span class="errors">* </span>First Name</label></td>
<td width="56%"><input type="text" id="firstname" class="required validate-alpha" name="firstname"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Last Name</label></td>
<td><input type="text" title="Enter your Last Name" class="required validate-alpha" id="lastname" name="lastname"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Phone</label></td>
<td><input type="text" class="required validate-phone" id="phone" name="phone"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Email Address</label></td>
<td><input type="text" class="required validate-email" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><hr size="1"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Company Name</label></td>
<td><input type="text" class="required" title="Enter your Company Name" id="company" name="company"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>City</label></td>
<td><input type="text" class="required" id="city" name="city"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>State</label></td>
<td><select onchange="displayState(this.value);" class="validate-selection" name="state">
<option value="" selected="selected">Select...</option>
<option value="OTHER">OTHER---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="District of Columbia">District of Columbia</option>
</select></td>
</tr>
<tr>
<td colspan="2"><div class="hiddenDiv" id="OTHER">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td width="45%"><label><span class="errors">* </span>Non US Region</label></td>
<td width="55%"><input type="text" class="hiddenDiv" id="non_us_state" name="non_us_state"></td>
</tr>
</tbody></table>
</div></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Zip Code</label></td>
<td><input type="text" class="required validate-zipcode" id="us_zip" name="us_zip"></td>
</tr>
<tr>
<td height="25"><label><span class="errors">* </span>Country</label></td>
<td valign="top"><select id="country" onblur="this.style.width='155px';" onclick="this.style.width='auto';" style="width:155px; position:absolute;" class="validate-selection" name="country">
<option value="">Select...</option>
<option value="United States" selected="selected">United States</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo, the democratic republic of the">Congo, the democratic republic of the</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'ivoire">Cote D'ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
<option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakstan">Kazakstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
<option value="Korea, Republic of">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia, the former yugoslav republic of">Macedonia, the former yugoslav republic of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="arshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia, Federated States Of">Micronesia, Federated States Of</option>
<option value="Moldova, Republic Of">Moldova, Republic Of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk island">Norfolk island</option>
<option value="Northern mariana islands">Northern mariana islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="174">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russian Federation">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syrian Arab Republic">Syrian Arab Republic</option>
<option value="Taiwan, Province of China">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Viet Nam">Viet Nam</option>
<option value="Virgin Islands, British">Virgin Islands, British</option>
<option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Yugoslavia">Yugoslavia</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
</select></td>
</tr>
<tr>
<td colspan="2"><hr size="1"></td>
</tr>
<tr>
<td><label><span class="errors">* </span>Industry</label></td>
<td><select class="validate-selection" name="industry">
<option selected="selected" value="">Select...</option>
<option value="Agriculture">Agriculture</option>
<option value="Apparel">Apparel</option>
<option value="Banking">Banking</option>
<option value="Biotechnology">Biotechnology</option>
<option value="Chemicals">Chemicals</option>
<option value="Communications">Communications</option>
<option value="Construction">Construction</option>
<option value="Education">Education</option>
<option value="Electronics">Electronics</option>
<option value="Energy">Energy</option>
<option value="Engineering">Engineering</option>
<option value="Entertainment">Entertainment</option>
<option value="Environmental">Environmental</option>
<option value="Finance">Finance</option>
<option value="Financial Services">Financial Services</option>
<option value="Food And Beverage">Food And Beverage</option>
<option value="Government">Government</option>
<option value="Healthcare">Healthcare</option>
<option value="Hospitality">Hospitality</option>
<option value="Insurance">Insurance</option>
<option value="Machinery">Machinery</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Media">Media</option>
<option value="Not For Profit">Not For Profit</option>
<option value="Recreation">Recreation</option>
<option value="Retail">Retail</option>
<option value="Shipping">Shipping</option>
<option value="Staffing">Staffing</option>
<option value="Technology">Technology</option>
<option value="Telecommunications">Telecommunications</option>
<option value="Transportation">Transportation</option>
<option value="Utilities">Utilities</option>
<option value="Other...">Other...</option>
</select></td>
</tr>
<tr>
<td width="44%" height="25" style="white-space:nowrap;"><label><span class="errors">* </span>How did you hear?</label></td>
<td valign="top"><select onchange="displayReff(this.value); return false" class="validate-selection" id="hearofus" name="hearofus">
<option selected="selected" value="">Select...</option>
<option value="Referral">Referral</option>
<option value="Ceridian">Ceridian</option>
<option value="Ultimate Software">Ultimate Software</option>
<option value="LabCorp">LabCorp</option>
<option value="Jackson Lewis">Jackson Lewis</option>
<option value="Walton Management">Walton Management</option>
<option value="JobScience">JobScience</option>
<option value="WebHire">WebHire</option>
<option value="Other Sterling Partner">Other Sterling Partner</option>
<option value="Trade Show">Trade Show</option>
<option value="Search Engine">Search Engine</option>
<option value="From other">Other</option>
</select></td>
</tr>
<tr>
<td colspan="2"><div style="text-align:left; padding: 0 5px 0 15px;" class="hiddenDiv" id="Referral"><div id="txt">Please name company referral</div>
<input type="text" style="width:265px;" class="hiddenDiv" id="referredfrom" name="referredfrom">
</div>
</td>
</tr>
<tr>
<td><label> Comments</label></td>
<td align="left"> </td>
</tr>
<tr>
<td align="center" colspan="2"><textarea style="width:270px;" rows="5" id="comments" name="comments"></textarea></td>
</tr>
<tr>
<td align="center" colspan="2"><label>
<input type="checkbox" value="Please scedule a Demo" style="width:auto;" id="demo" name="demo">
Please contact me to schedule a Demo</label></td>
</tr>
<tr>
<td colspan="2"><hr size="1"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="Submit" style="width:100px;" id="button" name="submit">
<input type="reset" value="Reset" onclick="valid.reset(); return false" style="width:100px;" id="Reset" name="Reset"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody></table></form>
<script type="text/javascript">
Validation.add('validate-phone', 'Invalid Phone Number! Please check digits', {
minLength : 7, // value must be at least 6 characters
maxLength : 10, // value must be no longer than 13 characters
include : ['validate-digits'] // also tests each validator included in this array of validator keys (there are no sanity checks so beware infinite loops!)
});
Validation.add('validate-zipcode', 'Invalid Zip Code! Please provide currect Zip Code', {
minLength : 5, // value must be at least 6 characters
maxLength : 7, // value must be no longer than 13 characters
include : ['validate-digits'] // also tests each validator included in this array of validator keys (there are no sanity checks so beware infinite loops!)
});
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('contact-form', {immediate : true, useTitles : true, onFormValidate : formCallback})
</script>
</td>
</tr>
</tbody></table>
Well, the HTML block by default will run the code you feed it regardless if it's in edit mode or not.
Since you're using inline JS for your form (eg. onchange) then the function linked to that event listener will be called in or out of edit mode - hence your problem.
Honestly, if it were me, I would nix the whole concept of JS form validation and handle it all server side in the "enquiry-form.php" file your form is being posted to.
Now, if you'd rather keep the JS validation then I would:
1. take the JS at the bottom (in the <script> tags), place it in an external JS file in your theme folder
2. remove the "onchange" events from the <select> tags (and any other "on event" occurrences) and add simple event listeners in the same file from step 1 (jQuery is the easiest way since it's preloaded with C5).
3. Load the external script from step 1 only while NOT in edit mode to avoid conflicts with C5's normal JS
Step 3 can be done in either the page template or the theme footer, but since this is a normal HTML block it could theoretically be done anywhere so I would vote for putting it your theme's footer.
Before you declare any variables or set any event listeners you could do a simple check to see if the form in present on the page:
Since you're using inline JS for your form (eg. onchange) then the function linked to that event listener will be called in or out of edit mode - hence your problem.
Honestly, if it were me, I would nix the whole concept of JS form validation and handle it all server side in the "enquiry-form.php" file your form is being posted to.
Now, if you'd rather keep the JS validation then I would:
1. take the JS at the bottom (in the <script> tags), place it in an external JS file in your theme folder
2. remove the "onchange" events from the <select> tags (and any other "on event" occurrences) and add simple event listeners in the same file from step 1 (jQuery is the easiest way since it's preloaded with C5).
3. Load the external script from step 1 only while NOT in edit mode to avoid conflicts with C5's normal JS
Step 3 can be done in either the page template or the theme footer, but since this is a normal HTML block it could theoretically be done anywhere so I would vote for putting it your theme's footer.
Before you declare any variables or set any event listeners you could do a simple check to see if the form in present on the page:
$(document).ready( function(){ if($('form#contact-form').size() > 0){ // set event listeners and declare the functions they will call here } } );
So I ended up going through Prototype.js and replace the $ function definition and where ever it was referenced with $$$. And its all good now.
Thank you for your help
Hesam
Thank you for your help
Hesam
Hi Hesam,
Im facing the same issue. I have a prototype.js in my header and I know I need to do something with it.. Could you summarize what you did with the prototype.js (or just attach it to your reply if you can).. Thanks a lot
Im facing the same issue. I have a prototype.js in my header and I know I need to do something with it.. Could you summarize what you did with the prototype.js (or just attach it to your reply if you can).. Thanks a lot
Hi Yulolimum,
What I had to do was to move Loader::element('header_required'); to right after the js script tags. That worked for me.
Hesam
What I had to do was to move Loader::element('header_required'); to right after the js script tags. That worked for me.
Hesam
Take a look at the attached file. Like I had mentioned I replaced the function declaration $ with $$$ and changed the calls to $$$ as well as you need to since function $ will not exist any longer.
Are you a programmer or are you new to function declarations, calls and constructors?
Hesam
Are you a programmer or are you new to function declarations, calls and constructors?
Hesam
Hey! Thanks, Appreciate your reply. I'm a front end developer.. Good with Html, CSS, and plugin integration (light jquery). However, Im not too good with custom coding...
Ya, I what you said, I narrowed it down to yesterday. If I moved the header required below the prototype, my accordion sitemap failed. When I move it above, the edit bar disappears. So I knew it was something with the prototype.js... I'll take a look at it tonight when i get off. Hopefully Ill be able to understand how you coded it. Thanks again. I'll report back after I take a look!
Ya, I what you said, I narrowed it down to yesterday. If I moved the header required below the prototype, my accordion sitemap failed. When I move it above, the edit bar disappears. So I knew it was something with the prototype.js... I'll take a look at it tonight when i get off. Hopefully Ill be able to understand how you coded it. Thanks again. I'll report back after I take a look!
Have you tried putting it at the bottom of your theme, not in the footer.php?
Even then it might not work if conflicts with other javascript!