Styling PHP Echo output - Need syntax help


#1

Can someone help me out on the proper syntax for adding a style class to this? Adding the class to the div tag breaks validation for the field so I'm looking at other options. Here's the initial version that doesn't work:

<div class="error"><?php echo $error1; ?></div>

If I add the divs inside the echo statement to something like this:

<?php echo "<div class="error">" $error1 "</div>"; ?>

I get syntax errors. Same with replacing the double quotes around the div tags with singles. I'm new to PHP so am trying to get my head wrapped around all this...any help's appreciated.


#2

Instead of:

<?php echo "<div class="error">" $error1 "</div>"; ?>

Try:

<?php echo "<div class=\\"error\\">" . $error1 . "</div>"; ?>

#3

You are mixing strings and quotes.
either you echo out everything in one string. If you do that you will need to place quotes around the string. With the variable inside the string you need the double qoute "
the problem is that you also want to output the double qoute to the html page. To do this you will need to escape the qoutes you want to output with a slash:

<?php echo "<div class=\\"error\\">$error1</div>"; ?>

my prefered method is to ouput more parts instead of just one string. The advantage is that you can use single quotes, so you don't need to escape the double ones. Echoing multiple things, you need to concatenate them with a . or a , the , is a tiny bit faster. so you get:

<?php echo '<div class="error">', $error1, '</div>'; ?>


#4

Thanks, guys. I like the last example...very clean. On the downside it looks like all of these solutions breaks the validation for the field in my form, just like my original.


#5

Perhaps your problems lies in the validation mechanism. Is it JavaScript based? Maybe you can post the coding and we can look at it to see why it won't work.


#6

This issue is actually part of a longer thread I started the other day regarding a contact form I'm working on but after 50+ views and no responses I figured it might be better if I broke down issues one at a time to make it easier on everyone.

Anyway, here's a working test version of the form with styles included. You'll have to put in an valid email in line 4 for testing.

<?php

// Define your email address - where to send messages - here
define("MAIL_TARGET","name@whatever.com");

// Define error messages
define("errorFirstName","Invalid name! It must be at least 2 characters long.");
define("errorLastName","Invalid name! It must be at least 2 characters long.");
define("errorPhone","Please enter your phone number. It must be at least 10 characters long.");
define("errorEmail","Invalid email address!");
define("errorMsg","Invalid message! It must be at least 10 characters long.");

function createForm($first_name="",$last_name="",$phone="",$email="",$message="",$error1="",$error2="",$error3="",$error4="",$error5=""){
?>

<h2>Contact</h2><br />
<p>For more information on 2009 event, please contact...yaddda yadda. You may also submit your query in the form below and a representative will be in touch with you shortly.</p>

      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <p><label>*First Name:</label><input type="text" name="first_name" class="textbox" value="<?php echo $first_name; ?>"></p>
        <div><?php echo $error1; ?></div>
               
        <p><label>*Last Name:</label><input type="text" name="last_name" class="textbox" value="<?php echo $last_name; ?>"></p>
        <div><?php echo $error2; ?></div>
        
        <p><label>Phone:</label><input type="text" name="phone" class="textbox" value="<?php echo $phone; ?>"></p>
        <div><?php echo $error3; ?></div>
        
        <p><label>*E-mail:</label><input type="text" name="email" class="textbox" value="<?php echo $email; ?>"></p>
        <div><?php echo $error4; ?></div>
        
        <p><label>Message:</label><textarea name="message" rows="10" cols="50" class="textbox-msg"><?php echo $message; ?></textarea><br /></p>
        <div><?php echo $error5; ?></div>
        
        <p><label><em>* Required Fields</em></label></p> 
        <p><input type="submit" name="submitBtn" value="Submit" class="submit"></p>
      </form>
<?php
}

// This function validates an email address
function isValidEmail($email){
   $pattern = "^[_a-z0-9-]+(\\.[_a-z0-9-]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,3})$";
     
   if (eregi($pattern, $email)){
      return true;
   }
   else {
      return false;
   }   
}

// This function sends an email to the given address
function sendMail($first_name,$last_name,$phone,$email,$message,$subject){
    
    $subject = "2009 E-MUG Contact Data";
    $from    = "From: $name <$email>\\r\
Reply-To: $email\\r\
"; 
    $header  = "MIME-Version: 1.0\\r\
"."Content-type: text/html; charset=iso-8859-1\\r\
";
    $content = htmlspecialchars($message);
    
    $content = wordwrap($content,70);
    @mail(MAIL_TARGET,$subject,$content,$from.$header);

}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
/* =Forms
&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;&#8211;*/	
#main label {
	font-size:11px;
	display: block;
	}
#main .submit input {
	margin-left: 0em;
	}
#main input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
	background: #f1f1f1;
	padding: 2px;
	border: 1px solid #999;
	width: 200px;
	}
#main .submit {
	color: #000;
	background: #ccc;
	border: 2px outset #d7b9c9;
	width: 100px;
	}
#main .error {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: red;
	display:none;
}	
.textbox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
	background: #f1f1f1;
	padding: 2px;
	border: 1px solid #999;
	width: 200px;
	}
.textbox-msg {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
	background: #f1f1f1;
	padding: 2px;
	border: 1px solid #999;
	width: 400px;
	}

.button {
	color: #000;
	background: #ccc;
	border: 2px outset #d7b9c9;
	width: 100px;
	}
-->
</style>
</head>

<body>


<div id="wrap">
    <div id="main">

<?php if (!isset($_POST['submitBtn']))  {
    createForm();
} else  {
      $first_name = isset($_POST['first_name']) ? $_POST['first_name'] : "";
      $last_name    = isset($_POST['last_name'])    ? $_POST['last_name'] : "";
      $phone   = isset($_POST['phone'])   ? $_POST['phone'] : "";
	  $email   = isset($_POST['email'])   ? $_POST['email'] : "";
      $message = isset($_POST['message']) ? $_POST['message'] : "";

      $error  = false;
      $error1 = '';
      $error2 = '';
      $error3 = '';
	  $error4 = '';
	  $error5 = '';

      if (strlen($first_name)<2) {
          $error = true;
          $error1 = errorFirstName;
      }
	  if (strlen($last_name)<2) {
          $error = true;
          $error2 = errorLastName;
      }
	  if (strlen($phone)<10) {
          $error = true;
          $error3 = errorPhone;
      }
      if (!isValidEmail($email)) {
          $error = true;
          $error4 = errorEmail;
      }
      if (strlen($message)<10) {
          $error = true;
          $error5 = errorMsg;
      }

      if ($error){
         createForm($first_name,$last_name,$phone,$email,$message,$error1,$error2,$error3,$error4,$error5);
      }
      else {
          sendMail($first_name,$last_name,$phone,$email,$message,$subject);
    ?>

<h2>Thank You!</h2><br />
<p>Thank you for your interest. A representative will be in touch with you shortly.</p>
<?php
    }
}
?>

	</div>
</body>
</html>


#7

it's not a problem with your error validation. It's a problem with your css:

#main .error {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: red;
	display:none;
}

it says display: none;
so it will hide the div containing the errormsg...

remove that display line and it should be fixed:)


#8

Ah! Awesome! What happened is there are two forms in this microsite...one that's a php form-to-email contact form and the other a static html registration form with simple js validation...the display:none style was being used by the latter.. I created an alt style for the contact form an voila...works! Can't believe I missed that...thanks for the help. If you feel like eyeballing any of the other things I was asking about in the other longer thread, please do.


#9