12 Replies - 45363 Views - Last Post: 02 December 2006 - 10:57 PM

#1 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Javascript form validation for drop down box

Posted 01 December 2006 - 12:21 PM

Here is my form
<form method="POST" name= "form" action="mailer.php" onsubmit="return validate()">
				   <h6 align="left" class="style3">
					  Name:
					   <input type="text" name="name" size="20">
					  Phone:
				   <input type="text" name="phone" size="20">
					  E-mail:						   
				   <input type="text" name="email" size="30"><br><br>
					  Address: 
				   <input type="text" name="addy" size="80"><br><br>
					  Item 1:
					 <select name="item1">
				   <option value="blank" selected></option>
				   <optgroup label="Bottled Water">
				   <option value="5galplastic">Mountain Valley 5 Gallon - Plastic</option>
				   <option value="5galglass">Mountain Valley 5 Gallon - Glass</option>
				   <option value="3gal">Mountain Valley 3 Gallon - Plastic</option>
				   <option value="25gal">Mountain Valley 2.5 Gallon - Glass </option>
				   <option value="8oz">Mountain Valley 8oz Plastic </option>
				   <option value="12oz">Mountain Valley 12oz Plastic</option>
				   <option value="16ozglass">Mountain Valley 16.9 oz Premium Vintage Glass</option>
				   <option value="16ozsport">Mountain Valley 16.9oz Plastic Sports Cap</option>
				   <option value="1litglass">Mountain Valley 1 Liter Premium Vintage Glass</option>
				   <option value="1litsports">Mountain Valley 1 Liter Plastic Sports Cap </option>
				   <option value="15ozplastic">Mountain Valley 1.5 Liter Plastic</option>
				   <option value="5galdiamond">Diamond 5 Gallon Plastic </option>
				   <option value="1galdiamond">Diamond 1 Gallon Plastic </option>
				   <option value="1galdiamonddist">Diamond 1 Gallon Distilled Plastic </option>
				   </optgroup>



I want to check if the value of the drop down box is blank. If it is I want a message that says 'please enter your order' I tried =="" and =blank and what you are about to see ==blank neither works, the name, phone, and addy all validate, but it ignores the statement for the drop down box...here is the code
function validate(){
var temp
if (document.form.name.value=="") {
alert("Please enter your name.")
return false
}
else if (document.form.phone.value=="") {
alert("Please enter your phone number.")
return false
}
else if (document.form.addy.value=="") {
alert("Please enter your address.")
return false
}
else if (document.form.item1.value==blank) {
alert("Please enter your order.")
return false
}

return true
}



Is This A Good Question/Topic? 0
  • +

Replies To: Javascript form validation for drop down box

#2 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 12:51 PM

I also would like to validate that there is a valid phone number in the phone box, I have spent a long time searching the web and have not found anything.
Was This Post Helpful? 0
  • +
  • -

#3 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 01:14 PM

You need to modify your code to use the string form of the word blank.
else if (document.form.item1.value=="blank")



What exactly do you mean by validate the phone number?

Do you mean check if it has all 10 digits including area code or check if the number actually belongs to somebody?
Was This Post Helpful? 0
  • +
  • -

#4 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 01:31 PM

View Postjayman9, on 1 Dec, 2006 - 01:14 PM, said:

What exactly do you mean by validate the phone number?

Do you mean check if it has all 10 digits including area code or check if the number actually belongs to somebody?


I'll try 'blank' I can't believe I didn't already DUH, but no I mean to check if there are 10 numbers
Was This Post Helpful? 0
  • +
  • -

#5 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 01:56 PM

