Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- $(function() {
- // show contact_us_form1
- $("div#contact_us_form1").show();
- //$("div#contact_us_form2").show(); // show contact_us_form2
- //$("div#contact_us_form3").show(); // show contact_us_form3
- });
- </head>
- <!-- implement generic contact form -->
- <div id="contact_us">
- <p>
- <em>
- Personal information is collected to enable follow-up questions or to provide
- information as plans progress. If you check 'Remain Anonymous,' no personal information
- is required or saved, other than the comment.
- </em>
- </p>
- <br/>
- <div id="contact_us_form1" style="display:none">
- <form id="contact_us_form1" method="POST" action="" name="Print Request">
- <!-- form script -->
- <input type="hidden" name="print_config" value="email">
- <input type="hidden" name="recipient" value="">
- <input type="hidden" name="redirect" value="">
- <input type="hidden" name="sort" value="order:first_name,last_name,email,phone,issue_comments,success_measure,upload,remain_anonymous">
- <input type="hidden" name="subject" value="Whitemud Comments Submitted">
- <input type="hidden" name="visited" value="" />
- <fieldset>
- <legend>
- 1.<b>Issue Identification</b>. Your comments at this stage will help us to create
- relevant actions for the draft plan.
- </legend>
- <div>
- <label for="first_name">First Name:</label>
- <input class="first_name" name="first_name" type="text"/>
- <span class="first_name_info"></span>
- </div>
- <div>
- <label for="last_name">Last Name:</label>
- <input class="last_name" name="last_name" type="text"/>
- <span class="last_name_info"></span>
- </div>
- <div>
- <label for="email">Email:</label>
- <input class="email" name="email" type="text"/>
- <span class="email_info"></span>
- </div>
- <div>
- <label for="phone">Phone:</label>
- <input class="phone" name="phone" type="text"/>
- <span class="phone_info"></span>
- </div>
- <div>
- <label for="issue_comments">I'd like to protect or I'm concerned about this land
- or water related issue in my watershed:</label>
- <textarea id="issue_comments" name="issue_comments"></textarea>
- <span id="issue_comments_info"></span>
- </div>
- <div>
- <label for="success_measure">We've been successful when:</label>
- <textarea id="success_measure"></textarea>
- <span id="success_measure_info"></span>
- </div>
- <div>
- <label for="upload">Upload a photo to illustrate your issue or to add to our database.</label>
- <input type="file" />
- <span id="upload_info"></span>
- </div>
- <div>
- <label for="remain_anonymous">Remain Anonymous</label>
- <input class="remain_anonymous" name="remain_anonymous" type="checkbox"/>
- <span class="remain_anonymous"></span>
- </div>
- <div>
- <input id="submit_contact_us_form1" name="submit_draft_comments" type="submit" value="Submit Comments"/>
- </div>
- </fieldset>
- </form>
- </div>
- <div id="contact_us_form2" style="display:none">
- <form id="contact_us_form2" method="POST" action="" name="Print Request">
- <!-- form script -->
- <input type="hidden" name="print_config" value="email">
- <input type="hidden" name="recipient" value="">
- <input type="hidden" name="redirect" value="">
- <input type="hidden" name="sort" value="order:first_name,last_name,email,phone,draft_comments,draft_details,remain_anonymous">
- <input type="hidden" name="subject" value="Whitemud Comments Submitted">
- <fieldset>
- <legend>
- 2.<b>Draft Plan Review</b>. Your cooments at this stage will help us improve the draft
- management plan.
- </legend>
- <div>
- <label for="first_name">First Name:</label>
- <input class="first_name" name="first_name" type="text"/>
- <span class="first_name_info"></span>
- </div>
- <div>
- <label for="last_name">Last Name:</label>
- <input class="last_name" name="last_name" type="text"/>
- <span class="last_name_info"></span>
- </div>
- <div>
- <label for="email">Email:</label>
- <input class="email" name="email" type="text"/>
- <span class="email_info"></span>
- </div>
- <div>
- <label for="phone">Phone:</label>
- <input class="phone" name="phone" type="text"/>
- <span class="phone_info"></span>
- </div>
- <div>
- <label for="draft_comments">Please provide general comments on the draft plan here:</label>
- <textarea id="draft_comments" name="draft_comments"></textarea>
- <span id="draft_comments_info"></span>
- </div>
- <div>
- <label for="draft_details">Please provide page-specific comments here:</label>
- <textarea id="draft_details"></textarea>
- <span id="draft_details_info"></span>
- </div>
- <div>
- <label for="remain_anonymous">Remain Anonymous</label>
- <input class="remain_anonymous" name="remain_anonymous" type="checkbox"/>
- <span class="remain_anonymous"></span>
- </div>
- <div>
- <input id="submit_contact_us_form2" name="submit_draft_comments" type="submit" value="Submit Comments"/>
- </div>
- </fieldset>
- </form>
- </div>
- <div id="contact_us_form3" style="display:none">
- <form id="contact_us_form3" method="POST" action="" name="Print Request">
- <!-- form script -->
- <input type="hidden" name="print_config" value="email">
- <input type="hidden" name="recipient" value="">
- <input type="hidden" name="redirect" value="">
- <input type="hidden" name="sort" value="order:first_name,last_name,email,phone,implementation_comments,remain_anonymous">
- <input type="hidden" name="subject" value="Whitemud Comments Submitted">
- <fieldset>
- <legend>
- 3.<b>Plan Implementation</b>. Your comments at this stage will be on the
- progress of plan implementation in your watershed.
- </legend>
- <div>
- <label for="first_name">First Name:</label>
- <input class="first_name" name="first_name" type="text"/>
- <span class="first_name_info"></span>
- </div>
- <div>
- <label for="last_name">Last Name:</label>
- <input class="last_name" name="last_name" type="text"/>
- <span class="last_name_info"></span>
- </div>
- <div>
- <label for="email">Email:</label>
- <input class="email" name="email" type="text"/>
- <span class="email_info"></span>
- </div>
- <div>
- <label for="phone">Phone:</label>
- <input class="phone" name="phone" type="text"/>
- <span class="phone_info"></span>
- </div>
- <div>
- <label for="implementation_comments">Please provide comments on your experience with plan
- implementation here:</label>
- <textarea id="implementation_comments" name="implementation_comments"></textarea>
- <span id="implemenation_comments_info"></span>
- </div>
- <div>
- <label for="remain_anonymous">Remain Anonymous</label>
- <input class="remain_anonymous" name="remain_anonymous" type="checkbox"/>
- <span class="remain_anonymous"></span>
- </div>
- <div>
- <input id="submit_contact_us_form3" name="submit_implementation_comments" type="submit" value="Submit Comments"/>
- </div>
- </fieldset>
- </form>
- </div>
- </div>
- start contact_is_3.js
- $(function() {
- var form = $("#contact_us_form3");
- var first_name = $("#first_name");
- var first_name_info = $("#first_name_info");
- var last_name = $("#last_name");
- var last_name_info = $("#last_name_info");
- var email = $("#email");
- var email_info = $("#email_info");
- var phone = $("#phone");
- var phone_info = $("#phone_info");
- var remain_anonymous = $("#remain_anonymous");
- var remain_anonymous_info = $("#remain_anonymous_info");
- var implementation_comments = $("#implementation_comments");
- var implementation_comments_info = $("#implementation_comments_info");
- // form validation functions
- function validateFirstName(){
- // if first name is not valid
- if(first_name.val().length < 4){
- first_name.addClass("error");
- first_name_info.text("First names must be at least 3 characters long.");
- first_name_info.addClass("error");
- return false;
- }
- // if first name is valid
- else{
- first_name.removeClass("error");
- first_name_info.text("");
- first_name_info.removeClass("error");
- return true;
- }
- }
- function validateLastName(){
- // if last name is not valid
- if(last_name.val().length < 4){
- last_name.addClass("error");
- last_name_info.text("Last names must be at least 3 characters long.");
- last_name_info.addClass("error");
- return false;
- }
- // if last name is valid
- else{
- last_name.removeClass("error");
- last_name_info.text("");
- last_name_info.removeClass("error");
- return true;
- }
- }
- function validateEmail(){
- // test regular expression
- var a = email.val();
- var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
- // if it's a valid email
- if(pattern.test(a)){
- email.removeClass("error");
- email_info.text("");
- email_info.removeClass("error");
- return true;
- }
- // if it's an invalid email
- else{
- email.addClass("error");
- email_info.text("Please enter a VALID email address.");
- email_info.addClass("error");
- return false;
- }
- }
- function validatePhone(){
- var b = phone.val();
- var phone_pattern =/\d{3}\-\d{3}\-\d{4}/; // wrong regualar expression
- // if phone number is valid
- if(phone_pattern.test(b)){
- phone.removeClass("error");
- phone_info.text("");
- phone_info.removeClass("error");
- return true;
- }
- // phone number is invalid
- else{
- phone.addClass("error");
- phone_info.text("Please enter a phone number, including area code.");
- phone_info.addClass("error");
- return false;
- }
- }
- function validateImplementationComments(){
- // if comments are not valid
- if(implementation_comments.val().length < 1){
- implementation_comments.addClass("error");
- //implementation_comments_info.text("Comments can not be empty.")
- }
- // comments are entered
- else{
- implementation_comments.removeClass("error");
- implementation_comments_info.text("");
- return true;
- }
- }
- // time to handle events
- // on blur
- first_name.blur(validateFirstName);
- last_name.blur(validateLastName);
- email.blur(validateEmail);
- phone.blur(validatePhone);
- implementation_comments.blur(validateImplementationComments);
- // on key press
- first_name.keyup(validateFirstName);
- last_name.keyup(validateLastName);
- phone.keyup(validatePhone);
- implementation_comments.keyup(validateImplementationComments);
- // triggering an event from checking off remain anonymous
- $("input:checkbox").click(clearFields);
- // clear and disable fields if checkbox is checked
- function clearFields(){
- if($(this).is(":checked")){
- // clear first name field
- first_name.val("").attr("disabled", true);
- first_name.removeClass("error");
- first_name_info.removeClass("error");
- first_name_info.text("");
- // clear last name field
- last_name.val("").attr("disabled", true);
- last_name.removeClass("error");
- last_name_info.removeClass("error");
- last_name_info.text("");
- // clear email field
- email.val("").attr("disabled", true);
- email.removeClass("error");
- email_info.removeClass("error");
- email_info.text("");
- // clear phone field
- phone.val("").attr("disabled", true);
- phone.removeClass("error");
- phone_info.removeClass("class");
- phone_info.text("");
- }else{
- first_name.attr("disabled", false);
- last_name.attr("disabled", false);
- email.attr("disabled", false);
- phone.attr("disabled", false);
- }
- }
- // submit form
- form.submit(function(){
- if( validateImplementationComments() && ($("input[name='remain_anonymous']:checked")) )
- return true;
- else if((validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateImplementationComments()) &
- ($("input[name='remain_anonymous']:not(checked)")))
- return true;
- else
- return false;
- });
- });
- end contact_is_3.js
- start contact_us_2.js
- $(function() {
- var form = $("#contact_us_form2");
- var first_name = $("#first_name");
- var first_name_info = $("#first_name_info");
- var last_name = $("#last_name");
- var last_name_info = $("#last_name_info");
- var email = $("#email");
- var email_info = $("#email_info");
- var phone = $("#phone");
- var phone_info = $("#phone_info");
- var remain_anonymous = $("#remain_anonymous");
- var remain_anonymous_info = $("#remain_anonymous_info");
- var draft_comments = $("#draft_comments");
- var draft_comments_info = $("#draft_comments_info");
- var draft_details = $("#draft_details");
- var draft_details_info = $("#draft_details_info");
- // form validation functions
- function validateFirstName() {
- // if first name is not valid
- if (first_name.val().length < 4) {
- first_name.addClass("error");
- first_name_info.text("First names must be at least 3 characters long.");
- first_name_info.addClass("error");
- return false;
- }
- // if first name is valid
- else {
- first_name.removeClass("error");
- first_name_info.text("");
- first_name_info.removeClass("error");
- return true;
- }
- }
- function validateLastName() {
- // if last name is not valid
- if (last_name.val().length < 4) {
- last_name.addClass("error");
- last_name_info.text("Last names must be at least 3 characters long.");
- last_name_info.addClass("error");
- return false;
- }
- // if last name is valid
- else {
- last_name.removeClass("error");
- last_name_info.text("");
- last_name_info.removeClass("error");
- return true;
- }
- }
- function validateEmail() {
- // test regular expression
- var a = $(".email").val();
- var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
- // if it's a valid email
- if (pattern.test(a)) {
- email.removeClass("error");
- email_info.text("");
- email_info.removeClass("error");
- return true;
- }
- // if it's an invalid email
- else {
- email.addClass("error");
- email_info.text("Please enter a VALID email address.");
- email_info.addClass("error");
- return false;
- }
- }
- function validatePhone() {
- var b = $(".phone").val();
- var phone_pattern = /\d{3}\-\d{3}\-\d{4}/; // wrong regualar expression
- // if phone number is valid
- if (phone_pattern.test(b)) {
- phone.removeClass("error");
- phone_info.text("");
- phone_info.removeClass("error");
- return true;
- }
- // phone number is invalid
- else {
- phone.addClass("error");
- phone_info.text("Please enter a phone number, including area code.");
- phone_info.addClass("error");
- return false;
- }
- }
- function validateDraftComments() {
- // if comments are not valid
- if (draft_comments.val().length < 1) {
- draft_comments.addClass("error");
- //implementation_comments_info.text("Comments can not be empty.")
- return false;
- }
- // comments are entered
- else {
- draft_comments.removeClass("error");
- draft_comments_info.text("");
- return true;
- }
- }
- function validateDraftDetails() {
- // if comments are not valid
- if (draft_details.val().length < 1) {
- draft_details.addClass("error");
- return false;
- }
- // comments are entered
- else {
- draft_details.removeClass("error");
- draft_details_info.text("");
- return true;
- }
- }
- // time to handle events
- // on blur
- first_name.blur(validateFirstName);
- last_name.blur(validateLastName);
- email.blur(validateEmail);
- phone.blur(validatePhone);
- draft_comments.blur(validateDraftComments);
- draft_details.blur(validateDraftDetails);
- // on key press
- first_name.keyup(validateFirstName);
- last_name.keyup(validateLastName);
- phone.keyup(validatePhone);
- draft_comments.keyup(validateDraftComments);
- draft_details.keyup(validateDraftDetails);
- // triggering an event from checking off remain anonymous
- $("input:checkbox").click(clearFields);
- // clear and disable fields if checkbox is checked
- function clearFields() {
- if ($(this).is(":checked")) {
- // clear first name field
- $(".first_name").val("").attr("disabled", true);
- first_name.removeClass("error");
- first_name_info.removeClass("error");
- first_name_info.text("");
- // clear last name field
- $(".last_name").val("").attr("disabled", true);
- last_name.removeClass("error");
- last_name_info.removeClass("error");
- last_name_info.text("");
- // clear email field
- $(".email").val("").attr("disabled", true);
- email.removeClass("error");
- email_info.removeClass("error");
- email_info.text("");
- // clear phone field
- $(".phone").val("").attr("disabled", true);
- phone.removeClass("error");
- phone_info.removeClass("class");
- phone_info.text("");
- } else {
- $(".first_name").attr("disabled", false);
- $(".last_name").attr("disabled", false);
- $(".email").attr("disabled", false);
- $(".phone").attr("disabled", false);
- }
- }
- // submit form
- form.submit(function() {
- if ( ( validateDraftComments() && validateDraftDetails() ) && ($("input[name='remain_anonymous']:checked")))
- return true;
- else if ((validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateDraftComments() && validateDraftDetails()) &
- ($("input[name='remain_anonymous']:not(checked)")))
- return true;
- else
- return false;
- });
- });
- end start contact_us_2.js
- start contact_us_1.js
- $(function() {
- var form = $("#contact_us_form1");
- var first_name = $(".first_name");
- var first_name_info = $(".first_name_info");
- var last_name = $(".last_name");
- var last_name_info = $(".last_name_info");
- var email = $(".email");
- var email_info = $(".email_info");
- var phone = $(".phone");
- var phone_info = $(".phone_info");
- var remain_anonymous = $(".remain_anonymous");
- var remain_anonymous_info = $(".remain_anonymous_info");
- var issue_comments = $("#issue_comments");
- var issue_comments_info = $("#issue_comments_info");
- var success_measure = $("#success_measure");
- var success_measure_info = $("#success_measure_info");
- // form validation functions
- function validateFirstName() {
- // if first name is not valid
- if (first_name.val().length < 4) {
- first_name.addClass("error");
- first_name_info.text("First names must be at least 3 characters long.");
- first_name_info.addClass("error");
- return false;
- }
- // if first name is valid
- else {
- first_name.removeClass("error");
- first_name_info.text("");
- first_name_info.removeClass("error");
- return true;
- }
- }
- function validateLastName() {
- // if last name is not valid
- if (last_name.val().length < 4) {
- last_name.addClass("error");
- last_name_info.text("Last names must be at least 3 characters long.");
- last_name_info.addClass("error");
- return false;
- }
- // if last name is valid
- else {
- last_name.removeClass("error");
- last_name_info.text("");
- last_name_info.removeClass("error");
- return true;
- }
- }
- function validateEmail() {
- // test regular expression
- var a = $(".email").val();
- var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
- // if it's a valid email
- if (pattern.test(a)) {
- email.removeClass("error");
- email_info.text("");
- email_info.removeClass("error");
- return true;
- }
- // if it's an invalid email
- else {
- email.addClass("error");
- email_info.text("Please enter a VALID email address.");
- email_info.addClass("error");
- return false;
- }
- }
- function validatePhone() {
- var b = $(".phone").val();
- var phone_pattern = /\d{3}\-\d{3}\-\d{4}/; // wrong regualar expression
- // if phone number is valid
- if (phone_pattern.test(b)) {
- phone.removeClass("error");
- phone_info.text("");
- phone_info.removeClass("error");
- return true;
- }
- // phone number is invalid
- else {
- phone.addClass("error");
- phone_info.text("Please enter a phone number, including area code.");
- phone_info.addClass("error");
- return false;
- }
- }
- function validateIssueComments() {
- // if comments are not valid
- if (issue_comments.val().length < 1) {
- issue_comments.addClass("error");
- //implementation_comments_info.text("Comments can not be empty.")
- return false;
- }
- // comments are entered
- else {
- issue_comments.removeClass("error");
- issue_comments_info.text("");
- return true;
- }
- }
- function validateSuccessMeasure() {
- // if comments are not valid
- if (success_measure.val().length < 1) {
- success_measure.addClass("error");
- return false;
- }
- // comments are entered
- else {
- success_measure.removeClass("error");
- success_measure_info.text("");
- return true;
- }
- }
- // time to handle events
- // on blur
- first_name.blur(validateFirstName);
- last_name.blur(validateLastName);
- email.blur(validateEmail);
- phone.blur(validatePhone);
- issue_comments.blur(validateIssueComments);
- success_measure.blur(validateSuccessMeasure);
- // on key press
- first_name.keyup(validateFirstName);
- last_name.keyup(validateLastName);
- phone.keyup(validatePhone);
- issue_comments.keyup(validateIssueComments);
- success_measure.keyup(validateSuccessMeasure);
- // triggering an event from checking off remain anonymous
- $("input:checkbox").click(clearFields);
- // clear and disable fields if checkbox is checked
- function clearFields() {
- if ($(this).is(":checked")) {
- // clear first name field
- $(".first_name").val("").attr("disabled", true);
- first_name.removeClass("error");
- first_name_info.removeClass("error");
- first_name_info.text("");
- // clear last name field
- $(".last_name").val("").attr("disabled", true);
- last_name.removeClass("error");
- last_name_info.removeClass("error");
- last_name_info.text("");
- // clear email field
- $(".email").val("").attr("disabled", true);
- email.removeClass("error");
- email_info.removeClass("error");
- email_info.text("");
- // clear phone field
- $(".phone").val("").attr("disabled", true);
- phone.removeClass("error");
- phone_info.removeClass("class");
- phone_info.text("");
- } else {
- $(".first_name").attr("disabled", false);
- $(".last_name").attr("disabled", false);
- $(".email").attr("disabled", false);
- $(".phone").attr("disabled", false);
- }
- }
- // submit form
- form.submit(function() {
- if ( ( validateIssueComments() & validateSuccessMeasure() ) && ($("input[name='remain_anonymous']:checked")))
- return true;
- else if ( ( validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateIssueComments() & validateSuccessMeasure() ) &
- ($("input[name='remain_anonymous']:not(checked)")))
- return true;
- else
- return false;
- });
- });
- end contact_us_1.js
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement