I need the following link to automatically scroll to the top of the page when it is clicked.
Link:
<a href="#" onclick="pageSwitch(2); return false;"><img src="images/button-next.jpg" alt="Next" width="100" height="30" border="0" /></a>
The method I want to use is this:
Link:
<a href="#top-of-page"></a>
Section to scroll to:
<a name="top-of-page" id="top-of-page"></a>
Help is greatly appreciated!
-Samuel
Place the name of the fragment identifier in the link, and remove the return false part.
Or, you can keep the return false part and use scripting, such as window.scroll(0,0) to get back to the top of the page.
Thank you Paul! Also, would you know how to add validation to the OnClick function? I need several fields to be validated.
Then you will need to remove the inline scripting event, and use some proper functions instead.
Show us what you have for the form that needs validating, and where the link is in relation to that form.
This is the form:
The link is at the bottom.
<form action="home-insurance-quote.php" method="post">
<div id="form-line">
<label><strong>First Name</strong> <span id="asterick">*</span><br/>
<input name="first_name" type="text" id="first name" value="<?php echo $first_name; ?>"/>
</label>
<label><strong>M. Initial</strong><br/>
<input name="m_initial" type="text" id="m initial" value="<?php echo $m_initial; ?>" size="3"/>
</label>
<label><strong>Last Name</strong> <span id="asterick">*</span><br/>
<input name="last_name" type="text" id="last name" value="<?php echo $last_name; ?>"/>
</label>
<label><strong>Suffix (Sr., Jr., III)</strong><br/>
<input name="suffix" type="text" id="suffix" value="<?php echo $suffix; ?>" size="5"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Spouse's First Name</strong><br/>
<input name="spouses_first_name" type="text" id="spouses first name" value="<?php echo $spouses_first_name; ?>"/>
</label>
<label><strong>M. Initial</strong><br/>
<input name="spouses_m_initial" type="text" id="spouses m initial" value="<?php echo $spouses_m_initial; ?>" size="3"/>
</label>
<label><strong>Spouse's Last Name</strong><br/>
<input name="spouses_last_name" type="text" id="spouses last name" value="<?php echo $spouses_last_name; ?>"/>
</label>
<label><strong>Suffix (Sr., Jr., III)</strong><br/>
<input name="spouses_suffix" type="text" id="spouses suffix" value="<?php echo $spouses_suffix; ?>" size="5"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Mailing Address</strong> <span id="asterick">*</span><br/>
<input name="mailing_address" type="text" id="mailing address" value="<?php echo $mailing_address; ?>"/>
</label>
<label><strong>City</strong> <span id="asterick">*</span><br/>
<input name="mailing_city" type="text" id="mailing city" value="<?php echo $mailing_city; ?>"/>
</label>
<label><strong>State</strong> <span id="asterick">*</span><br/>
<select name="mailing_state" id="mailing state" />
<option>MA</option>
<option>NH</option>
</select>
</label>
<label><strong>Zip Code</strong> <span id="asterick">*</span><br/>
<input name="mailing_zip" type="text" id="mailing zip" value="<?php echo $mailing_zip; ?>" size="5"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Telephone (555-123-4567)</strong> <span id="asterick">*</span><br/>
<input name="telephone" type="text" id="telephone" value="<?php echo $telephone; ?>"/>
</label>
<label><strong>Email Address (yourname@example.com)</strong><br/>
<input name="email_address" type="text" id="email address" value="<?php echo $email_address; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<strong>Preferred way to be contacted: </strong>
<select name="preferred_contact" id="preferred contact" />
<option>Phone</option>
<option>Email</option>
<option>Mail</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Is mailing address same as physical address? If no, please enter physical address.</strong> <span id="asterick">*</span></span>
<label>
<input name="same_address" type="radio" id="same address" value="Yes"/>
Yes</label>
<label>
<input name="same_address" type="radio" id="same address" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Physical Address</strong> <span id="asterick">*</span><br/>
<input name="physical_address" type="text" id="physical address" value="<?php echo $physical_address; ?>"/>
</label>
<label><strong>City</strong> <span id="asterick">*</span><br/>
<input name="physical_city" type="text" id="physical city" value="<?php echo $physical_city; ?>"/>
</label>
<label><strong>State</strong> <span id="asterick">*</span><br/>
<select name="physical_state" id="physical state" />
<option>MA</option>
<option>NH</option>
</select>
</label>
<label><strong>Zip Code</strong> <span id="asterick">*</span><br/>
<input name="physical_zip" type="text" id="physical zip" value="<?php echo $physical_zip; ?>" size="5"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<div style="float:left; width:630px; padding:10px; background-color:#FFC; border:thin dotted #000;">
<p style="font-size:11px; line-height:normal;">In order to obtain an accurate quote for you through one of the many carriers we represent, we will collect information from consumer reporting agencies, such as driving records and claims history reports. We may also request your credit report and use insurance scoring to determine your eligibility for the insurance of the insurance premium you will be charged. Future reports may be used to update or renew your insurance.</p>
<p style="font-size:11px; line-height:normal;"><input name="read_agreement" type="checkbox" value="I have read the agreement" /> I have read and understand the Information Disclosure and Privacy Policy and would like to continue in order to obtain a quote. <span id="asterick">*</span></p>
</div>
</div>
<br/><br/>
<div id="form-line">
<span id="asterick"><strong>* Required Fields</strong></span>
</div>
<br/><br/>
<div id="form-line">
</div>
<br/><br/>
<div id="form-line">
<a href="#" onclick="pageSwitch(2); top-of-page;"><img src="images/button-next.jpg" alt="Next" width="100" height="30" border="0" /></a>
</div>
</form>
</div>
<div id="page2"><strong>Basic Policy Information</strong>
<form action="home-insurance-quote.php" method="post">
<div id="form-line">
<label><strong>What is the name of your current insurance carrier?</strong> <span id="asterick">*</span><br/>
<input name="current_insurance_carrier" type="text" id="current insurance carrier" value="<?php echo $current_insurance_carrier; ?>" size="50"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>What is the expiration date of your current policy? (mm/dd/yyyy)</strong> <span id="asterick">*</span><br/>
<input name="expiration_date_current_policy" type="text" id="expiration date current policy" value="<?php echo $expiration_date_current_policy; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Has your Homeowner Insurance been cancelled or non-renewed in the last 3 years?</strong> <span id="asterick">*</span></span>
<label>
<input name="cancelled_last_three_years" type="radio" id="cancelled_last_three_years" value="Yes"/>
Yes</label>
<label>
<input name="cancelled_last_three_years" type="radio" id="cancelled_last_three_years" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>If yes, Please explain:</strong><br/>
<input name="cancelled_last_three_years_explain" type="text" id="cancelled_last_three_years_explain" value="<?php echo $cancelled_last_three_years_explain; ?>" size="100"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Have you had any Homeowner claims in the last 3 years? If yes, please explain below:</strong> <span id="asterick">*</span></span>
<label>
<input name="claims_last_three_years" type="radio" id="claims_last_three_years" value="Yes"/>
Yes</label>
<label>
<input name="claims_last_three_years" type="radio" id="claims_last_three_years" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Date of Loss</strong><br/>
<input name="date_of_loss_1" type="text" id="date_of_loss_1" value="<?php echo $date_of_loss_1; ?>"/>
</label>
<label><strong>Description</strong><br/>
<input name="description_1" type="text" id="description_1" value="<?php echo $description_1; ?>" size="50"/>
</label>
<label><strong>Approx Loss Amount</strong><br/>
<input name="approx_loss_amount_1" type="text" id="approx_loss_amount_1" value="<?php echo $approx_loss_amount_1; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label>
<input name="date_of_loss_2" type="text" id="date_of_loss_2" value="<?php echo $date_of_loss_2; ?>"/>
</label>
<label>
<input name="description_2" type="text" id="description_2" value="<?php echo $description_2; ?>" size="50"/>
</label>
<label>
<input name="approx_loss_amount_2" type="text" id="approx_loss_amount_2" value="<?php echo $approx_loss_amount_2; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label>
<input name="date_of_loss_3" type="text" id="date_of_loss_3" value="<?php echo $date_of_loss_3; ?>"/>
</label>
<label>
<input name="description_3" type="text" id="description_3" value="<?php echo $description_3; ?>" size="50"/>
</label>
<label>
<input name="approx_loss_amount_3" type="text" id="approx_loss_amount_3" value="<?php echo $approx_loss_amount_3; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label>
<input name="date_of_loss_4" type="text" id="date_of_loss_4" value="<?php echo $date_of_loss_4; ?>"/>
</label>
<label>
<input name="description_4" type="text" id="description_4" value="<?php echo $description_4; ?>" size="50"/>
</label>
<label>
<input name="approx_loss_amount_4" type="text" id="approx_loss_amount_4" value="<?php echo $approx_loss_amount_4; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Is this a mobile or modular home?</strong> <span id="asterick">*</span></span>
<label>
<input name="mobile_modular_home" type="radio" id="mobile_modular_home" value="Yes"/>
Yes</label>
<label>
<input name="mobile_modular_home" type="radio" id="mobile_modular_home" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Is the home in a trust?</strong> <span id="asterick">*</span></span>
<label>
<input name="mobile_modular_home" type="radio" id="mobile_modular_home" value="Yes"/>
Yes</label>
<label>
<input name="mobile_modular_home" type="radio" id="mobile_modular_home" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Do you have any animals? If yes, please describe below:</strong> <span id="asterick">*</span></span>
<label>
<input name="any_animals" type="radio" id="any_animals" value="Yes"/>
Yes</label>
<label>
<input name="any_animals" type="radio" id="any_animals" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>If dog, please include breed. If mix breed, include breeds in mix.</strong><br/>
<input name="any_animals_explain" type="text" id="any_animals_explain" value="<?php echo $any_animals_explain; ?>" size="100"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<span id="asterick"><strong>* Required Fields</strong></span>
</div>
<br/><br/>
<div id="form-line">
<a href="#" onclick="pageSwitch(1); top-of-page;"><img style="margin-right:10px;" src="images/button-back.jpg" alt="Next" width="100" height="30" border="0" /></a>
<a href="#" onclick="pageSwitch(3); top-of-page;"><img src="images/button-next.jpg" alt="Next" width="100" height="30" border="0" /></a>
</div>
</form>
</div>
<div id="page3">
<strong>Basic Policy Information (Continued)</strong>
<form action="home-insurance-quote.php" method="post">
<div id="form-line">
<span style="float:left;"><strong>Do you have a trampoline on your premises?</strong> <span id="asterick">*</span></span>
<label>
<input name="trampoline" type="radio" id="trampoline" value="Yes"/>
Yes</label>
<label>
<input name="trampoline" type="radio" id="trampoline" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<strong>Do you have a pool?</strong> <span id="asterick">*</span>
<select name="pool" id="pool" />
<option>No</option>
<option>In Ground</option>
<option>Above Ground</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<strong>Do you have a diving board or a slide?</strong> <span id="asterick">*</span>
<select name="slide" id="slide" />
<option>Do Not have a Diving Board or a Slide</option>
<option>Have Diving Board, but do not have a Slide</option>
<option>No Diving Board, but have a Slide</option>
<option>Have both Diving Board and Slide</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<strong>Type of heat?</strong> <span id="asterick">*</span>
<select name="heat_type" id="heat_type" />
<option>Oil</option>
<option>Gas (natural)</option>
<option>Gas (propane)</option>
<option>Electric</option>
<option>Other</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<strong>If oil, where is oil tank?</strong> <span id="asterick">*</span>
<select name="oil_tank" id="oil_tank" />
<option>Do Not have Oil heat?</option>
<option>Garage or Basement</option>
<option>Outside</option>
<option>Other</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Do you own any recreational vehicles including snowmobiles, watercrafts, wave runners or jet skis?</strong> <span id="asterick">*</span></span>
<label>
<input name="recreational_vehicles" type="radio" id="recreational_vehicles" value="Yes"/>
Yes</label>
<label>
<input name="recreational_vehicles" type="radio" id="recreational_vehicles" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>If yes, list below:</strong><br/>
<input name="recreational_vehicles_list" type="text" id="recreational_vehicles_list" value="<?php echo $recreational_vehicles_list; ?>" size="100"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Current Limit for Coverage A (Dwelling)</strong> <span id="asterick">*</span><br/>
<input name="coverage_a_limit" type="text" id="coverage_a_limit" value="<?php echo $coverage_a_limit; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Personal Liability Limit on Current policy</strong> <span id="asterick">*</span><br/>
<input name="personal_liability_limit" type="text" id="personal_liability_limit" value="<?php echo $personal_liability_limit; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Medical Payments Limit on Current policy</strong> <span id="asterick">*</span><br/>
<input name="medical_payments_limit" type="text" id="medical_payments_limit" value="<?php echo $medical_payments_limit; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<strong>Current Property Deductible per occurence</strong> <span id="asterick">*</span>
<select name="current_property_deductible" id="current_property_deductible" />
<option>$250</option>
<option>$500</option>
<option>$1,000</option>
<option>$5,000</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<span id="asterick"><strong>* Required Fields</strong></span>
</div>
<br/><br/>
<div id="form-line">
<a href="#" onclick="pageSwitch(2); top-of-page;"><img style="margin-right:10px;" src="images/button-back.jpg" alt="Next" width="100" height="30" border="0" /></a>
<a href="#" onclick="pageSwitch(4); top-of-page;"><img src="images/button-next.jpg" alt="Next" width="100" height="30" border="0" /></a>
</div>
</form>
</div>
<div id="page4">
<strong>Basic Policy Information (Continued)</strong>
<form action="home-insurance-quote.php" method="post">
<div id="form-line">
<label><strong>Year of Construction? (yyyy)</strong> <span id="asterick">*</span><br/>
<input name="construction_year" type="text" id="construction_year" value="<?php echo $construction_year; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<strong>Type of Construction?</strong> <span id="asterick">*</span>
<select name="construction_type" id="construction_type" />
<option>Wood Frame</option>
<option>Log</option>
<option>Masonry</option>
<option>Metal</option>
<option>Other</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<strong>Style of home?</strong> <span id="asterick">*</span>
<select name="home_style" id="home_style" />
<option>Ranch</option>
<option>Colonial</option>
<option>Contemporary</option>
<option>Split</option>
<option>Other</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Square footage of Home?</strong> <span id="asterick">*</span><br/>
<input name="home_square_footage" type="text" id="home_square_footage" value="<?php echo $home_square_footage; ?>"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<strong>Garage?</strong> <span id="asterick">*</span>
<select name="garage" id="garage" />
<option>None</option>
<option>1 Car Attached</option>
<option>2 Car Attached</option>
<option>3 Car Attached</option>
<option>1 Car Underneath</option>
<option>2 Car Underneath</option>
<option>3 Car Underneath</option>
<option>1 Car Detached</option>
<option>2 Car Detached</option>
<option>3 Car Detached</option>
<option>Other</option>
</select>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Do you have any unattached structures on your property? (Shed, Barn, Unattached Garage)</strong> <span id="asterick">*</span></span>
<label>
<input name="unattached_structures" type="radio" id="unattached_structures" value="Yes"/>
Yes</label>
<label>
<input name="unattached_structures" type="radio" id="unattached_structures" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>If yes, please describe below and approximate replacement value of each.</strong><br/>
<input name="unattached_structures_describe" type="text" id="unattached_structures_describe" value="<?php echo $unattached_structures_describe; ?>" size="100"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<p>
<strong>Do you have any of the follwing items that should be scheduled on your policy. These items have coverage limitations, if not scheduled. Please check all that apply.</strong> <span id="asterick">*</span><br/>
<label>
<input type="checkbox" name="scheduled_items" value="Jewelry" id="scheduled_items_0" />
Jewelry</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Furs" id="scheduled_items_1" />
Furs</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Collectables" id="scheduled_items_2" />
Collectables</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Golf Equipment" id="scheduled_items_3" />
Golf Equipment</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Fine Arts" id="scheduled_items_4" />
Fine Arts</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Musical Instruments" id="scheduled_items_5" />
Musical Instruments</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Cameras" id="scheduled_items_6" />
Cameras</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Business Property" id="scheduled_items_7" />
Business Property</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Guns" id="scheduled_items_8" />
Guns</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Silverware" id="scheduled_items_9" />
Silverware</label>
<br />
<label>
<input type="checkbox" name="scheduled_items" value="Coins" id="scheduled_items_10" />
Coins</label>
<br />
</p>
</div>
<br/><br/>
<div id="form-line">
<span style="float:left;"><strong>Would you like your Homeowner policy to provide coverage for any expenses you may have as a result of Identity Theft?</strong> <span id="asterick">*</span></span>
<label>
<input name="identity_theft" type="radio" id="identity_theft" value="Yes"/>
Yes</label>
<label>
<input name="identity_theft" type="radio" id="identity_theft" value="No"/>
No</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>General comments or explanations regarding any of the previous questions:</strong><br/>
<input name="general_comments" type="text" id="general_comments" value="<?php echo $general_comments; ?>" size="100"/>
</label>
</div>
<br/><br/>
<div id="form-line">
<span id="asterick"><strong>* Required Fields</strong></span>
</div>
<br/><br/>
<div id="form-line">
<a href="#" onclick="pageSwitch(3); top-of-page;"><img style="margin-right:10px;" src="images/button-back.jpg" alt="Next" width="100" height="30" border="0" /></a>
<a href="#" onclick="pageSwitch(5); top-of-page;"><img src="images/button-next.jpg" alt="Next" width="100" height="30" border="0" /></a>
</div>
</form>
</div>
<div id="page5">
<strong>Comments</strong>
<form action="home-insurance-quote.php" method="post">
<div id="form-line">
<label><strong>Below please note anything you would like us to know while quoting your account.</strong><br/>
<textarea name="things_to_know" cols="100" rows="5" id="things_to_know"><?php echo $things_to_know; ?></textarea>
</label>
</div>
<br/><br/>
<div id="form-line">
<style type="text/css">
#referral_source {
float:left;
}
</style>
<span style="float:left;"><strong>How did you hear about us?</strong> <span id="asterick">*</span></span><br/>
<label>
<input name="referral_source" type="radio" id="referral_source" value="Referred by someone"/>
Referred by someone</label>
<br/>
<label>
<input name="referral_source" type="radio" id="referral_source" value="Yellow Pages"/>
Yellow Pages</label>
<br/>
<label>
<input name="referral_source" type="radio" id="referral_source" value="Advertisement received in mail"/>
Advertisement received in mail</label>
<br/>
<label>
<input name="referral_source" type="radio" id="referral_source" value="Driven by our office"/>
Driven by our office</label>
<br/>
<label>
<input name="referral_source" type="radio" id="referral_source" value="Other"/>
Other</label>
</div>
<br/><br/>
<div id="form-line">
<label><strong>Explain Other or give the name of the person that referred you:</strong> <span id="asterick">*</span><br/>
<textarea name="referral_source_explain" cols="100" rows="2" id="referral_source_explain"><?php echo $referral_source_explain; ?></textarea>
</label>
</div>
<br/><br/>
<div id="form-line">
<span id="asterick"><strong>* Required Fields</strong></span>
</div>
<br/><br/>
<div id="form-line">
<?php echo recaptcha_get_html($publickey, $errors['recaptcha']);?>
</div>
<br/><br/>
<div id="form-line">
<a href="#" onclick="pageSwitch(4); top-of-page;"><img style="margin-right:10px;" src="images/button-back.jpg" alt="Next" width="100" height="30" border="0" /></a>
<input type="image" src="images/button-submit.jpg" name="Submit" id="submit" value="Submit" />
</div>
</form>
The most effective way to perform validation on all of that, is by using a specialized system that’s proven to work easily and efficiently, such as jQuery’s validaton plugin.
By the way, spaces are strictly not allowed within id attributes.