|
JavaScript - Simple Js Validation Of 3 Forms On One Page
Hey there, trying to modify a basic JS validation script Ive been using for a couple of years to work on more than one form on a page, three in fact.
JavaScript (in header) Code: <script type="text/javascript">
<!--
function validate_form ()
{
valid = true;
if ( document.form.name.value == "" )
{
alert ( "Please enter your name" );
valid = false;
}
if ( document.form.phone.value == "" )
{
alert ( "Please enter your phone number" );
valid = false;
}
return valid;
}
//-->
</script>
<script type="text/javascript">
<!--
function validate_form1 ()
{
valid = true;
if ( document.form1.name1.value == "" )
{
alert ( "Please enter your name" );
valid = false;
}
if ( document.form1.email1.value == "" )
{
alert ( "Please enter your email address" );
valid = false;
}
if ( document.form1.comment1.value == "" )
{
alert ( "Please enter your message" );
valid = false;
}
return valid;
}
//-->
</script>
<script type="text/javascript">
<!--
function validate_form2 ()
{
valid = true;
if ( document.form2.name2.value == "" )
{
alert ( "Please enter your name" );
valid = false;
}
if ( document.form2.phone2.value == "" )
{
alert ( "Please enter your phone number" );
valid = false;
}
return valid;
}
//-->
</script>
and the forms... Code: <form class="cmxform" id="form" name="form" method="post" action="send.php" onsubmit="return validate_form ( );">
<input name="name2" class="custominput" id="name2" size="25" />
<input name="tel2" class="custominput" id="tel2" size="25" />
<input type="image" src="/send.png" alt="Submit Form" />
</form>
<form class="cmxform" name="quoteForm" id="quoteForm" method="post" action="send.php" onsubmit="return validate_form1 ( );">
<input name="name" class="custominput" id="name" size="25" />
<input name="email" class="email custominput" id="cemail" size="25" />
<textarea id="comment" name="comment" cols="20" rows="2" class="customtextarea" ></textarea>
<input type="image" src="send.png" alt="Submit Form" />
</form>
<form class="cmxform" id="form2" name="form2" method="post" action="send.php" onsubmit="return validate_form2 ( );">
<input name="name2" class="custominput" id="name2" size="25" />
<input name="phone2" class="custominput" id="phone2" size="25" />
<input type="image" src="send.png" alt="Submit Form" />
</form>
Ive stripped the forms down to the bones, they have default values set and onfocus commands in the full code. The problem Im having is rewriting the script above seems to work fine for the middle form but on the other two it tells me to input a valid name and then submts the form. Many thanks Similar TutorialsI have two simple forms on the site, each captures an email address they are for two separate languages. However when I try to validate, only one validates and the other one doesn't Javascript: Code: <script type="text/javascript">
function checkform ( form )
{
// ** START **
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
// ** END **
return true ;
}
</script>
<script type="text/javascript">
function checkform ( form )
{
// ** START **
if (form.email2.value == "") {
alert( "Please enter your email address." );
form.email2.focus();
return false ;
}
// ** END **
return true ;
}
</script>
Form 1- It Validates Just Fine Code: <form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
<td>
<input name="email" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
<td> <input style="border:none" type="image" name="imageField" id="image" src="submit.jpg" />
</td>
</form>
Form2 Doesn't Validate Code: <form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
<td><input name="email2" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
<td>
<input style="border:none" type="image" name="imageField2" id="image2" src="submit2.jpg" />
</td>
</form>
Hello, I'm trying to make a simple webpage with two input text boxes that when submitted when empty, I'll get an error pop-up telling me which ones are empty, both, first name, or last name. When there's only one if, the script works. But when there's multiple else ifs, nothing happens if I press submit. Can someone help me? Code: <html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
var y=document.forms["myForm"]["lastname"].value;
if (x==null || x=="" && y==null || y=="")
{
alert("Please put in your first and last name.");
return false;
}
else if (x==null || x=="")
{
alert("Please put in your first name.");
return false;
}
else if (y==null || y=="")
{
alert("Please put in your last name.");
return false:
}
}
</script>
</head>
<body>
<form name="myForm">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="validateForm()">
</form>
</body>
</html>
Hey CF, I'm currently working on a website called 'eXtreme Gaming' I've almost completed it, apart from two things. - Adding two values on my checkout page for the Grandtotal (I've tried everything, but I'm too much of a noob and have probably missed something small). - Validation of forms (I don't know where to start here, I've looked on w3schools for tuts etc but I'm having difficulty incorporating it on my site) I'm going to put the code for my checkOut page only, if you are able to help me many thanks in advance. [quote] Code: <HTML>
<HEAD>
<script language="JavaScript" src="laptopsCookie.js">
</script>
<script language="JavaScript" src="desktopsCookie.js">
</script>
<script language="JavaScript"><!--
function calculateTotalPurchaseLaptop(formRef)
{
var laptopTotal=0;
for (var i=0; i<LaptopListPurchase.length/2;i++)
{
var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
// document.orderForm2.grandTotal.value = document.orderForm.laptopTotal.value + document.orderForm2.desktopTotal.value
laptopTotal += subTotal;
}
formRef.laptopTotal.value = laptopTotal.toFixed(2);
}
//--></script>
<script language="JavaScript"><!--
function calculateTotalPurchaseDesktop(formRef)
{
var desktopTotal=0;
for (var i=0; i<DesktopListPurchase.length/2;i++)
{
var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
desktopTotal += subTotal;
}
formRef.desktopTotal.value = desktopTotal.toFixed(2);
}
//--></script>
<script language="Javascript"><!--
function checkform()
{
if (document.payment.Name.value == "")
{
alert('Please enter a name');
return false;
}
//else if(isNaN(document.payment.CreditCard.value) || document.payment.CreditCard.length !== 10)
//{
// alert('Invalid Credit Card Number');
// return false;
//}
else if (document.payment.Adress.value == "")
{
alert('Please enter your adress.');
return false;
}
else if (document.payment.State.selectedIndex == 0)
{
alert('Please select a state');
return false;
}
return true;
}
</script>
</HEAD>
<BODY>
<TITLE>Check Out</TITLE>
<script>
var html = "";
html += '<TABLE align="center"><tr><td><img src = "images/checkOutTitle.png" align="center" style="border:none" /></td></tr></TABLE>';
html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
html += '<form id = "orderForm" name = "orderForm" method = POST action="javascript:void(0)">';
html += '<tr>';
html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
html += '</tr>';
for (var i=0; i<LaptopListPurchase.length;i=i+2)
{
html += '<tr><td>' + LaptopListPurchase[i] + '</td>';
html += '<td><select NAME="quantity' + i/2 + '" onChange="calculateTotalPurchaseLaptop(this.form)">';
html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
html += '</select></td>';
html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + LaptopListPurchase[i+1] + '" readonly></td>';
html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
html += '</tr>';
}
html += '<tr>';
html += '<td></td>';
html += '<td></td>';
html += '<td></td>';
html += '<td>$<input type=TEXT name="laptopTotal" value="" readonly size=7></td></tr>';
html += '</form>';
html += '</table>';
document.write(html);
// Update the quantities
//
var quantityLaptop;
for (var i=0; i<LaptopList.length/2;i++)
{
// Get the quantity of each type of Laptop
//
quantityLaptop = getCookie("Laptop" + i);
document.orderForm.elements("quantity"+i).value = quantityLaptop;
}
// Update the totals
//
calculateTotalPurchaseLaptop(document.orderForm)
var html = "";
html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
html += '<form id = "orderForm2" name = "orderForm2" method = POST action="javascript:void(0)">';
html += '<tr>';
html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
html += '</tr>';
for (var i=0; i<DesktopListPurchase.length;i=i+2)
{
html += '<tr><td>' + DesktopListPurchase[i] + '</td>';
html += '<td><select NAME="quantity' + i/2 + '" onChange="calculateTotalPurchaseDesktop(this.form)">';
html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
html += '</select></td>';
html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + DesktopListPurchase[i+1] + '" readonly></td>';
html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
html += '</tr>';
}
html += '<tr>';
html += '<td></td>';
html += '<td></td>';
html += '<td></td>';
html += '<td>$<input type=TEXT name="desktopTotal" value="0.00" readonly size=7></td></tr>';
html += '<td></td>';
html += '<td></td>';
html += '<td align = "center"><b>Grand Total</b></td>';
html += '<td>$<input type=TEXT name="grandTotal" value="0.00" readonly size=7></td></tr>';
html += '</form>';
html += '</table>';
document.write(html);
// Update the quantities
//
var quantityDesktop;
for (var i=0; i<DesktopList.length/2;i++)
{
// Get the quantity of each type of Desktop
//
quantityDesktop = getCookie("Desktop" + i);
document.orderForm2.elements("quantity"+i).value = quantityDesktop;
}
// Update the totals
//
calculateTotalPurchaseDesktop(document.orderForm2)
</script>
<table align = 'center'>
<tr>
<td><h1>Pay for your Purchase Below</h1></td>
</tr>
</table>
<table border="1" align = 'center' >
<form name="payment" method="post">
<tr>
<td>
Name on Credit Card: <input type="text" name="Name" /><br />
Credit Card number: <input type="text" name="CreditCard" /><br />
Street Adress: <input type="text" name="Adress" /><br />
Town: <input type="text" name="Town" /><br />
State/Territory: <select NAME="State"><OPTION VALUE="Null">--</OPTION><OPTION VALUE="Australian Capital Territory">ACT</OPTION><OPTION VALUE="South Australia">SA</OPTION><OPTION VALUE="Northen Territory">NT</OPTION><OPTION VALUE="Queensland">QLD</OPTION><OPTION VALUE="Victoria">Vic</OPTION><OPTION VALUE="Western Australia">WA</OPTION><OPTION VALUE="Tasmania">Tas</OPTION></select>
</td>
<td>
<INPUT TYPE="RADIO" NAME="Master Card" VALUE="Master Card">Master Card<BR>
<INPUT TYPE="RADIO" NAME="Visa" VALUE="Visa">Visa<BR>
<INPUT TYPE="RADIO" NAME="AMEX" VALUE="American Express">American Express<BR>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="return checkform()"></td>
</tr>
</table>
</BODY>
</HTML>[
/quote] I know that Javascript is client side, but I'd like to know the best way to populate HTML drop downs in real time based on information typed in the other HTML form fields with information found on the server as opposed to the client. For instance if a user wants to select certain files located in a directory on the server, as they type in the pathname supposedly containing the files the drop downs continually refresh themselves with the server files listed in that directory (if it exists, and apache has permissions to see what's inside) as if it was showing client files instead. What would be nice is if my browser could continually query the server for some of its private information and not have to refresh itself to obtain it, whether that means the server-side would have to continually refresh itself makes no difference to me as long as the client-side doesn't have to. But I guess this is not possible because no matter what you would have to at least refresh the client-side page once? Submitting the form to a CGI or PHP script would not work because I need this functionality to help populate the form BEFORE I send it. I would like to not have to press a button to update the form every time I change the pathname and need to update the drop downs since this would be annoying. I'm open to anything that could do this or something similar not just Javascript. I'm not sure if you could accomplish this by converting the HTML page to CGI/PHP and having it continually reload itself without refreshing the page? I'm not worried about any security risks this may pose because: 1) The server is located on company intranet which is firewalled 2) I could always password protect and encrypt all transmissions, making sure only authorized users use the app Hello all, I have had a look around the forums, but cannot find the answer that I am after. basically, I have a text area to enter a search, and I have already written the JavaScript part of it (unsure if this is where the problem lies). The text that will go into the text area is a URL. the search button is disabled if there are spaces in the query, or if the field is blank, else the button is enabled. The problem I'm having may or may not be to do with my script. The HTML is set to 'onKeyUp' and 'onBlur' to run the function. now, it works fine, unless the user uses the mouse to copy and paste a URL into the text area. the button remains disabled until the user focuses out of the text area then back in. if ctrl+v is used, then the function works. If you would like to see the script I have written let me know, I hope you have some ideas Thanks in advance! I have a simple validation script. The first line of the validation is: function Validate() { if (document.form.name.value == '') { the id of my form is form, so my query is will this validation work, as it does not have a name but it has an id. Should I change the name (above) to id? Hey all, I'm finishing up a project at work that has a web-based front end. Our tightly compressed schedule has left me with no time to properly learn Javascript, so I need some help. I have two pages that need client side validation... Page 1: several text inputs, one select, one textarea, and (maybe) a checkbox There are some complex things I could do here, but for now, I just need to make users behave. The textarea must have something in it, certain select options need a Yes/No popup, and if the checkbox is written to the page (ASP determines this) then it must be checked before certain select options are submitted. I could copy some examples I've found, but how do I ignore the checkbox when it doesn't exist? Page 2: two selects and a textarea Options must be selected and the textarea must have something in it. Straightforward, except that it's a dynamic form where each element has a name + i where i is a number that increments each time the user expands the form. Will wildcards work here? I know this looks like "do my homework" but any help would be greatly appreciated. This is desired to work in IE6, but if that can't happen, I can force an IE8 upgrade on everyone. Hi folks this is my first post Edit: sorry for the incorrect title should have read simple javascript validation problem! i have a fair understanding of php and mysql and have never had to use javascript as i was secretly trying to avoid it. The time has now come where i want to use it for client side validation on a form. I am able to validate most of fields however i need to validate a date to check it has been entered in the following format dd/mm/yyyy and that the date is not greater than todays date. N.B the date is entered into a text field in HTML i wrote a function with lots of if/else statements and failed. Im 100% positive there is a far simpler way to achieve my goal any help would be greatly appreciated. Thanks Code: function checkDate(elem, helperMsg){
var day = elem.substr(0,2);
var month = elem.substr(3,2);
var year = elem.substr(6,4);
if(day < 01 || day > 31)
{
var invalidday = true;
}
if (month < 0 || month > 12)
{
var invalidmonth = true;
}
if (year < 01 || year > 2099)
{
var invalidyear = true;
}
if ( month==04 || month==06 || month==09|| month==11)
{
if (day == 31)
{
var invalidday = true;
}
}
if (month==02)
{
if (day > 28)
{
var invalidday = true;
}
}
if (invalidday || invalidmonth || invalidyear)
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
var dd = today.getDate();
var mm = today.getMonth()+1;//January is 0!
var yyyy = today.getFullYear();
if(dd < 10)
{
dd='0'+dd;
}
if(mm < 10)
{
mm='0'+mm;
}
}
if (day > dd && month > mm && year > yyyy)
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}
Code: if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailvalue))
this is a code to validate an email address. My question is.. how do you call this type of validation? Those /^\w+([\.-]?\w+.. i don't really understand how they work. Is there a special term used to describe this? I want to learn how it works. I want to search for tutorials online but i cant think of any desriptive word to use as keyword for google search. I cant find helpful results. Please help. Thanks I am trying to have the page go to another page after clicking the submit button. is it possible to add to this function an else statement ? if form is filled then go to this page Code:
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
Would appreciate some help making some minor enhancements to a pet adoption form: http://pawsct.org/application.php Problem - Applicants don't read. They answer "No" to the "Agree to Shelter Visit" question, then fill out the looooong application, and get abusive when told that they're not eligible for adoption. They apply from Florida and ignore the warnings about the 90 mile limit. Text notes just don't make enough of an impact. I want to use OnChange to give an alert if someone does not answer "Yes" to agree to a shelter visit (i.e. popup "You must agree to a shelter visit to qualify for an adoption from PAWS") and perhaps a warning message (red text reminder about the 90 mile limit next to the drop-down box) if someone enters a state other than CT. Second problem - I'm a volunteer who doesn't know javascript and can't cobble together a SIMPLE, workable solution from other code samples. Any assistance that you can provide would be most welcome and appreciated. Note: we are planning a redesign of the web site and may do some more sophisticated form validation (e.g. check age, valid e-mail, valid phone) in the future. But for now, we're just looking to check a few key fields for answers that would immediately disqualify an applicant. I'm trying to do a simple validation to see if the field is blank, if it is, I want to write a message to a div. I've added the function call to an onclick. It seems to be set off no matter if there is a value or not, and what's more, the fields are clearing out when the link is clicked. My brain is mush right now, so what am I missing? Code: function validateThis() {
document.getElementById('messages').innerHTML = ''
var theMessage = '';
var reqMsg = 'must have a value.';
for (var i = 0; i <document.theForm1.elements.length; i++) {
if (document.theForm1.elements[i].value = ' ') {
theMessage += document.theForm1.elements[i].name +' ' + reqMsg +'<br/>';
}}
document.getElementById('messages').innerHTML = theMessage;
}
I have used this formula before, for some reason it isnt working properly. If the value is equal to 0 it will give an alert and return false. Then if you change the value of the drop down it won't let you submit. Does anyone see anything wrong? Code: <script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.week_picks.blowout.value == "0" )
{
alert ( "Please Select a Blowout" );
}
return false;
}
//-->
</script>
Code: <form name="week_picks" method="post" action="confirm.php" onsubmit="return validate_form()"> <select id="blowout" name="blowout"> <option value="0">..</option> .... </select> Thanks for any help. I am a javascript begginer and would like to know what is this bit of code saying? (email.indexOf("@",atPos+1) > -1) Thank you! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Email checker</title>
<script type="text/javascript">
function validEmail(email) {
invalidChars = " /:,;"
if (email == "") {
return false;
}
for (i=0; i<invalidChars.length; i++) {
badChar = invalidChars.charAt(i)
if (email.indexOf(badChar,0) > -1) {
return false;
}
}
atPos = email.indexOf("@",1)
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) > -1) {
return false
}
periodPos = email.indexOf(".",atPos)
if (periodPos == -1) {
return false;
}
return true;
}
function submitIt(emailForm) {
if (!validEmail(emailForm.emailAddr.value)) {
alert("Invalid email address");
emailForm.emailAddr.focus();
emailForm.emailAddr.select();
return false
}
alert("email is correct!");
return true;
}
</script>
</head>
<body>
<h2>Email checker</h2>
<form onsubmit="return submitIt(this)" action="#">
Email Address:
<input name="emailAddr" type="text" size="30" />
<p><input type="submit" value="Submit" /> <input type="reset" /></p>
</form>
</body>
</html>
Hi I am trying to valid a simple address, that works fine apart from the fact that it will not allow forward slash in it "/" such as: Unit 12/13 some where. In brief I want to change /^[\w ]+$/; to include a forward character in it. I am new to javascript. many thx. p.s. every time I google it they find me email address validation dehhhhh I use the following code: Quote: function validateVat_No(fld) { var error = ""; var illegalChars = /^[\w ]+$/; // allow letters, numbers, and spaces if (fld.value !== "") { if (!illegalChars.test(fld.value)) { fld.style.background = 'Yellow'; error = "The Vat No contains illegal characters.\n"; } } else { fld.style.background = 'White'; } return error; } Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened. Thanks in advance to anyone who can help out a newbie in need. Code: function uservalidate() {
if (document.getElementById("user").value < 5)
{ document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
else
{
document.getElementById("userdiv").innerHTML = ""
}
}
Code: <body>
<form id="form1">
<input type="text" id="user" onblur="uservalidate()" />
<div id="userdiv"></div>
</form>
</body>
</html>
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. :) |
|||||||