Prototype script.aculo.us form simple handling

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;
}

Comments are closed.