can anyone please tell me how to add another button called "Find" instead of having the "check button" do everything in my javascript form. I basically want my form to have a user enter their email and have it added, when I click the "check/added" button it checks to make sure the email is entered in the correct format and then adds it. Then the user can enter one letter like "c" and have all emails beginning with "c" show up. The check button will have added the emails and the "Find" will allow me to search for them and then display the results in red where would I place it in my code? I want the search results in green text instead of in the little list that pops up that I have now. So basically I'm looking for help in having an extra "Find" button and changing the way the find results are displayed. I know it doesnt hold data after I close the window but this is what I want. Heres the working form I have now:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Email Address</title>
<script type="text/javascript">
var emails = [];
function checkEmail(inputvalue){
var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(pattern.test(inputvalue)){
return true;
}
return false;
}
function addEmail(form) {
var statusBox=document.getElementById('status');
var emailBox = document.getElementById('email_address');
emailBox.style.borderColor = '';
statusBox.style.display='block';
var emailOk = checkEmail(form.email.value);
var found = false;
for(emailIndex in emails) {
if(emails[emailIndex]==form.email.value) {
found = true;
break;
}
}
if(emailOk && !found) {
emails.push(form.email.value);
statusBox.innerHTML = 'Email added.';
statusBox.style.color = 'lime';
}
else {
statusBox.innerHTML = found ? 'Email alread added' : 'Email invalid.';
statusBox.style.color = 'red';
emailBox.style.borderColor = 'red';
emailBox.focus();
}
}
function resetStyle(elId) {
var el=document.getElementById(elId);
el.style.backgroundColor = '';
el.style.borderColor = '';
el.style.color = '';
}
function lookUpEmails(inputBox) {
var suggestBox = document.getElementById('suggest');
var found = false;
suggestBox.innerHTML = '';
for(var emailIndex in emails) {
if(new RegExp('^'+inputBox.value,'i').test(emails[emailIndex])) {
suggestBox.innerHTML += "<div onclick=\"selectEmail('"+emails[emailIndex]+"');\">"+emails[emailIndex]+"</div>";
found = true;
}
}
suggestBox.style.position = 'absolute';
suggestBox.style.top = (inputBox.offsetTop+inputBox.offsetHeight+3)+'px';
suggestBox.style.left = inputBox.offsetLeft+'px';
suggestBox.style.width = inputBox.style.clientWidth+'px';
suggestBox.style.display = found ? 'block' : 'none';
}
function selectEmail(selectedAddress) {
document.getElementById('email_address').value = selectedAddress;
hideBox('suggest');
}
function hideBox(boxId) {
document.getElementById(boxId).style.display = 'none';
}
function init() {
document.onclick=function () {
hideBox('suggest');
}
var emailBox = document.body.getElementById('email_address');
emailBox.onclick = function (e) {
var event = e || event;
e.cancelBubble = true;
return false;
}
}
</script>
</head>
<body onload="init()">
<div id="status"> </div>
<form name="signupform" action="#" onsubmit="addEmail(this);return false;">
Input your email: <input name="email" type="text" class="inputs" id="email_address"
value="any@any.com" size="35" maxlength="255" onkeyup="lookUpEmails(this);""><br />
<input name="submit" type="submit" value="Check">
<div id="suggest" style="display: none;border: 1px solid black;"> </div>
</form></body></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Email Address</title>
<script type="text/javascript">
var emails = [];
function checkEmail(inputvalue){
var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(pattern.test(inputvalue)){
return true;
}
return false;
}
function addEmail(form) {
var statusBox=document.getElementById('status');
var emailBox = document.getElementById('email_address');
emailBox.style.borderColor = '';
statusBox.style.display='block';
var emailOk = checkEmail(form.email.value);
var found = false;
for(emailIndex in emails) {
if(emails[emailIndex]==form.email.value) {
found = true;
break;
}
}
if(emailOk && !found) {
emails.push(form.email.value);
statusBox.innerHTML = 'Email added.';
statusBox.style.color = 'lime';
}
else {
statusBox.innerHTML = found ? 'Email alread added' : 'Email invalid.';
statusBox.style.color = 'red';
emailBox.style.borderColor = 'red';
emailBox.focus();
}
}
function resetStyle(elId) {
var el=document.getElementById(elId);
el.style.backgroundColor = '';
el.style.borderColor = '';
el.style.color = '';
}
function lookUpEmails(inputBox) {
var suggestBox = document.getElementById('suggest');
var found = false;
suggestBox.innerHTML = '';
for(var emailIndex in emails) {
if(new RegExp('^'+inputBox.value,'i').test(emails[emailIndex])) {
suggestBox.innerHTML += "<div onclick=\"selectEmail('"+emails[emailIndex]+"');\">"+emails[emailIndex]+"</div>";
found = true;
}
}
suggestBox.style.position = 'absolute';
suggestBox.style.top = (inputBox.offsetTop+inputBox.offsetHeight+3)+'px';
suggestBox.style.left = inputBox.offsetLeft+'px';
suggestBox.style.width = inputBox.style.clientWidth+'px';
suggestBox.style.display = found ? 'block' : 'none';
}
function selectEmail(selectedAddress) {
document.getElementById('email_address').value = selectedAddress;
hideBox('suggest');
}
function hideBox(boxId) {
document.getElementById(boxId).style.display = 'none';
}
function init() {
document.onclick=function () {
hideBox('suggest');
}
var emailBox = document.body.getElementById('email_address');
emailBox.onclick = function (e) {
var event = e || event;
e.cancelBubble = true;
return false;
}
}
</script>
</head>
<body onload="init()">
<div id="status"> </div>
<form name="signupform" action="#" onsubmit="addEmail(this);return false;">
Input your email: <input name="email" type="text" class="inputs" id="email_address"
value="any@any.com" size="35" maxlength="255" onkeyup="lookUpEmails(this);""><br />
<input name="submit" type="submit" value="Check">
<div id="suggest" style="display: none;border: 1px solid black;"> </div>
</form></body></html>
![[thumbsup2]](/data/assets/smilies/thumbsup2.gif "[thumbsup2] [thumbsup2]")
DreX