Ie6 And 7 Say "could Not Get The Visibility Property. Invalid Arg
December 17, 2009 - 9:51am
Web Tasarımı
The ajax script I'm working on is a little buggy in Opera, but works fine in other browsers. It's a basic form validation, where the fields of the form are sent via ajax to a php program that uses preg_match to return either "hidden" or "visible" to the element ids "ajaxResponse1" and "ajaxResponse2". Everything seems pretty simple, but I've been looking at this for too long and wonder if anyone can see something I'm not seeing. If you type in the form fields, the flickering word "hidden" appears to the right of the submit button.
The ajax script I'm working on is a little buggy in Opera, but works fine in other browsers. It's a basic form validation, where the fields of the form are sent via ajax to a php program that uses preg_match to return either "hidden" or "visible" to the element ids "ajaxResponse1" and "ajaxResponse2". Everything seems pretty simple, but I've been looking at this for too long and wonder if anyone can see something I'm not seeing. If you type in the form fields, the flickering word "hidden" appears to the right of the submit button.
live online at brianswebdesign.com or see the code here:
<head>
<title>Brian's Web Design</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en" />
<style type="text/css">
body { font-size:90%; }
#left-box { position:absolute; top:360; left:45; width:250px; height:500px;}
h2 { font-size:120%; }
.custombutton {padding:0;margin:0;border:none;background:none;cursor:pointer;}
* html .custombutton {cursor:hand;}
.redlight { float:left; margin-left:2px; margin-top:2px; background: url(img/greenlight.gif) no-repeat; }
#ajaxResponse1, #ajaxResponse2 { width:16px; height:16px; visibility:visible; background:url(img/redlight.gif) no-repeat; }
</style>
<script type="text/javascript">
var phpscript = 'ajaxValidator.php';
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('There was a problem creating the XMLHttpRequest object');
}
return req;
}
var http = createRequestObject();
function sendRequestGet(realname,email,mesg) {
http.open('get', phpscript+'?realname='+realname+'&email='+email+'&mesg='+mesg);
http.onreadystatechange = handleResponseGet;
http.send(null);
}
function handleResponseGet() {
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
var myresponse_array=response.split("|js-split-here|");
if(response) {
document.getElementById("ajaxResponse1").style.visibility = myresponse_array[0];
document.getElementById("ajaxResponse2").style.visibility = myresponse_array[1];
document.getElementById("ajaxResponse3").innerHTML = myresponse_array[2];
}
}
}
</script>
</head>
<body>
<div id="centering-wrapper">
<div id="bwd"><img src="img/bwd.jpg" alt="Brian's Web Design" /></div>
<div id="main">
<div id="text-box">
<div id="text-box-top"></div>
<div class="text-box-mid">
<div style="style=position:relative; float:left; margin-top:-346px;">
<div id="l-00"> </div>
<div id="r-0"> </div>
<div id="l-01"> </div>
<div id="r-00"> </div>
<div id="l-02"> </div>
<div id="r-01"> </div>
<div id="l-03"> </div>
<div id="r-02"> </div>
<div id="l-04"> </div>
<div id="r-03"> </div>
<div id="l-05"> </div>
<div id="r-04"> </div>
<div id="l-06"> </div>
<div id="r-05"> </div>
<div id="l-07"> </div>
<div id="r-06"> </div>
<div id="l-08"> </div>
<div id="r-07"> </div>
<div id="l-09"> </div>
<div id="r-08"> </div>
<div id="l-10"> </div>
<div id="r-09"> </div>
<div id="l-11"> </div>
<div id="r-10"> </div>
<div id="l-12"> </div>
<div id="r-11"> </div>
<h1>Brian's Web Design</h1>
<div style="position:relative; float:none; padding-left:20px; padding-right:15px; text-align:left;">
<h2>Custom Web Design</h2>
<p style="margin-top:10px;">lorum</p>
<h2 style="margin-top:10px;"> The Professional Advantage</h2>
<p style="margin-top:10px;">lorum</p>
</div>
</div>
</div>
<div class="text-box-bottom"></div>
<div id="lower-text-box-top"></div>
<div class="text-box-mid" style="text-align:left; padding-left:20px;">
<h2>Contact Brian Now</h2>
<form method="post" action="mesgsender.php" name="taco">
<div style="position:relative; float:left; width:100%; margin-top:10px;">
<div style="float:left;">Your name: <input name="realname" id="realname" type="text" onKeyUp="sendRequestGet(this.value,window.document.taco.email.value,window.document.taco.mesg.value);"></div>
<div class="redlight">
<div id="ajaxResponse1"> </div>
</div>
</div>
<div style="position:relative; float:left; width:100%; height:10px; line-height:1px; clear:both;"></div>
<div>
<div style="float:left;">Your email address: <input name="email" id="email" type="text" onKeyUp="sendRequestGet(window.document.taco.realname.value,this.value,window.document.taco.mesg.val
e);"></div>
<div class="redlight">
<div id="ajaxResponse2"> </div>
</div>
</div>
<div style="clear:both;"></div>
<p style="margin-top:10px;">Your message here:</p>
<p style="margin-top:10px;"><textarea name="mesg" id="mesg" rows="10" cols="47" onKeyUp="sendRequestGet(window.document.taco.realname.value,window.document.taco.email.value,this.va
ue);"></textarea></p>
<p style="margin-top:10px;"><input name="recipients" value="rbg" type="hidden"></p>
<div style="margin-top:10px; backgound: url(img/submit.gif) tranparent;" id="ajaxResponse3"><button class='custombutton' disabled='disabled'><img src='img/no-submit.gif' alt='ALL FIELDS ARE REQUIRED' /></button></div>
</form>
</div>
<div class="text-box-bottom"></div>
</div>
<div id="left-box">
<div id="left-text-box-top" style="position:relative; float:left; background: url(img/left-text-box-top.gif) no-repeat; width:100%; height:21px;"></div>
<div class="left-text-box-mid" style="position:relative; float:left; background: url(img/left-text-box-bg.gif) repeat-y; width:100%; ">
<h2>Featured Website</h2>
<p style="margin-top:10px;">
<a href="#"><img src="img/tvsc.jpg" alt="Featured Website" /></a>
</p>
</div>
<div class="left-text-box-bottom" style="position:relative; float:left; background: url(img/left-text-box-bottom.gif) no-repeat; width:100%; height:21px;"></div>
</div>
</div>
</div>
</body>
</html>
and the php code with the preg_matchs is:
if ($_GET['realname'] != ''){
$realname = $_GET['realname'];
if (preg_match('/[.a-z\'\\s&-]+$/i', $realname)) {
echo 'hidden';
$nameIsGood = '1';
} else {
echo 'visible';
$nameIsGood = '0';
}
}else{
echo 'visible';
$nameIsGood = '0';
}
?>
|js-split-here|
<?php
if ($_GET['email'] != ''){
$email = $_GET['email'];
if (preg_match('/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.(?:[A-Z]{2}|com|org|net|biz|info|name|aero|gov|mobi|tv|biz|info|jobs|museum)$/i', $email)) {
echo 'hidden';
$emailIsGood = '1';
}else{
echo 'visible';
$emailIsGood = '0';
}
}else{
echo 'visible';
$emailIsGood = '0';
}
?>
|js-split-here|
<?php
if ($_GET['mesg'] != ''){
$message = $_GET['mesg'];
if (preg_match('/<+|>+/', $message))
echo "<span style='color:red;'>\"<\" or \">\" characters not allowed in message body!</span>";
elseif (($nameIsGood == '1') && ($emailIsGood == '1'))
echo "<button class='custombutton' type='submit'><img src='img/submit.gif' alt='SUBMIT!' /></button>";
else
echo "<button class='custombutton' disabled='disabled'><img src='img/no-submit.gif' alt='ALL FIELDS ARE REQUIRED' /></button>";
}else{
echo "<button class='custombutton' disabled='disabled'><img src='img/no-submit.gif' alt='ALL FIELDS ARE REQUIRED' /></button>";
}
?>
I'd really appreciate help,
Thanks in advance,
Brian
Brian's Web Design - Temecula, CA