Working with Lightboxes

[thuitamaina]

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 = 'thuitamaina@thuitamaina.com';//<-----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';
}

[maxxd]

What errors does it show?

 

The first thing I see from the code you've posted is that you're missing a closing quotation mark in your javascript (box.style.display="blocketurn";, but I'm assuming that's an error in the cut and paste as 'blocketurn' isn't a valid value for display.