Skip to content

Instantly share code, notes, and snippets.

@TCotton

TCotton/form_processing.js

Created July 11, 2011 16:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TCotton/1076260 to your computer and use it in GitHub Desktop.
Save TCotton/1076260 to your computer and use it in GitHub Desktop.
Download ZIP
Form processing script
Raw
form_processing.js
// JavaScript Document
/*global Modernizr*/
/*global Y */
/*global DOMAssistant */
/*global DOMReady */
/*global clearInterval: false, clearTimeout: false, document: false, event: false, frames: false, history: false, Image: false, location: false, name: false, navigator: false, Option: false, parent: false, screen: false, setInterval: false, setTimeout: false, window: false, XMLHttpRequest: false, alert: false*/
/* Three functions: prcess_contact_form for as the name suggests
process the contact form and search_placeholder for adding
placeholder to the search box to Internet Explorer
icon_rollover changes the image of the main icon on rollover
*/
DOMAssistant.DOMReady(function () {
function icon_rollover() {
// changes the image when rolled over
var $link;
$link = document.getElementById("logo-date").getElementsByTagName("a")[0];
function hover() {
document.getElementById("logo").getElementsByTagName("h1")[0].style.backgroundImage = "url(/images/name-icon-hover.png)";
}
function blur() {
document.getElementById("logo").getElementsByTagName("h1")[0].style.backgroundImage = "url(/images/name-icon.png)";
}
// w3c
if ($link.addEventListener) {
$link.addEventListener("mouseover", hover, false);
$link.addEventListener("focus", hover, false);
$link.addEventListener("mouseout", blur, false);
$link.addEventListener("blur", blur, false);
}
// internet explorer
if ($link.attachEvent) {
$link.attachEvent("onmouseover", hover);
$link.attachEvent("onfocus", hover);
$link.attachEvent("onmouseout", blur);
$link.attachEvent("onblur", blur);
}
}
function process_contact_form() {
if (document.getElementById("contact-us") != undefined) {
var $elements, $i, $x, $len, $formInputs, $error, $placeholders, $formInput, $inputField, $textField, $emailField, $emailResult, $resultPara, $createPara, $contactName, $contactEmail, $contactNumber;
if (!Modernizr.input.placeholder) {
$placeholders = document.getElementById('contact-us').elements;
$i = 0;
//set placeholder values for internet explorer
for ($len = $placeholders.length; $i < $len; $i += 1) {
if ($placeholders[$i].placeholder != undefined) {
$placeholders[$i].value = $placeholders[$i].placeholder;
} // if not undefined
} // end for loop
$inputField = document.forms.contactUs.getElementsByTagName('input');
$textField = document.forms.contactUs.getElementsByTagName('textarea');
$x = 0;
// loop through textareas to make sure placeholder disappears on focus
for ($len = $textField.length; $x < $len; $x += 1) {
$textField[$x].style.color = "#999";
$textField[$x].onfocus = function () {
this.value = "";
this.style.color = "#000";
};
}
$x = 0;
// loop through input areas to make sure placeholder disappears on focus
for ($len = $inputField.length; $x < $len; $x += 1) {
if ($inputField[$x].type !== "submit") {
$inputField[$x].style.color = "#999";
$inputField[$x].onfocus = function () {
this.value = "";
this.style.color = "#000";
};
}
} // if not undefined
} // end modernizr
document.forms.contactUs.onsubmit = function () {
// create variables for form inputs
$contactName = document.forms.contactUs.contactName.value;
$contactEmail = document.forms.contactUs.contactEmail.value;
$contactNumber = document.forms.contactUs.contactNumber.value;
$contactDetails = document.forms.contactUs.contactDetails.value;
$error = [];
//Make sure email is correctly formatted
$emailField = document.forms.contactUs.contactEmail;
// validate the email address
$emailResult = $emailField.value.match(/^(.+)@([^\(\);:,<>]+\.[a-zA-Z]{2,4})/);
if ($emailField.value !== "") {
if ($emailResult === null && $emailField.value !== $emailField.placeholder) {
$error.push("Please enter a correct email address\n");
}
}
$elements = document.getElementById('contact-us').elements;
$i = 0;
for ($len = $elements.length; $i < $len; $i += 1) {
// http://snook.ca/archives/javascript/testing_for_a_v
// an alternative to php in_array()
// users JavaScript in operator
// Runs through form values to check whether they are empty or not
$formInputs = {
'textarea': '',
'text': '',
'email': ''
};
if ($elements[$i].type in $formInputs) {
if ($elements[$i].value === "" || $elements[$i].value === $elements[$i].placeholder) {
$error.push("Please make sure you supply the full information required");
break;
}
}
} // end loop
if ($error.length === 0) {
// When form inputs are correct send them to the php form for processing
var $data, $objX;
$objX = new XMLHttpRequest();
$objX.open('POST', 'includes/form_completion.php', true);
$objX.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
$objX.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
$objX.onreadystatechange = function () {
if ($objX.readyState !== 4) {
if ($objX.status !== 200 && $objX.status !== 304) {
alert('HTTP error ' + $objX.status);
}
}
};
// to stop IE caching the request
$random = Math.random();
$data = 'contactName=' + $contactName + '&contactEmail=' + $contactEmail + '&contactNumber=' + $contactNumber + '&contactDetails=' + $contactDetails + '&r=' + $random;
$objX.send(encodeURI($data));
window.location.hash = "#contact-us-result";
// Display success message
$resultPara = document.getElementById('contact-us-result');
// Remove prevous error warnings
if ($resultPara.getElementsByTagName('p').length > 0) {
$resultPara.getElementsByTagName('p')[0].parentNode.removeChild($resultPara.getElementsByTagName('p')[0]);
}
$createPara = document.createElement('p');
$createPara.className = "message";
$createPara.innerHTML = "Thank you for taking the time to fill out the form. We will contact you as soon as we can, yes";
$resultPara.appendChild($createPara);
// Display success message and fade contact form
document.getElementById("contact-us").style.opacity = 0.3;
document.getElementById("contact-us").style.filter = "alpha(opacity=30)";
} else {
// loop through array
window.location.hash = "#contact-us-result";
$resultPara = document.getElementById('contact-us-result');
// Remove prevous error warnings
if ($resultPara.getElementsByTagName('p').length > 0) {
$resultPara.getElementsByTagName('p')[0].parentNode.removeChild($resultPara.getElementsByTagName('p')[0]);
}
$createPara = document.createElement('p');
$createPara.className = "warning";
$createPara.innerHTML = $error;
$resultPara.appendChild($createPara);
}
return false;
}; // form submit
} // end if typeof
} // end contact form function
function search_placeholder() {
var $placeholder, $searchForm;
if (!Modernizr.input.placeholder) {
// Places "SEARCH" in main search box
// Deletes on focus
$searchForm = document.forms.searchForm.searchInput;
// take value of placeholder
$placeholder = $searchForm.placeholder;
// change colour to grey
$searchForm.style.color = "#999";
//place value of placeholder in the input form
$searchForm.innerText = $placeholder;
// delete on focus
$searchForm.onfocus = function () {
this.value = "";
this.style.color = "#000";
};
} // end if modernizr
} // end if search_placeholder
// all functions to fun on window load here
function init() {
search_placeholder();
process_contact_form();
icon_rollover();
} // end function init
// run init funtion on window load
window.onload = new function () {
init();
}();
}); // end yahoo dom ready
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment