Folks, I am new to using lightboxes and they are giving me some trouble. If you visit my website (www.thuitamaina.com) and click the contact link, a lightbox form popS up asking for your details. When you insert details, the lightbox briefly displays a list of errors (some or all of which you didn't make) before a new window loads with the right response. How can I make the lightbox show the right response without disappearing and without loading another page? Below is the code which contains the lightbox form:
<div id="shadowing"></div>
<div id="box">
<span id="boxtitle"></span>
<form action="contact_response.php"
method="post" target="_parent">
<p>Your Name: <br>
<input type="text" name="yourname"
id="yourname" maxlength="100" size="40"
>
</p>
<p>Email address: <br>
<input type="text" name="email_address"
id="email_address" maxlength="100" size="40">
</p>
<p> Message: <br>
<textarea name="Message" rows="10"
cols="40"></textarea>
</p>
<p>
<label for='captcha'> Just to ensure you
are a genuine person, please tell me how many
<b>FULL</b> bananas you can see in the image
below: </label>
<input type="text" name="captcha"
id="captcha" maxlength="100" /><br>
<img src="/images/captcha.jpg"
style="width:300px"><br>
<!--<button onClick="openbox('Invalid
Data', 1)">Submit</button>-->
<!--<button onClick="openbox
('Response', 1)">Submit</button>-->
<?php include 'contact_response.php';
?><input type="submit" value="Submit"
onClick="openbox('Response', 1)"
target="_parent">
<input type="button" name="cancel"
value="Cancel" onClick="closebox()">
</p>
</form>
</div>
Below is the code that manipulates contact details:
<?php session_start();
$_SESSION['yourname']=$_POST['yourname'];
?>
<div id="shadowing"></div>
<div id="seventhbox">
<span id="seventhboxtitle"></span>
<!--<form method="post" target="_parent">-->
<?php
$errors = '';
$myemail = '
[email protected]';//<-----Put Your email address here.
if(empty($_POST['yourname']) ||
empty($_POST['email_address']) ||
empty($_POST['Message']) ||
empty($_POST['captcha']))
{
$errors .= "\n Error: all fields are required";
echo '<br>' . $errors . '<br>';
}
$yourname = $_POST['yourname'];
$email_address = $_POST['email_address'];
$Message = $_POST['Message'];
$captcha = $_POST['captcha'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
echo '<br>' . $errors . '<br>';
}
if ( $captcha != 2)
{
$errors .= "\n You inserted the wrong number of <b>FULL</b> bananas. You are not a genuine person!";
echo '<br>' . $errors . '<br>';
}
if( empty($errors))
{
// Include database connection settings
include('clinton.php');
$yourname = $_POST['yourname'];
$email_address = $_POST['email_address'];
$Message = $_POST['Message'];
mysql_query("INSERT INTO `thuitam_myDatabase`.`Contact_info` (
`Index` ,
`Name` ,
`Email` ,
`Message`
)
VALUES (
NULL, '$yourname', '$email_address','$Message')
");
//close connection
mysql_close();
$to = $myemail;
$email_subject = "Contact form submission: $yourname";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $yourname \n ".
"Email: $email_address\n Message \n $Message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//Say 'thank you'
//echo '<br>' . $errors . '<br>';
echo '<p>Hi' . $yourname . '!</p>
<p>Thank you for contacting me. I will try my best to get back to you as soon as possible. In case I delay in responding, feel free to call me via phone. My number is +254725-509941.</p>
<p>Wishing You Every Joy,</p>
<p>Thuita J. Maina.</>
';
}
?>
<button onClick="openbox('Contact', 1)" target="_parent">Contact Again</button>
<input type="button" name="cancel" value="Cancel" onClick="closebox()">
<!--</form>-->
</div>
Just in case it might be needed, here is the javascript file for the lightbox:
function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="blocketurn;
}
function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}
// Open the lightbox
function openbox(formtitle, fadin)
{
switch (formtitle)
{
case "Contact":
var box = document.getElementById('box');
document.getElementById('box').style.width = "400px";
document.getElementById('box').style.height = "400px";
//var box2 = document.getElementById('box2');
document.getElementById('shadowing').style.display='block';
var btitle = document.getElementById('boxtitle');
btitle.innerHTML = formtitle;
if(fadin)
{
gradient("box", 0);
fadein("box");
gradient("box", 0);
fadein("box");
}
else
{
box.style.display='block
}
break;
case "Feedback":
//var box = document.getElementById('secondbox');
var secondbox = document.getElementById('secondbox');
document.getElementById('shadowing').style.display='block';
var secondbtitle = document.getElementById('secondboxtitle');
secondbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("secondbox", 0);
fadein("secondbox");
gradient("secondbox", 0);
fadein("secondbox");
}
else
{
secondbox.style.display='block
}
break;
case "Search Results":
//var box = document.getElementById('thirdbox');
var thirdbox = document.getElementById('thirdbox');
document.getElementById('shadowing').style.display='block';
var thirdbtitle = document.getElementById('thirdboxtitle');
thirdbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("thirdbox", 0);
fadein("thirdbox");
gradient("thirdbox", 0);
fadein("thirdbox");
}
else
{
thirdbox.style.display='block
}
break;
case "Subscription":
var fourthbox = document.getElementById('fourthbox');
document.getElementById('fourthbox').style.width = "300px";
document.getElementById('fourthbox').style.height = "400px";
//var fourthbox2 = document.getElementById('fourthbox');
document.getElementById('shadowing').style.display='block';
var fourthbtitle = document.getElementById('fourthboxtitle');
fourthbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("fourthbox", 0);
fadein("fourthbox");
gradient("fourthbox", 0);
fadein("fourthbox");
}
else
{
fourthbox.style.display='block
}
break;
case "Advertize on this Website":
var fifthbox = document.getElementById('fifthbox');
document.getElementById('fifthbox').style.width = "300px";
document.getElementById('fifthbox').style.height = "400px";
//var box2 = document.getElementById('box2');
document.getElementById('shadowing').style.display='block';
var fifthbtitle = document.getElementById('fifthboxtitle');
fifthbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("fifthbox", 0);
fadein("fifthbox");
gradient("fifthbox", 0);
fadein("fifthbox");
}
else
{
fifthbox.style.display='block
}
break;
case "Learn Piano":
var seventhbox = document.getElementById('sixthbox');
document.getElementById('sixthbox').style.width = "300px";
document.getElementById('sixthbox').style.height = "400px";
//var box2 = document.getElementById('box2');
document.getElementById('shadowing').style.display='block';
var sixthbtitle = document.getElementById('sixthboxtitle');
sixthbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("sixthbox", 0);
fadein("sixthbox");
gradient("sixthbox", 0);
fadein("sixthbox");
}
else
{
sixthbox.style.display='block
}
break;
case "Response":
var seventhbox = document.getElementById('seventhbox');
document.getElementById('seventhbox').style.width = "400px";
document.getElementById('seventhbox').style.height = "400px";
//var box2 = document.getElementById('box2');
document.getElementById('shadowing').style.display='block';
var seventhbtitle = document.getElementById('seventhboxtitle');
seventhbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("seventhbox", 0);
fadein("seventhbox");
gradient("seventhbox", 0);
fadein("seventhbox");
}
else
{
seventhbox.style.display='block
}
break;
case "Feedback Response":
//var box = document.getElementById('eighthbox');
var eighthbox = document.getElementById('eighthbox');
document.getElementById('shadowing').style.display='block';
var eighthbtitle = document.getElementById('eighthboxtitle');
eighthbtitle.innerHTML = formtitle;
if(fadin)
{
gradient("eighthbox", 0);
fadein("eighthbox");
gradient("eighthbox", 0);
fadein("eighthbox");
}
else
{
eighthbox.style.display='block
}
break;
}
}
// Close the lightbox
function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('secondbox').style.display='none';
document.getElementById('thirdbox').style.display='none';
document.getElementById('fourthbox').style.display='none';
document.getElementById('fifthbox').style.display='none';
document.getElementById('sixthbox').style.display='none';
//document.getElementById('seventhbox').style.display='none';
//document.getElementById('eighthbox').style.display='none';
document.getElementById('shadowing').style.display='none';
}
