My form validation script seems to be running but the getElementById is only reading the first Id and skipping the rest for some reason. Is it due to closed tag issues? If so where do I put them? or is it another reason that I am overlooking somehow. Please help 🙁
I am thankful for any help, I’ve been staring at this for days. Here is the code.
The JS code.
<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var name = document.getElementById('name');
var addr = document.getElementById('addr');
var phone = document.getElementById('phone');
var state = document.getElementById('state');
var username = document.getElementById('username');
var email = document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(name, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(phone, "Please enter only numeric values without any dashes")){
if(madeSelection(state, "Please Choose a State")){
if(lengthRestriction(username, 6, 8)){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Select State..."){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
Here is the form code.
<?php
// Will not show if submitted once so client cant resubmit over and over again.
if ($submitted==2)
{
echo "<a href=\"../\"><h2>[ Return to main menu ]</h2></a>";
// sets variables to a Null string
$new_name='';
$new_phone='';
$new_email='';
$new_city='';
$new_state='';
$new_cost='';
$new_info ='';
}
else
{
echo "<div class=\"container\" >";
echo "<div class=\"form_container\" align=\"left\" >";
echo "<h2>Get Listed</h2>";
echo "<i>All required fields are marked with a red asteriks (<font color=\"red\"> * </font>)</i><br/><br/>";
echo "<form action=\"#\" onsubmit=\"return formValidator()\" method=\"post\" >";
echo "<font color=\"red\">*</font> <input type=\"checkbox\" name=\"terms\" value=\"yes\" >
Yes, I agree to our <a href=\"../legal/index.php\" target=\"_blank\" >
<i>Terms and Conditions</i></a><br/><br/>";
echo "<h2>Limo Service Details</h2>";
echo "<font color=\"red\"/>*</font> Service Name: <br/>";
echo "<input type=\"text\" name=\"in_name\" maxlength=\"60\" size=\"26\" id=\"name\" value='$new_name' >";
echo "<br/>";
echo "<font color=\"red\"/>*</font> Phone: <br/>";
echo "<input type=\"text\" name=\"in_phone\" maxlength=\"60\" size=\"26\" id=\"phone\" value='$new_phone' >";
echo "<br/>";
echo "<font color=\"red\"/>*</font> Email: <br/>";
echo "<input type=\"text\" name=\"in_email\" maxlength=\"60\" size=\"26\" id=\"email\" value='$new_email' >";
echo "<br/>";
echo "<font color=\"red\">*</font> Cost: <br/>";
echo "<input type=\"text\" name=\"in_cost\" maxlength=\"30\" size=\"11\" value='$new_cost' >";
echo " ";
echo "<select style=\"width: 120px\" name=\"in_rate\" >";
echo "<option value=\"daily\" selected>Daily</option>";
echo "<option value=\"hourly\">Hourly</option>";
echo "</select>";
echo "<br/>";
echo "<font color=\"red\">*</font> City: <select name=\"in_city\" style=\"width: 245px\" >";
echo "<option value=\"\">Select City...</option>";
echo "<option value=\"Atlanta\">Atlanta</option>";
echo "<option value=\"Atlantic City\">Atlantic City</option>";
echo "<option value=\"Austin\">Austin</option>";
echo "<option value=\"Baltimore\">Baltimore</option>";
echo "<option value=\"Boston\">Boston</option>";
echo "<option value=\"Charlotte\">Charlotte</option>";
echo "<option value=\"Chicago\">Chicago</option>";
echo "<option value=\"Cincinnati\">Cincinnati</option>";
echo "<option value=\"Columbus\">Columbus</option>";
echo "<option value=\"Dallas\">Dallas</option>";
echo "<option value=\"Denver\">Denver</option>";
echo "<option value=\"Detroit\">Detroit</option>";
echo "<option value=\"Fort Lauderdale\">Fort Lauderdale</option>";
echo "<option value=\"Honolulu\">Honolulu</option>";
echo "<option value=\"Houston\">Houston</option>";
echo "<option value=\"Indianapolis\">Indianapolis</option>";
echo "<option value=\"Irvine\">Irvine</option>";
echo "<option value=\"Las Vegas\">Las Vegas</option>";
echo "<option value=\"Los Angeles\">Los Angeles</option>";
echo "<option value=\"Miami\">Miami</option>";
echo "<option value=\"Minneapolis\">Minneapolis</option>";
echo "<option value=\"Nashville\">Nashville</option>";
echo "<option value=\"Newark\">Newark</option>";
echo "<option value=\"New York\">New York</option>";
echo "<option value=\"Oklahoma\">Oklahoma City</option>";
echo "<option value=\"Orlando\">Orlando</option>";
echo "<option value=\"Portland\">Portland</option>";
echo "<option value=\"Philadelphia\">Philadelphia</option>";
echo "<option value=\"Phoenix\">Phoenix</option>";
echo "<option value=\"Raleigh\">Raleigh</option>";
echo "<option value=\"Sacramento\">Sacramento</option>";
echo "<option value=\"Salt Lake City\">Salt Lake City</option>";
echo "<option value=\"San Antonio\">San Antonio</option>";
echo "<option value=\"San Diego\">San Diego</option>";
echo "<option value=\"San Francisco\">San Francisco</option>";
echo "<option value=\"Tampa\">Tampa</option>";
echo "</select>";
echo "<br/>";
// City2
echo " City 2: <select name=\"in_city2\" style=\"width: 245px\" >";
echo "<option value=\"\">Select City...</option>";
echo "<option value=\"Atlanta\">Atlanta</option>";
echo "<option value=\"Atlantic City\">Atlantic City</option>";
echo "<option value=\"Austin\">Austin</option>";
echo "<option value=\"Baltimore\">Baltimore</option>";
echo "<option value=\"Boston\">Boston</option>";
echo "<option value=\"Charlotte\">Charlotte</option>";
echo "<option value=\"Chicago\">Chicago</option>";
echo "<option value=\"Cincinnati\">Cincinnati</option>";
echo "<option value=\"Columbus\">Columbus</option>";
echo "<option value=\"Dallas\">Dallas</option>";
echo "<option value=\"Denver\">Denver</option>";
echo "<option value=\"Detroit\">Detroit</option>";
echo "<option value=\"Fort Lauderdale\">Fort Lauderdale</option>";
echo "<option value=\"Honolulu\">Honolulu</option>";
echo "<option value=\"Houston\">Houston</option>";
echo "<option value=\"Indianapolis\">Indianapolis</option>";
echo "<option value=\"Irvine\">Irvine</option>";
echo "<option value=\"Las Vegas\">Las Vegas</option>";
echo "<option value=\"Los Angeles\">Los Angeles</option>";
echo "<option value=\"Miami\">Miami</option>";
echo "<option value=\"Minneapolis\">Minneapolis</option>";
echo "<option value=\"Nashville\">Nashville</option>";
echo "<option value=\"Newark\">Newark</option>";
echo "<option value=\"New York\">New York</option>";
echo "<option value=\"Oklahoma\">Oklahoma City</option>";
echo "<option value=\"Orlando\">Orlando</option>";
echo "<option value=\"Portland\">Portland</option>";
echo "<option value=\"Philadelphia\">Philadelphia</option>";
echo "<option value=\"Phoenix\">Phoenix</option>";
echo "<option value=\"Raleigh\">Raleigh</option>";
echo "<option value=\"Sacramento\">Sacramento</option>";
echo "<option value=\"Salt Lake City\">Salt Lake City</option>";
echo "<option value=\"San Antonio\">San Antonio</option>";
echo "<option value=\"San Diego\">San Diego</option>";
echo "<option value=\"San Francisco\">San Francisco</option>";
echo "<option value=\"Tampa\">Tampa</option>";
echo "</select>";
echo "<br/>";
// City3
echo " City 3: <select name=\"in_city3\" style=\"width: 245px\" >";
echo "<option value=\"\">Select City...</option>";
echo "<option value=\"Atlanta\">Atlanta</option>";
echo "<option value=\"Atlantic City\">Atlantic City</option>";
echo "<option value=\"Austin\">Austin</option>";
echo "<option value=\"Baltimore\">Baltimore</option>";
echo "<option value=\"Boston\">Boston</option>";
echo "<option value=\"Charlotte\">Charlotte</option>";
echo "<option value=\"Chicago\">Chicago</option>";
echo "<option value=\"Cincinnati\">Cincinnati</option>";
echo "<option value=\"Columbus\">Columbus</option>";
echo "<option value=\"Dallas\">Dallas</option>";
echo "<option value=\"Denver\">Denver</option>";
echo "<option value=\"Detroit\">Detroit</option>";
echo "<option value=\"Fort Lauderdale\">Fort Lauderdale</option>";
echo "<option value=\"Honolulu\">Honolulu</option>";
echo "<option value=\"Houston\">Houston</option>";
echo "<option value=\"Indianapolis\">Indianapolis</option>";
echo "<option value=\"Irvine\">Irvine</option>";
echo "<option value=\"Las Vegas\">Las Vegas</option>";
echo "<option value=\"Los Angeles\">Los Angeles</option>";
echo "<option value=\"Miami\">Miami</option>";
echo "<option value=\"Minneapolis\">Minneapolis</option>";
echo "<option value=\"Nashville\">Nashville</option>";
echo "<option value=\"Newark\">Newark</option>";
echo "<option value=\"New York\">New York</option>";
echo "<option value=\"Oklahoma\">Oklahoma City</option>";
echo "<option value=\"Orlando\">Orlando</option>";
echo "<option value=\"Portland\">Portland</option>";
echo "<option value=\"Philadelphia\">Philadelphia</option>";
echo "<option value=\"Phoenix\">Phoenix</option>";
echo "<option value=\"Raleigh\">Raleigh</option>";
echo "<option value=\"Sacramento\">Sacramento</option>";
echo "<option value=\"Salt Lake City\">Salt Lake City</option>";
echo "<option value=\"San Antonio\">San Antonio</option>";
echo "<option value=\"San Diego\">San Diego</option>";
echo "<option value=\"San Francisco\">San Francisco</option>";
echo "<option value=\"Tampa\">Tampa</option>";
echo "</select>";
echo "<br/>";
// State
echo "<font color=\"red\">*</font> State: <select name=\"in_state\" id=\"state\" style=\"width: 245px\" >";
echo "<option>Select State...</option>";
echo "<option value=\"Alabama\">Alabama</option>";
echo "<option value=\"Alaska\">Alaska</option>";
echo "<option value=\"Arizona\">Arizona</option>";
echo "<option value=\"Arkansas\">Arkansas</option>";
echo "<option value=\"California\">California</option>";
echo "<option value=\"Colorado\">Colorado</option>";
echo "<option value=\"Connecticut\">Connecticut</option>";
echo "<option value=\"Delaware\">Delaware</option>";
echo "<option value=\"Florida\">Florida</option>";
echo "<option value=\"Georgia\">Georgia</option>";
echo "<option value=\"Hawaii\">Hawaii</option>";
echo "<option value=\"Idaho\">Idaho</option>";
echo "<option value=\"Illinois\">Illinois</option>";
echo "<option value=\"Indiana\">Indiana</option>";
echo "<option value=\"Iowa\">Iowa</option>";
echo "<option value=\"Kansas\">Kansas</option>";
echo "<option value=\"Kentucky\">Kentucky</option>";
echo "<option value=\"Louisiana\">Louisiana</option>";
echo "<option value=\"Maine\">Maine</option>";
echo "<option value=\"Maryland\">Maryland</option>";
echo "<option value=\"Massachusetts\">Massachusetts</option>";
echo "<option value=\"Michigan\">Michigan</option>";
echo "<option value=\"Minnesota\">Minnesota</option>";
echo "<option value=\"Mississippi\">Mississippi</option>";
echo "<option value=\"Missouri\">Missouri</option>";
echo "<option value=\"Montana\">Montana</option>";
echo "<option value=\"Nebraska\">Nebraska</option>";
echo "<option value=\"Nevada\">Nevada</option>";
echo "<option value=\"New Hampshire\">New Hampshire</option>";
echo "<option value=\"New Jersey\">New Jersey</option>";
echo "<option value=\"New Mexico\">New Mexico</option>";
echo "<option value=\"New York\">New York</option>";
echo "<option value=\"North Carolina\">North Carolina</option>";
echo "<option value=\"North Dakota\">North Dakota</option>";
echo "<option value=\"Ohio\">Ohio</option>";
echo "<option value=\"Oklahoma\">Oklahoma</option>";
echo "<option value=\"Oregon\">Oregon</option>";
echo "<option value=\"Pennsylvania\">Pennsylvania</option>";
echo "<option value=\"Rhode Island\">Rhode Island</option>";
echo "<option value=\"South Carolina\">South Carolina</option>";
echo "<option value=\"South Dakota\">South Dakota</option>";
echo "<option value=\"Tennessee\">Tennessee</option>";
echo "<option value=\"Texas\">Texas</option>";
echo "<option value=\"Utah\">Utah</option>";
echo "<option value=\"Vermont\">Vermont</option>";
echo "<option value=\"Virginia\">Virginia</option>";
echo "<option value=\"Washington\">Washington</option>";
echo "<option value=\"West Virginia\">West Virginia</option>";
echo "<option value=\"Wisconsin\">Wisconsin</option>";
echo "<option value=\"Wyoming\">Wyoming</option>";
echo "</select>";
echo "<br/><br/>";
//Additional Info
echo " Additional Info: ";
echo "<br/>";
echo "<textarea rows=\"5\" cols=\"26\" name=\"in_info\" >$new_info";
echo "</textarea>";
echo "<font size=\"1\"> (Maximum characters: 500)</font>";
echo "<br/>";
//Submit Button
echo "<input type=\"hidden\" name=\"submission\" value=\"1\">";
echo "<center><input type=\"submit\" value=\"LIST ME\" class=\"button2\" /></center>";
echo "</form>";
echo "</div>";
echo "</div>";
}
?>
Once validated it gets sent to a php mysql file that inputs it into my database. Thanks again for any help.
~Nikoli
Your code is not doing what you think it is.
returns:
Instead, to get the value, you want to do:
That should solve your current problem.
On another note, you should probably look into closing that php tag instead of wrapping everything in echo statements. Using CSS for your styles will save you a lot of headache in the future as well.