ok now i want to validate that if the drop box has a value other than blank, i want to check its corresponding quantity, if the quantity is blank then I want it to say 'please enter a quantity on Item -" here is the drop down boxes with the quantitys
&nbsp; &nbsp;Item 1:
				   &nbsp;&nbsp;<select name="item1">
				   <option value="blank" selected></option>
				   <optgroup label="Bottled Water">
				   <option value="5galplastic">Mountain Valley 5 Gallon - Plastic</option>
				   <option value="5galglass">Mountain Valley 5 Gallon - Glass</option>
				   <option value="3gal">Mountain Valley 3 Gallon - Plastic</option>
				   <option value="25gal">Mountain Valley 2.5 Gallon - Glass </option>
				   <option value="8oz">Mountain Valley 8oz Plastic </option>
				   <option value="12oz">Mountain Valley 12oz Plastic</option>
				   <option value="16ozglass">Mountain Valley 16.9 oz Premium Vintage Glass</option>
				   <option value="16ozsport">Mountain Valley 16.9oz Plastic Sports Cap</option>
				   <option value="1litglass">Mountain Valley 1 Liter Premium Vintage Glass</option>
				   <option value="1litsports">Mountain Valley 1 Liter Plastic Sports Cap </option>
				   <option value="15ozplastic">Mountain Valley 1.5 Liter Plastic</option>
				   <option value="5galdiamond">Diamond 5 Gallon Plastic </option>
				   <option value="1galdiamond">Diamond 1 Gallon Plastic </option>
				   <option value="1galdiamonddist">Diamond 1 Gallon Distilled Plastic </option>
				   </optgroup>
				   <optgroup label="Accessories">
				   <option value="deposit">Cook N Cold Water Cooler (DEPOSIT)</option>
				   <option value="crock">Porcelain Crock</option>
				   <option value="pump">Dolphin Hand Pump </option>
				   <option value="45sleeve">Sleeve of 4.5oz Cone Cups</option>
				   <option value="45case">Case of 4.5 oz Cone Cups</option>
				   <option value="7sleeve">Sleeve of 7 oz Cups</option>
				   <option value="7case">Case of 7 oz Cups</option>
				   </optgroup>
				   </select> 
				   &nbsp;&nbsp;&nbsp;Quantity:
				   <input type="text" name="quant1" size="3">
				   <br>
				   <br>
				   &nbsp; &nbsp;Item 2:
				   &nbsp;&nbsp;<select name="item2">
				   <option value="blank"></option>
				   <optgroup label="Bottled Water">
				   <option value="5galplastic">Mountain Valley 5 Gallon - Plastic</option>
				   <option value="5galglass">Mountain Valley 5 Gallon - Glass</option>
				   <option value="3gal">Mountain Valley 3 Gallon - Plastic</option>
				   <option value="25gal">Mountain Valley 2.5 Gallon - Glass </option>
				   <option value="8oz">Mountain Valley 8oz Plastic </option>
				   <option value="12oz">Mountain Valley 12oz Plastic</option>
				   <option value="16ozglass">Mountain Valley 16.9 oz Premium Vintage Glass</option>
				   <option value="16ozsport">Mountain Valley 16.9oz Plastic Sports Cap</option>
				   <option value="1litglass">Mountain Valley 1 Liter Premium Vintage Glass</option>
				   <option value="1litsports">Mountain Valley 1 Liter Plastic Sports Cap </option>
				   <option value="15ozplastic">Mountain Valley 1.5 Liter Plastic</option>
				   <option value="5galdiamond">Diamond 5 Gallon Plastic </option>
				   <option value="1galdiamond">Diamond 1 Gallon Plastic </option>
				   <option value="1galdiamonddist">Diamond 1 Gallon Distilled Plastic </option>
				   </optgroup>
				   <optgroup label="Accessories">
				   <option value="deposit">Cook N Cold Water Cooler (DEPOSIT)</option>
				   <option value="crock">Porcelain Crock</option>
				   <option value="pump">Dolphin Hand Pump </option>
				   <option value="45sleeve">Sleeve of 4.5oz Cone Cups</option>
				   <option value="45case">Case of 4.5 oz Cone Cups</option>
				   <option value="7sleeve">Sleeve of 7 oz Cups</option>
				   <option value="7case">Case of 7 oz Cups</option>
				   </optgroup>
				   </select>
