javascript in php code causes page to display white

[jarvis]

Hi All,

 

Odd one this, I've got the following code (below) which is a simple log in form. The client wanted a pop to inform you when you've not completed a field and an asterix to appear.

 

This is fine. However, if you forget to enter some info, the pop up appears but the page behind goes blank, as if the rest of the page wont load until you click OK.

 

How can I stop this?

 

 

Thanks in advanced!

<?php 
// This is the login page for the site.

// Include the configuration file for error management and such.
require_once ('./includes/config.inc.php'); 

// Set the page title and include the HTML header.
$page_title = 'Login';
include ('./includes/header.html');

$email_error = '';
$pw_error = '';

$error_message = '';

if (isset($_POST['submitted'])) { // Check if the form has been submitted.

require_once ('../mysql_connect.php'); // Connect to the database.

// Validate the email address.	
if (!empty($_POST['email'])) {
	$e = escape_data($_POST['email']);
} else {
	echo '<script type="text/javascript">alert("You forgot to enter your email address!");</script>';
	$e = FALSE;
	$email_error = '<span class="required"><img src="images/star.gif" /></span>';
}

// Validate the password.
if (!empty($_POST['pass'])) {
	$p = escape_data($_POST['pass']);
} else {
	$p = FALSE;
	echo '<script type="text/javascript">alert("You forgot to enter your password!");</script>';
	$pw_error = '<span class="required"><img src="images/star.gif" /></span>';
}

if ($e && $p) { // If everything's OK.

	// Query the database.
	$query = "SELECT user_id, name, acc_type FROM users WHERE (email='$e' AND pass=SHA('$p')) AND active IS NULL";	
	$result = mysql_query ($query) or trigger_error("Query: $query\n<br />MySQL Error: " . mysql_error());

		if (@mysql_num_rows($result) == 1) { // A match was made.

		// Register the values & redirect.
		$row = mysql_fetch_array ($result, MYSQL_NUM); 
		mysql_free_result($result);
		mysql_close(); // Close the database connection.
		$_SESSION['user_id'] = $row[0];
		$_SESSION['name'] = $row[1];
		$_SESSION['acc_type'] = $row[2];

		// Start defining the URL.
		$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
		// Check for a trailing slash.
		if ((substr($url, -1) == '/') OR (substr($url, -1) == '\\') ) {
			$url = substr ($url, 0, -1); // Chop off the slash.
		}

		// Add the page.
		$acc_type = $_SESSION['acc_type']; 
		if ($acc_type == '1') {
			$url .= '/print.php';
		} else {
			$url .= '/category.php';
		}

		ob_end_clean(); // Delete the buffer.	
		header("Location: $url");
		exit(); // Quit the script.

	} else { // No match was made.
		echo '<script type="text/javascript">alert("Either the email address and password entered do not match those on file or you have not yet activated your account!");</script>';
	}

} else { // If everything wasn't OK.
	$error_message = '<span class="required">Please fill in all boxes to log in!</span>';
}

mysql_close(); // Close the database connection.

} // End of SUBMIT conditional.
?>
  <!-- box_top -->
  <div id="box_top"> 
  	<img src="images/login_box_top.jpg">	
  </div>
  <!-- /box_top -->

<!-- box_content -->
<div id="login_box_content">	

	<!-- left_column -->
	<div id="login_left_column">
	<img src="images/client_login_text.gif" />
	<form action="login.php" method="post">
	<table border="0" width="320">
	  <tr>
		<td><img src="images/email_address.gif" /></td>
		<td><div class="myBoxLh"></div><input type="text" name="email" style="width:160px;" maxlength="90" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>"  /><div class="myBoxRh"></div></td>
		<td><?php if (isset($_POST['submitted'])) { echo $email_error; }?></td>
	  </tr>
	  <tr>
		<td><img src="images/password.gif" /></td>
		<td><div class="myBoxLh"></div><input type="password" name="pass" style="width:160px;" maxlength="20" /><div class="myBoxRh"></div></td>
		<td><?php if (isset($_POST['submitted'])) { echo $pw_error; }?></td>
	  </tr>  
	  <tr>
		<td colspan="2"><div align="right"><input type="image" src="images/submit.jpg" name="submit" value="Login" class="submit_small" /></div>
		<input type="hidden" name="submitted" value="TRUE" /></td>
		<td><img src="images/spacer.gif" width="14"/></td>
	  </tr>
	</table>
	</form>				

</div>
<!-- /box_content -->		

<!-- box_bottom -->
<div id="login_box_bottom">
<img src="images/login_box_bottom.jpg">
</div>
<!-- /box_bottom -->

<!-- login_copyright -->
<div id="login_copyright">
<img src="images/login_copyright.jpg">
</div>
<!-- /login_copyright -->

</div>
<!-- /wrapper -->		
<?php // Include the HTML footer.
include ('./includes/footer_login.html');
?>

[YourNameHere]

Instead of echoing the javascript, you should have the javascript there already and just dynamically change the CSS Display attribute.

 

Somthing like this:

 

#loginDiv 
{
display: <?php if ($loggedIn == 'false') { echo "inline"; } else { echo "none"; } ?>
}

 

You can do all the client side validation you want but if JavaScript is turned off, it still needs to work. So I would do a textual message in PHP and the * in JavaScript.

[jarvis]

Thanks YourNameHere, however, the client really wants the pop up.

 

How can I alter my script to show the pop up and stop the site going white in the bg?

 

Many thanks

[jarvis]

Ok,

 

I think I'm making head way but still not getting it exactly right. Instead of:

echo '<script type="text/javascript">alert("You forgot to enter your email address!");</script>';

I change it to

$email_popup = '<script type="text/javascript">alert("You forgot to enter your email address!");</script>';

 

If i then add this at the end of my page as

<?php if (isset($_POST['submitted'])) { echo $email_popup; }?>

 

This displays the top of the page, the form but still fails to show the main bg (called in via css)

 

I then though about changing the pop up to:

echo 'div id="login_bg">';
$email_popup = '<script type="text/javascript">alert("You forgot to enter your email address!");</script>';
echo '</div>';

 

This doesn't work as once you clear the pop up, it shows the entire bg image again at the end of the page!

 

There must be an easy way to get around this????

 

TIA

[jarvis]

Sorry to bump, just wondering if anyone can help at all? Apologies again for the plea

 

Thanks very much in advanced! Your help is much appreciated!