I’ve pretty much left script.aculo.us for jQuery for the most part, but sometimes I’m still animating with it, thought it would be good to make this easily and quickly reference-able just in case:
The Form:
<form id=”enewsform” name=”enewsform”>
<input name=”first_name” id=”first_name” type=”text” value=”First Name”/>
<input name=”last_name” id=”last_name” type=”text” value=”Last Name”/>
<input name=”email” id=”email” type=”text” value=”Email” onFocus=”if(this.value == ‘Email’) this.value = ”;” onBlur=”if(this.value == ”) this.value = ‘Email’;”/>
<div id=”hp_email_loading” style=”font-size:11px;display:none;”>Loading… please wait.</div><br />
<span style=”font-size:11px;”>Your email address will be kept strictly confidential.</span><br /><br />
<img style=”cursor:pointer;” onClick=”enewsSubscribe(); return false” onMouseOver=”this.src=’images/submit-over.gif’” onmouseout=”this.src=’images/submit.gif’” src=”images/submit.gif” alt=”Submit”>
</form>
The Javascript:
function enewsSubscribe()
{
var email = document.getElementById(‘email’).value;
var first_name = document.getElementById(‘first_name’).value;
var last_name = document.getElementById(‘last_name’).value;
new Ajax.Updater(‘hp_email_box’, ‘filter.php?email=’ + email + ‘&first_name=’ + first_name + ‘&last_name=’ + last_name //);
, { onCreate: show_subscribe_loader, onComplete: hide_subscribe_loader });
}
function show_subscribe_loader()
{
document.getElementById(‘hp_email_loading’).style.display = ‘block’;
return false;
}
function hide_subscribe_loader()
{
document.getElementById(‘hp_email_loading’).style.display = ‘none’;
return false;
}