&nbsp;&nbsp;&nbsp;Quantity:
<input type="text" name="quant2" size="3">
<br><br>
				   &nbsp; &nbsp;Item 3:
				   &nbsp;&nbsp;<select name="item3" >
				   <option value="blank"></option>
				   <optgroup label="Bottled Water">
				   <option value="5galplastic">Mountain Valley 5 Gallon - Plastic</option>
				   <option value="5galglass">Mountain Valley 5 Gallon - Glass</option>
				   <option value="3gal">Mountain Valley 3 Gallon - Plastic</option>
				   <option value="25gal">Mountain Valley 2.5 Gallon - Glass </option>
				   <option value="8oz">Mountain Valley 8oz Plastic </option>
				   <option value="12oz">Mountain Valley 12oz Plastic</option>
				   <option value="16ozglass">Mountain Valley 16.9 oz Premium Vintage Glass</option>
				   <option value="16ozsport">Mountain Valley 16.9oz Plastic Sports Cap</option>
				   <option value="1litglass">Mountain Valley 1 Liter Premium Vintage Glass</option>
				   <option value="1litsports">Mountain Valley 1 Liter Plastic Sports Cap </option>
				   <option value="15ozplastic">Mountain Valley 1.5 Liter Plastic</option>
				   <option value="5galdiamond">Diamond 5 Gallon Plastic </option>
				   <option value="1galdiamond">Diamond 1 Gallon Plastic </option>
				   <option value="1galdiamonddist">Diamond 1 Gallon Distilled Plastic </option>
				   </optgroup>
				   <optgroup label="Accessories">
				   <option value="deposit">Cook N Cold Water Cooler (DEPOSIT)</option>
				   <option value="crock">Porcelain Crock</option>
				   <option value="pump">Dolphin Hand Pump </option>
				   <option value="45sleeve">Sleeve of 4.5oz Cone Cups</option>
				   <option value="45case">Case of 4.5 oz Cone Cups</option>
				   <option value="7sleeve">Sleeve of 7 oz Cups</option>
				   <option value="7case">Case of 7 oz Cups</option>
				   </optgroup>
				   </select>
&nbsp;&nbsp;&nbsp;Quantity:
<input type="text" name="quant3" size="3">
<br><br>
				   &nbsp; &nbsp;Item 4:
				   &nbsp;&nbsp;<select name="item4" >
				   <option value="blank"></option>
				   <optgroup label="Bottled Water">
				   <option value="5galplastic">Mountain Valley 5 Gallon - Plastic</option>
				   <option value="5galglass">Mountain Valley 5 Gallon - Glass</option>
				   <option value="3gal">Mountain Valley 3 Gallon - Plastic</option>
				   <option value="25gal">Mountain Valley 2.5 Gallon - Glass </option>
				   <option value="8oz">Mountain Valley 8oz Plastic </option>
				   <option value="12oz">Mountain Valley 12oz Plastic</option>
				   <option value="16ozglass">Mountain Valley 16.9 oz Premium Vintage Glass</option>
				   <option value="16ozsport">Mountain Valley 16.9oz Plastic Sports Cap</option>
				   <option value="1litglass">Mountain Valley 1 Liter Premium Vintage Glass</option>
				   <option value="1litsports">Mountain Valley 1 Liter Plastic Sports Cap </option>
				   <option value="15ozplastic">Mountain Valley 1.5 Liter Plastic</option>
				   <option value="5galdiamond">Diamond 5 Gallon Plastic </option>
				   <option value="1galdiamond">Diamond 1 Gallon Plastic </option>
				   <option value="1galdiamonddist">Diamond 1 Gallon Distilled Plastic </option>
				   </optgroup>
				   <optgroup label="Accessories">
				   <option value="deposit">Cook N Cold Water Cooler (DEPOSIT)</option>
				   <option value="crock">Porcelain Crock</option>
				   <option value="pump">Dolphin Hand Pump </option>
				   <option value="45sleeve">Sleeve of 4.5oz Cone Cups</option>
				   <option value="45case">Case of 4.5 oz Cone Cups</option>
				   <option value="7sleeve">Sleeve of 7 oz Cups</option>
				   <option value="7case">Case of 7 oz Cups</option>
				   </optgroup>
				   </select>
				   &nbsp;&nbsp;&nbsp;Quantity:
				   <input type="text" name="quant4" size="3">



