[SOLVED] Intergrating PHP and Javascript

lucy · September 3, 2009

I have written a javascript script to validate a form. it works fine.

Ive also created a php script for server side validation. I know it is unlikley to get to this server side validation but some users may have javascript turned off.

How can i make it so the javascript validates the form first? Below are my files:

main contact page with html (contact.php):

<!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>
<script src="Scripts/validate_email.js" /></script>
</head>

<body>
<div id="header_container">logo</div>

<div id="content">
  <p> <?php include('../Scripts/contact_check.php') ?></p>
</div>

</body>
</html>

validate_email.js:

function checkLength(text, min, max){
min = min || 1;
max = max || 10000;

if (text.length < min || text.length > max) {
  return false;
}
return true;
}


function reportErrors(errors){
var msg = "There were some problems...\n";
var numError;

for (var i = 0; i<errors.length; i++) {
  numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}


function validateForm(contact){

var name = contact.name.value;
var email = contact.email.value;
var subject = contact.subject.value;
var message = contact.message.value;
var errors = [];

//Check to see if fields are blank
if (!checkLength(name)) {
		 errors[errors.length] = "You must enter a name.";
	}
if (!checkLength(email)) {
		 errors[errors.length] = "You must enter an email address.";
	}
if (!checkLength(subject)) {
		 errors[errors.length] = "You must enter a subject.";
	}
if (!checkLength(message)) {
		 errors[errors.length] = "You must enter a message.";
	}

//Report errors
if (errors.length > 0) {
		 reportErrors(errors);
  		 return false;
	}
}

contact_check.php:

<?php
  $name = $_REQUEST['name'] ;
  $email = $_REQUEST['email'] ;
  $tel = $_REQUEST['tel'] ;
  $subject = $_REQUEST['subject'] ;
  $message = $_REQUEST['message'] ;
  
  $finalmessage = "end message: ". $message;

  if (!isset($_REQUEST['email'])) {
    echo "
    <form method='post' action='contact.php'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' id='name' /></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='email' id='email' /></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='subject' id='subject' /></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' id='message' cols='40' rows='15'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form>";
  }
   elseif (empty($name)) {
    echo "<b id='contact_error'>complete all fields</b><br /><br />";
echo "\n";
echo "	    <form method='post' action='contact.php'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' style='border:solid 2px #F00;' id='name' value='{$_POST['name']}'/></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' value='{$_POST['tel']}' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='email' id='email' value='{$_POST['email']}'/></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='subject' id='subject' value='{$_POST['subject']}'/></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' id='message' cols='40' rows='15' value='{$_POST['message']}'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form>";
  }
     elseif (empty($email)) {
    echo "<b id='contact_error'>complete all fields</b><br /><br />";
echo "\n";
echo "<form method='post' action='contact.php'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' id='name' value='{$_POST['name']}'/></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' value='{$_POST['tel']}' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' style='border:solid 2px #F00;' name='email' id='email' value='{$_POST['email']}'/></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='subject' id='subject' value='{$_POST['subject']}'/></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' id='message' cols='40' rows='15' value='{$_POST['message']}'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form>";
  }
  elseif (empty($subject)) {
    echo "<b id='contact_error'>complete all fields</b><br /><br />";
echo "\n";
echo "<form method='post' action='contact.php'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' id='name' value='{$_POST['name']}'/></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' value='{$_POST['tel']}' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='email' id='email' value='{$_POST['email']}'/></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' style='border:solid 2px #F00;' name='subject' id='subject' value='{$_POST['subject']}'/></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' id='message' cols='40' rows='15' value='{$_POST['message']}'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form>";
  }
       elseif (empty($message)) {
    echo "<b id='contact_error'>complete all fields</b><br /><br />";
echo "\n";
echo "<form method='post' action='contact.php'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' id='name' value='{$_POST['name']}'/></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' value='{$_POST['tel']}' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='email' id='email' value='{$_POST['email']}'/></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='subject' id='subject' value='{$_POST['subject']}'/></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' style='border:solid 2px #F00;' id='message' cols='40' rows='15' value='{$_POST['message']}'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form>";
  }
  else {
    mail( WHATEVER);
  }
?>

Please can someone help me get this working.

thanks,

Lucy

KevinM1 · September 3, 2009

Ive also created a php script for server side validation. I know it is unlikley to get to this server side validation but some users may have javascript turned off.

What? Presence of client side validation does not somehow turn off server side validation. In fact, both are often used in conjunction - JavaScript to give the user dynamic feedback to make the experience more friendly, and the server side stuff (PHP in this case) to do the heavy lifting.

How can i make it so the javascript validates the form first?

Tie your JS code into the form's submit event. If it checks out, allow the form to be submitted (where the PHP validation code does its job), else, display errors. Along those lines, your PHP code is way, way larger than it needs to be. Use the JS to display individual errors next to the appropriate field. You can inject error messages straight into the DOM if validation fails. Have the PHP merely build up a list of errors and spit them out at the top of the page as a last resort. That'll save you a ton of code, as you won't need to write out your form's markup for each condition.

And, just in a general sense, always remember that JavaScript is best used to enhance existing functionality. Client side validation is no exception.

lucy · September 3, 2009

I understand the concept, but not how to actuallydo it.

Can you point me anywhere on the internet please?

Thanks,

Lucy

Psycho · September 3, 2009

You page has many different forms and I'm not sure what validation should be run for one or another. But, as Nightslyr stated, you just need on onsubmit trigger for the form. The function that is called should ultimately return true (to submit the form) or false (do not submit the form) whenthere is a problem.

Here is a simple example

<html>
<head>
<script type="text/javascript">

function validateForm(formObj)
{
    if (formObj.uname.value=='')
    {
        alert('You must enter a name');
        return false;
    }
    //No errors occured
    return true;
}

</script>
</head>
<body>

<form name="test" onsubmit="validateForm(this);">
  Name: <input type="text" name="uname">
  <br />
  <button type="submit">Submit</button>
</form>
</body>

lucy · September 3, 2009

I understand that part - the javascript bit.

I have only one form, its the same form on each if statement. Its basically a crude way of saying if this field is blank, then return the form but with the field selected and shown to be wrong.

Thanks,

Lucy

KevinM1 · September 3, 2009

I understand that part - the javascript bit.

I have only one form, its the same form on each if statement. Its basically a crude way of saying if this field is blank, then return the form but with the field selected and shown to be wrong.

Thanks,

Lucy

On the PHP side, you can trim it down. Try to think about it in the following way:

I. Has the form been submitted?

A. Yes

i. Validate each entry

ii. Does everything check out?

a. Yes

1. Process info

b. No

1. Record the errors

2. Output them to the screen

B. No

i. Show the form

So, a quick sketch of this in code:

<?php
if(isset($_POST['submit'])) // if the form has been submitted
{
   $errors = array();

   if(!empty($_POST['name']) && /* regular expression to check it for well-formedness */)
   {
       $name = $_POST['name'];
   }
   else
   {
      $errors[] = "The name is invalid";
   }

   // ...

   if(empty($errors)) // if there aren't any errors
   {
      //process
   }
   else
   {
      foreach($errors as $error)
      {
         echo $error . "<br />";
      }
   }
}
?>

<!-- display just one form -->

lucy · September 3, 2009

Thanks, il give it a bash tomorrow

Lucy

lucy · September 4, 2009

That works a lot better thanks! Ive moved the form onto the original contact.php page and then on the form submission (supposing it passes the javascript) the php script contact_CHECK is called.

There is one problem though. When something is filled in wrong i.e. "name" is less than 5 characters long, i have made it so the form gets redisplayed, but the javascript is not working. Can you suggest why?

Below is all my code.

contact.php:

<!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>
<script src="Scripts/validate_email.js" /></script>
</head>

<body>
<div id="header_container">LOGO</div>

<div id="content">
  <p> <form method='post' action='Scripts/contact_CHECK.php' onsubmit='return validateForm(this)'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' id='name' /></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='email' id='email' /></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='subject' id='subject' /></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' id='message' cols='40' rows='15'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form></p>
</div>

</body>
</html>

contact_CHECK.php (validation script):

<?php
if(isset($_POST['submit'])){ 

   $errors = array();

   if(!empty($_POST['name']) && strlen($_POST['name']) > 5 ){
       $name = $_POST['name'];
   }
   else{
      $errors[] = "The name is invalid";
   }
   if(!empty($_POST['email'])){
       $name = $_POST['email'];
   }
   else{
      $errors[] = "The email is invalid";
   }
   if(!empty($_POST['subject'])){
       $name = $_POST['subject'];
   }
   else{
      $errors[] = "The subject is invalid";
   }
   if(!empty($_POST['message'])){
       $name = $_POST['message'];
   }
   else{
      $errors[] = "The subject is invalid";
   }

  if(empty($errors)){
   	mail( MAIL_DETAILS );
    	echo "Thanks for your contact!";
   }
   else{
      foreach($errors as $error)      {
         echo $error . "<br />";
  }
  echo "<br />";
  echo "<form method='post' action='contact_CHECK.php' onsubmit='return validateForm(this)'>
<table width='484' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='160'>Name: *</td>
    <td width='23'> </td>
    <td colspan='2'><input type='text' name='name' id='name' /></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan='2'><input type='text' name='tel' id='tel' /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='email' id='email' /></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan='2'><input type='text' name='subject' id='subject' /></td>
  </tr>
  <tr>
    <td valign='top'>Message: *</td>
    <td> </td>
    <td colspan='2'><textarea name='message' id='message' cols='40' rows='15'></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan='2'> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width='90'> </td>
    <td width='211'><input type='reset' name='reset' id='reset' value='Reset' />
    <input type='submit' name='submit' id='submit' value='Submit' /></td>
  </tr>
</table>
</form>";
   }
}
?>

validate_email.js (validation script):

<!-- hide script from old browsers


function checkLength(text, min, max){
min = min || 1;
max = max || 10000;

if (text.length < min || text.length > max) {
  return false;
}
return true;
}


function reportErrors(errors){
var msg = "There were some problems...\n";
var numError;

for (var i = 0; i<errors.length; i++) {
  numError = i + 1;
  msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}


function validateForm(contact){

var name = contact.name.value;
var email = contact.email.value;
var subject = contact.subject.value;
var message = contact.message.value;
var errors = [];

//Check to see if fields are blank
if (!checkLength(name)) {
		 errors[errors.length] = "You must enter a name.";
	}
if (!checkLength(email)) {
		 errors[errors.length] = "You must enter an email address.";
	}
if (!checkLength(subject)) {
		 errors[errors.length] = "You must enter a subject.";
	}
if (!checkLength(message)) {
		 errors[errors.length] = "You must enter a message.";
	}

//Report errors
if (errors.length > 0) {
		 reportErrors(errors);
  		 return false;
	}
}


// end hiding script from old browsers -->

I know i could, should, and will add the constraint of name having to be more than 5 characters long, to the javascript, but i just wanted to force an error for testing, to see if the javascript would work on the resulting form, and it didnt, hence this post

Thanks,

Lucy

lucy · September 4, 2009

Ive got it working now, i simple had to put a php include statement, and remove the echo'ed form if there are errors.

Thanks a lot for your help

Lucy

lucy · September 4, 2009

Ok yeah, so that works now but there is one small little annoying problem.

If there is one invalid field the form gets sent back to the user with a error message, but all fields are blank.

How could i keep the valid fields in the form but leave only the invalid fields blank?

Thanks,

Lucy

KevinM1 · September 4, 2009

Ok yeah, so that works now but there is one small little annoying problem.

If there is one invalid field the form gets sent back to the user with a error message, but all fields are blank.

How could i keep the valid fields in the form but leave only the invalid fields blank?

Thanks,

Lucy

Simply add something like:

<input name="name" value="<?php if (isset($name)){ echo $name; } ?>" />

Psycho · September 4, 2009

The solution is simple, but first you would have to fix your validation code. You are setting the variable $name to each of the POSTed values. That is obviously a mistake. You should be setting $name = $_POST['name'], $email = $_POST['email'], etc. However, you are only setting those values if the validation for the field passes. No need for that, if ALL validations do not pass you wont send the email anyway. I would set those values by default. Then on the form, use those variables to populate the value of the fields (when validation fails). Here is what I would do

Validation page

<?php

//Set fields based upon posted values or empty string
$name    = (isset($_POST['name'])) ? trim($_POST['name']) : '';
$tel    = (isset($_POST['name'])) ? trim($_POST['tel']) : '';
$email   = (isset($_POST['email'])) ? trim($_POST['email']) : '';
$subject = (isset($_POST['subject'])) ? trim($_POST['subject']) : '';
$message = (isset($_POST['message'])) ? trim($_POST['message']) : '';
$error_msg = '';

//Perform the validations
if(isset($_POST['submit'])){ 

   $errors = array();

   if(empty($name) || strlen($name) < 6 ){
      $errors[] = "The name is invalid";
   }
   if(empty($email)){
      $errors[] = "The email is invalid";
   }
   if(empty($subject)){
      $errors[] = "The subject is invalid";
   }
   if(empty($message)){
      $errors[] = "The message is invalid";
   }

   if(empty($errors)) {
      //No errors send email
      mail( MAIL_DETAILS );
      //Use an include/header here to show a properly formatted thank you page
      echo "Thanks for your contact!";
      exit();
   } else {
      //Errors occured, set the error message to be displayed on the form
      $error_msg = "The following errors occured<br /> ";
      $error_msg .= "<ul> " . implode('</li> </li>', $errors) . "</li> </ul> ";
   }
}

//Include the form here
//Will show if page was not posted of if there were errors
include('the_form.php');

?>

Form page (the_form.php)

<br />
<?php echo $error_msg; ?>
<form method="post" action="contact_CHECK.php" onsubmit="return validateForm(this)">
<table width="484" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="160">Name: *</td>
    <td width="23"> </td>
    <td colspan="2"><input type="text" name="name" id="name" value="<?php echo $name; ?>" /></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan="2"><input type="text" name="tel" id="tel" value="<?php echo $tel; ?>" /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan="2"><input type="text" name="email" id="email" value="<?php echo $email; ?>" /></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan="2"><input type="text" name="subject" id="subject" value="<?php echo $subject; ?>" /></td>
  </tr>
  <tr>
    <td valign="top">Message: *</td>
    <td> </td>
    <td colspan="2"><textarea name="message" id="message" cols="40" rows="15"> value="<?php echo $message; ?>"</textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width="90"> </td>
    <td width="211"><input type="reset" name="reset" id="reset" value="Reset" />
    <input type="submit" name="submit" id="submit" value="Submit" /></td>
  </tr>
</table>
</form>

lucy · September 4, 2009

Thanks guys thats a great help

Lucy

lucy · September 4, 2009

Ok yeah, so that works now but there is one small little annoying problem.

If there is one invalid field the form gets sent back to the user with a error message, but all fields are blank.

How could i keep the valid fields in the form but leave only the invalid fields blank?

Thanks,

Lucy

Simply add something like:
<input name="name" value="<?php if (isset($name)){ echo $name; } ?>" />

This method does not seem to work for a textarea:

<textarea name='message' value='<?php if (isset($message)){ echo $message; } ?>' id='message' cols='40' rows='15' ></textarea>

does not work?

Thanks

Lucy

KevinM1 · September 4, 2009

Put it between the textarea tags:

<textarea><?php if (isset($message)){ echo $message; } ?></textarea>

lucy · September 4, 2009

thanks a lot

Lucy

lucy · September 4, 2009

Is there any way i can make the same work for combo boxes? i.e. if one is selected, once some form processing has gone on, and the form has been returned, is there any way of selecting the last selected item of a combo box?

Thanks,

Lucy

Psycho · September 4, 2009

Yes absolutely. The implementation would depend upon if the options are fixed or are coming from a database list, but the logic is similar (this also works for SELECT lists).

The examples below assume that the list is fixed, so I will use an array for the available options/values:

First create an array with the checkbox values and titles

$option_list = array(
    'a' => 'Apples',
    'b' => 'Bananas',
    'c' => 'Cucumbers'
);

Then, set a variable to the POSTed value (if it was submitted) just like the other values

$option    = (isset($_POST['option'])) ? trim($_POST['option']) : '';

Add the following validation

   if(!in_array($option, array_keys($option_list))){
      $errors[] = "The option is invalid";
   }

Next, at the top of the form page, create code to generate the HTML code for the options (selecting the option that was posted)

$optionHTML = '';
foreach($option_list as $opt_value => $opt_text)
{
    $checked = ($option==$opt_value) ? ' checked="checked"' : '';
    $optionHTML .= "<input type=\"radio\" name=\"option\" value=\"{$opt_value}\"{$checked} />{$opt_text}<br /> ";
}

Then just include the options within your form. Here is the original code with the above implemented (NONE OF THIS IS TESTED):

<?php

$option_list = array(
    'a' => 'Apples',
    'b' => 'Bananas',
    'c' => 'Cucumbers'
);

//Set fields based upon posted values or empty string
$name    = (isset($_POST['name'])) ? trim($_POST['name']) : '';
$tel    = (isset($_POST['name'])) ? trim($_POST['tel']) : '';
$option    = (isset($_POST['option'])) ? trim($_POST['option']) : '';
$email   = (isset($_POST['email'])) ? trim($_POST['email']) : '';
$subject = (isset($_POST['subject'])) ? trim($_POST['subject']) : '';
$message = (isset($_POST['message'])) ? trim($_POST['message']) : '';
$error_msg = '';

//Perform the validations
if(isset($_POST['submit'])){ 

   $errors = array();

   if(empty($name) || strlen($name) < 6 ){
      $errors[] = "The name is invalid";
   }
   if(empty($email)){
      $errors[] = "The email is invalid";
   }
   if(empty($subject)){
      $errors[] = "The subject is invalid";
   }
   if(empty($message)){
      $errors[] = "The message is invalid";
   }
   if(!in_array($option, array_keys($option_list))){
      $errors[] = "The option is invalid";
   }
   if(empty($errors)) {
      //No errors send email
      mail( MAIL_DETAILS );
      //Use an include/header here to show a properly formatted thank you page
      echo "Thanks for your contact!";
      exit();
   } else {
      //Errors occured, set the error message to be displayed on the form
      $error_msg = "The following errors occured<br /> ";
      $error_msg .= "<ul> " . implode('</li> </li>', $errors) . "</li> </ul> ";
   }
}

//Include the form here
//Will show if page was not posted of if there were errors
include('the_form.php');

?>

<?php

$optionHTML = '';
foreach($option_list as $opt_value => $opt_text)
{
    $checked = ($option==$opt_value) ? ' checked="checked"' : '';
    $optionHTML .= "<input type=\"radio\" name=\"option\" value=\"{$opt_value}\"{$checked} />{$opt_text}<br />\n";
}

?>
<br />
<?php echo $error_msg; ?>
<form method="post" action="contact_CHECK.php" onsubmit="return validateForm(this)">
<table width="484" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="160">Name: *</td>
    <td width="23"> </td>
    <td colspan="2"><input type="text" name="name" id="name" value="<?php echo $name; ?>" /></td>
  </tr>
  <tr>
    <td>Telephone number:</td>
    <td> </td>
    <td colspan="2"><input type="text" name="tel" id="tel" value="<?php echo $tel; ?>" /></td>
  </tr>
  <tr>
    <td>Email address: *</td>
    <td> </td>
    <td colspan="2"><input type="text" name="email" id="email" value="<?php echo $email; ?>" /></td>
  </tr>
  <tr>
    <td>Options: *</td>
    <td> </td>
    <td colspan="2"><?php echo $optionHTML; ?></td>
  </tr>
  <tr>
    <td>Subject: *</td>
    <td> </td>
    <td colspan="2"><input type="text" name="subject" id="subject" value="<?php echo $subject; ?>" /></td>
  </tr>
  <tr>
    <td valign="top">Message: *</td>
    <td> </td>
    <td colspan="2"><textarea name="message" id="message" cols="40" rows="15"> value="<?php echo $message; ?>"</textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td width="90"> </td>
    <td width="211"><input type="reset" name="reset" id="reset" value="Reset" />
    <input type="submit" name="submit" id="submit" value="Submit" /></td>
  </tr>
</table>
</form>

lucy · September 4, 2009

Thanks a lot very helpfull!

Lucy

Sign In

[SOLVED] Intergrating PHP and Javascript

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information