Hey everyone. I hope you can help me getting through this problem, because I have no idea of what else to try. I'm a web designer and sometimes modify Javascript, but my main focus is HTML and CSS, meaning I have no idea how to code in Javascript or how to write something from scratch in PHP.
So I designed a form that works pretty well, and integrated a PHP and Javascript script to make it work. This is the form:
Code:
<form name="form" id="form" method="post" action="contact.php">
<p>Hello,</p>
<p>My name is <input type="text" name="name">, from <input type="text" name="location">, and I'd like to get in touch with you for the following purpose:</p>
<p><textarea name="message" rows="10" ></textarea></p>
<p>By the way, my email address is <input type="text" name="email" id="email" placeholder="john@doe.com">, and I can prove I'm not a robot because I know the sky is <input type="text" name="code" placeholder="Red, green or blue?">.</p>
<p title="Send this message."><input type="submit" id="submit" value="Take care."></p>
</form>
And this is the script, in an external file called contact.php:
Code:
<?php
$name = check_input($_REQUEST['name'], "Please enter your name.") ;
$location = check_input($_REQUEST['location']) ;
$message = check_input($_REQUEST['message'], "Please write a message.") ;
$email = check_input($_REQUEST['email'], "Please enter a valid email address.") ;
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) {die("E-mail address not valid");}
if (strtolower($_POST['code']) != 'blue') {die('You are definitely a robot.');}
$mail_status = mail( "my@email.com", "Hey!", "Hello,\n\n$message\n\nRegards,\n\n$name\n$location", "From: $email $name" );
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}
function show_error($myError)
{
?>
<html>
<body>
<b>Please correct the following error:</b><br />
<?php echo $myError; ?>
</body>
</html>
<?php
exit();
}
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Thank you for the message. I will try to respond as soon as I can.');
window.location = '/about';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('There was an error. Please try again in a few minutes, or send the message directly to aalejandro@bitsland.com.');
window.location = '/about';
</script>
<?php
}
?>
So what it does is this: if everything's OK, it sends an email with "Hey!" as the subject, "[name]" as the sender, "Hello, [message]. Regards, [name], [location]" as the body, and a popup saying the message was delivered appears. If something fails, it outputs the error in a new address, so the user will have to go back to the form and correct the error.
What I actually want to happen is this: if everything's OK, a <p> which was hidden beneath the form appears saying the message was delivered, or, alternatively, make the submit button gray out and confirm the message was delivered. I found a script to make this happen, but with "Please wait...", so the user can't resubmit the form.
If there's an error, I'd like another <p> which was hidden to appear with the specific error, so there'd be many <p>'s hidden with different IDs. If possible, I'd also like to change the CSS style of the input field, specifically changing the border color to red, so it'd be a change in class for the particular field.
--
So in essence, I want the errors and the success messages to output in the same page as the form (without refresh), and a change of class in the input fields that have an error. It'd be great if the submit button could be disabled until all fields are filled correctly, but I don't know if this is possible.
Thanks in advance, and please let me know if it'll be possible. :)
Before you post, read our: 