and here is the javascript...keep in mind that it works for item1 and item2 but not item 3 or 4
function validate(){
var temp
if (document.form.name.value=="") {
alert("Please enter your name.")
return false
}
else if (document.form.phone.value == ""){
alert ("Please enter your Phone Number");
return false;
}

else if (document.form.addy.value=="") {
alert("Please enter your address.")
return false
}
else if (document.form.item1.value=="blank") {
alert("Please enter your order.")
return false
}
else if (document.form.quant1.value=="") {
alert("Please enter a quantity for Item 1.")
return false
}
else if (document.form.item2.value!="blank") {
  if (document.form.quant2.value =="") {
  alert("Please enter a quantity on Item 2")
  return false
  }
}
else if (document.form.item3.value!="blank") {
  if (document.form.quant3.value =="") {
  alert("Please enter a quantity on Item 3")
  return false
  }
}
else if (document.form.item4.value!="blank") {
  if (document.form.quant4.value =="") {
  alert("Please enter a quantity on Item 4")
  return false
  }
}
return true
}



if you want to look at it, and try it, it is at
mountainvalleyshreveport.com/products.html
Was This Post Helpful? 0
  • +
  • -

#6 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 03:32 PM

To test against a string you need to use the comparison operator (or whatever it’s called). It looks like two equal signs.

Also, instead of else if (document.form.quant1.value==""), it may make more sense to test against whether or not the value is null rather than an empty string. For example: else if (!document.form.quant1.value). It looks prettier and requires less code.

This post has been edited by Arbitrator: 01 December 2006 - 03:36 PM

Was This Post Helpful? 0
  • +
  • -

#7 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 04:40 PM

View PostKacie, on 1 Dec, 2006 - 12:31 PM, said:

but no I mean to check if there are 10 numbers

You could just check the length of the value returned, if it is anything but 10, inform the user to reenter the number.
document.form.phone.value.length


But if you also want to verify that it is a number and not any other character. Then you also need to check each digit in the string and see if it is a number between 0 and 9 in addition to checking the length. The following function would work for that purpose, just pass the value in the textbox to the function to verify if all are numbers.
function isInteger(s)
{   var i;
	for (i = 0; i < s.length; i++)
	{   
		// Check that current character is number.
		var c = s.charAt(i);
		if (((c < "0") || (c > "9"))) return false;
	}
	// All characters are numbers.
	return true;
}



You could code it something like this:
if (document.form.phone.value.length == 10 && isInteger(document.form.phone.value))


Was This Post Helpful? 0
  • +
  • -

#8 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 08:03 PM

I will try that, but I don't understand why it works for items 1 and 2 but not items 3 and 4
Was This Post Helpful? 0
  • +
  • -

#9 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 08:10 PM

thank you so much for the phone validation, I will try it out right now. I am pretty new to programming in OOP, I understand linear programming fine, but java adn javascript has so much built in stuff, and it is not very english like, I can follow logic and understand it and even tweak it, but I am not familar enough w/ the syntax and OOP to make up my own yet.
Was This Post Helpful? 0
  • +
  • -

#10 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Post icon  Posted 01 December 2006 - 08:17 PM

View PostArbitrator, on 1 Dec, 2006 - 03:32 PM, said:

