View Full Version : Submit stays disabled till form is happy?

06-09-2008, 08:09 AM
Below is the code that I am using to submit and email data.
How do I allow the submit button to stay disabled till the form is happy?
echo 'Use the following form to contact us.
All fields required.
<form method="post" action="contact.php">
<input type="text" name="name" size="20">
E-mail address:
<input type ="text" name="email" size="20">
<input type ="text" name="sub" size="20">
<textarea rows="5" cols="35" name="message" wrap="virtual"></textarea>
<input type="submit" name="submit" value="Submit">


$name = $_POST['name'];
$message = $_POST['message'];
$email = $_POST['email'];
$sub = $_POST['sub'];

//Check for a valid email..
$validate = eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,6}$", $email);

echo("<br>" . $email . " is not a valid email.");
$e = $email;
//Required Fields, you can add or remove fields as neccessary.
//Did they leave them empty?
if(!$name || !$message || !$e)
echo '<br>One or more required fields were left blank, please enter all required data.';
//Get the date...
$date = date("M d Y");

//What email do you want it sent to?
$youremail = "you@domain.com";

//What subject to do want the email to be?
$subject = "Subject";

//Send the data...
$name = stripslashes($name);
$subj = stripslashes($sub);
$message = stripslashes($message);
$msg = wordwrap($message, 70, "<br>");

$headers = 'From: '.$e.'';
$send = mail("$youremail", "$subject","
<b>Name:</b> $name
<b>E-mail address:</b> $e
<b>Subject:</b> $subj
<b>Message sent on:</b> $date
<b>IP:</b> $ip ", $headers);
if($send) {
echo '<br>Thanks for contacting us.';
} else {
echo '<br>Seems to be a problem, please try again';
</html>I wasn't going to post the code, I only need some ideas?

06-09-2008, 08:49 AM
when you say form is happy I'm guessing you mean that all required fields have been filled

you can do this using Javascript

(you need to take this as an example only as the getElementsById's are incorrect).


function checkForm(){

var fld1 = document.getElementById('fieldid1').value;
var fld2 = document.getElementById('fieldid2').value;
var fld3 = document.getElementById('fieldid3').value;

if(fld1 && fld2 && fld3){


}else {

alert ('you have not filled in all fields');




the submit button you have would have to be changed to a normal button which you would fire an onclick="checkForm()" from. The function would run and check all fields have been filled before submitting the form else throw up an alert advising of an empty field

an alternative would be to hide the submit button element from the DOM and show it if all fields have been filled

06-09-2008, 09:06 AM
Not just filled but validated against a database or general queries, like email address and so on...

I see what you mean:
But not sure where the validation comes in (or where to put it?)

<script type="javascript">
function allowSubmit()
var username = document.getElementById('username');
var password = document.getElementById('password');
var submit = document.getElementById('submit');
if (!isEmpty(username) && !isEmpty(password))
submit.disabled = false;
submit.disabled = true;
function isEmpty(input)
if (input.trim().length <= 0)
return true;

return false;

<form action="" method="post">
<input type="text" name="username" id="password" onblur="allowSubmit()" />
<input type="password" name="password" id="password" onblur="allowSubmit()" />
<input type="submit" name="submit" id="submit" value="Send" disabled="disabled" />

06-09-2008, 09:21 AM
I guess the only way to do this is to have the standard validation queries with submit enabled.

I know that I have seen this on a site using Ajax, can't remember where.

Thanks though.


06-09-2008, 10:51 AM

i would use JS to check if all fields have been filled then proceed to the validation

basicaly you need a value to be true if the validation passes your criteria

the $pass variable is set to "PASS"

then run the mail script else do something else

06-09-2008, 11:06 AM
My other options as in "go with what you know" are:

1: Have a three step sign up process, ie: four pages and once each validated page is happy you continue... :-D

2: Figure out an "if then else" for the submit button to be written only if the validation is happy... :lol:

3: Use plain old PHP or Javascript... :mrgreen:

Thank you.

Will play later - pretty busy with CSS forms right now.