[thelist] Forms and getElementById
Rob Whitener
rwhitener at DesignOptions.com
Wed Jan 29 09:58:00 CST 2003
I am having a difficult time with something that should be simple. I have a
form and I have two javascript functions that I want to use to validate this
form. One to check the validity of an e-mail address, and one to make sure
all of the fields have a value. The problem is, if there is an error on the
form, I have an image of a red arrow hidden next to each textbox which I
would like to make visible. I have set id's for all of the images to be the
same as the names of the form elements they correspond to. However, when I
try to use getElementById, I can't get the image tag, I am also using ppk's
getObj() api (http://www.xs4all.nl/~ppk/js/dhtmloptions.html) with the same
results. I am confused. Does having a table and any associated tags inside
a form mess things up? Should I use a <span> tag? Below is the code, the
alerts are from all the debugging I have been doing. Thanks in advance
Rob
the javascript:
function checkEmail(obj){
var regexp = /([\w|\_]+\.?)*[\w|\_]@([\w|\_]+\.?)*[a-zA-Z]{2,3}$/;
var tag;
var e_mail = document.forms[0].elements["e_mail"];
var tag = document.forms[0].getElementById("e_mail");
var strings = new Array();
//make sure there is an email field:
if(e_mail){
strings = e_mail.value.match(regexp);
alert(e_mail.value.search(regexp));
if(e_mail.value.search(regexp) != -1){
alert(e_mail.value + "Is a valid e-mail address");
return true;
}else{
alert(e_mail.value + "Is not a valid e-mail
address");
alert(tag.id);
tag.style.visbility = "visible";
//e_mail.focus();
return false;
}
}
}
function checkEmptyFields(obj){
var tag = document.forms[0];
var img;
var i = 0;
alert(tag.elements.length);
for (i=0; i < tag.elements.length; i++){
if(tag.elements[i].value == ""){
alert(tag.elements[i].name);
img = new getObj(tag.elements[i].name);
alert(img.obj.id);
img.style.visiblity = "visible";
//tag.elements[i].focus();
return false;
}
}
}
function checkForm(obj){
if(checkEmail(obj) == false){
return false;
}else if(checkEmptyFields(obj) == false){
return false;
}else{
return true;
}
}
The HTML:
<form id = "customer" onSubmit="return checkForm(this);"
action="sendmail.php" method="post"
enctype="application/x-www-form-urlencoded">
<table class="formattbl">
<tr>
<td colspan="2">
<p class="tblheader">Please enter your
information.</p>
</td>
</tr>
<tr>
<td width="134">
<p class="msg">First Name:</p>
</td>
<td width="157">
<input type="text" name="First_name" value="">
</td>
<td width="40"><img id = "First_name" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td>
<p class="msg">Last Name:</p>
</td>
<td>
<input type="text" name="Last_name" value="">
<!--<input type="hidden" name="recipient" value =
"rwhitener at designoptions.com">-->
<td width="40"><img id = "Last_name" src="images/arrow.gif"
style="visibility:hidden;"></td>
</td>
</tr>
<tr>
<td>
<p class="msg">Telephone:</p>
</td>
<td><input type="text" name="Telephone"
value=""></td>
<td width="40"><img id = "Telephone" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td >
<p class="msg">Street Address:</p>
</td>
<td><input type="text" name="Address" value=""></td>
<td width="40"><img id = "Address" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td><p class="msg">City:</p>
</td>
<td><input type="text" name="City" value=""></td>
<td width="40"><img id = "City" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td><p class="msg">State:</p>
</td>
<td><input type="text" name="State" value=""></td>
<td width="40"><img id = "State" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td><p class="msg">Zip:</p></td>
<td><input type="text" name="Zip" value=""></td>
<td width="40"><img id = "Zip" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td><p class="msg">E-Mail Address:</p></td>
<td><input type="text" name="e_mail" value=""></td>
<td width="40"><img id = "e_mail" src="images/arrow.gif"
style="visibility:hidden;"></td>
</tr>
<tr>
<td>
<input class="buttntxt" type="submit" value="Send
Message">
</td>
</tr>
</table>
</form>
More information about the thelist
mailing list