Also, instead of else if (document.form.quant1.value==""), it may make more sense to test against whether or not the value is null rather than an empty string. For example: else if (!document.form.quant1.value). It looks prettier and requires less code.


Well I tried your pretty code, and that is much easier, thanks for the tip, but it didn't work, like I said, its a mystery, it works for item1 and item2 -- go check it out www.mountainvalleyshreveport.com/products.html -- but when its gets to item3 --nothing...very frustrating, cause its exactly the same, I literally copied and pasted the else if I made for item2 and just changed the numbers...and nothing...its the same it should work...very annoying...can you figure out whats wrong? Anybody?
Was This Post Helpful? 0
  • +
  • -

#11 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Javascript form validation for drop down box

Posted 01 December 2006 - 09:33 PM

It is because you have nested all of your IF statements. So the only way that it will work correctly is if the first item is completed correctly, then the second, and so on in order. If even one item is not filled out properly the remaining fields will not be evaluated. Remove the else from those statements.
function validate(){
var temp
if (document.form.name.value=="") {
alert("Please enter your name.")
return false
}
else if (document.form.phone.value == ""){
alert ("Please enter your Phone Number");
return false;
}

else if (document.form.addy.value=="") {
alert("Please enter your address.")
return false
}
else if (document.form.item1.value=="blank") {
alert("Please enter your order.")
return false
}
if (document.form.quant1.value=="") {
alert("Please enter a quantity for Item 1.")
return false
}
if (document.form.item2.value!="blank") {
  if (document.form.quant2.value =="") {
  alert("Please enter a quantity on Item 2")
  return false
  }
}
if (document.form.item3.value!="blank") {
  if (document.form.quant3.value =="") {
  alert("Please enter a quantity on Item 3")
  return false
  }
}
if (document.form.item4.value!="blank") {
  if (document.form.quant4.value =="") {
  alert("Please enter a quantity on Item 4")
  return false
  }
}
return true
}


Now each statement will be evaluated independently of the rest.
Was This Post Helpful? 0
  • +
  • -

#12 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Javascript form validation for drop down box

Posted 02 December 2006 - 04:20 AM

Nevermind on my comparison operator comment. Guess I was tired, because you were using != and I only saw =, hence why I suggested that you needed ==.

View PostKacie, on 1 Dec, 2006 - 08:17 PM, said:

Well I tried your pretty code, and that is much easier, thanks for the tip, but it didn't work, like I said, its a mystery, it works for item1 and item2
Just in case you mean that the “pretty code” thing didn’t work, here’s a working example. I chose to run a small test just to confirm that it worked with form elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
  <head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="Author" content="Patrick Garies">

	<title>HTML 4.01 Strict Document</title>

	<script type="text/javascript">
	  function validity() {
		if (!document.getElementById("quantity").value) {
		  document.getElementsByTagName("td")[3].firstChild.data = "Invalid";
		  }
		else document.getElementsByTagName("td")[3].firstChild.data = "Thank You";
		}
	</script>

  </head>
  <body>

	<table>
	  <tr>
		<td><input type="text" id="quantity"></td>
		<td><input type="submit" onclick="validity();"></td>
	  </tr>
	  <tr>
		<td>Data Cell 3</td>
		<td>Data Cell 4</td>
	  </tr>
	</table>

  </body>
</html>

Was This Post Helpful? 0
  • +
  • -

#13 Kacie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 01-November 06

Re: Javascript form validation for drop down box

Posted 02 December 2006 - 10:57 PM

View Postjayman9, on 1 Dec, 2006 - 09:33 PM, said:

Now each statement will be evaluated independently of the rest.



And your right it does...thank you so much, I got thrown off because when I edited the script from a differnt one I have used before for a simpler form, i left out an else...and it didn't work...so I assumed I needed elses everywhere but now it kind of makes sense. I got your 10 char check to work...but I am still messing with the isInteger function and trying to get it to work and understanding it...if I have problems I will post again...thanks for all the help
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1