Solved

form html

Posted on 2009-05-09
13
232 Views
Last Modified: 2012-05-06
i have the form.
if the user didn't select, i want to give popup menu says "Please select size."
do you know how to do it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function selectProduct()
{
var val1 = document.getElementById('mylist1').options[document.getElementById('mylist1').selectedIndex].value;
var val2 = document.getElementById('mylist2').options[document.getElementById('mylist2').selectedIndex].value;
var form1 = document.getElementById('form1');
 
if (val1 == "XS/S/M")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654321;
 
}
 
}
else if(val1 == "M/L/XL/XXL")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654322;
}
}
}
</script>
</head>
<body onload="javascript:selectProduct();">
 
<form id="form1" method="POST" action="http://secure.ultracart.com/cgi-bin/UCEditor">
<input type="hidden" name="merchantId" value="SWISH" />
<input type="hidden" name="add" id="add" value="" />
<br />
<SELECT id="mylist1" NAME="mylist1" onchange="javascript:selectProduct();">
<OPTION VALUE="error" >Select size:</OPTION>
<OPTION VALUE="XS/S/M" >XS/S/M</OPTION>
<OPTION VALUE="M/L/XL/XXL">M/L/XL/XXL</OPTION>
</SELECT>
<br />
<SELECT id="mylist2" NAME="mylist2" onchange="javascript:selectProduct();">
<OPTION VALUE="NATURAL/BLUSH" >NATURAL/BLUSH</OPTION>
</SELECT>
<br />
<input type="text" name="quantity" value="1" />
<br />
<input type="submit" name="submit" value="add to cart" />
</form>
</body>
</html>

Open in new window

0
Comment
Question by:Tony T
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 86

Assisted Solution

by:CEHJ
CEHJ earned 40 total points
ID: 24347119
Just check the value in a function set as the <form> onsubmit attribute
0
 

Author Comment

by:Tony T
ID: 24347123
thank you.
where should i put that?
could you modify my snippet?
0
 
LVL 86

Assisted Solution

by:CEHJ
CEHJ earned 40 total points
ID: 24347146
You can do:
<form id="form1" method="POST" onsubmit="return isValidForm();" action="http://secure.ultracart.com/cgi-bin/UCEditor">
 
 
...
 
function isValidForm() {
	return document.forms[0].mylist1.value != "error";
}
	

Open in new window

0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 85 total points
ID: 24347753
Or nicer:

<form id="form1" method="POST" onsubmit="return isValidForm(this);" action="http://secure.ultracart.com/cgi-bin/UCEditor">
 
 
...
 
function isValidForm(theForm) {
  if(theForm.mylist1.selectedIndex<1) {
    alert('Please select size');
    theForm.mylist1.focus();
    return false;
  }
  return true; // allow submit
}

Open in new window

0
 

Author Comment

by:Tony T
ID: 24347981
thank you.
it doesn't work...
0
 

Author Comment

by:Tony T
ID: 24347982
is this ok?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function selectProduct()
{
var val1 = document.getElementById('mylist1').options[document.getElementById('mylist1').selectedIndex].value;
var val2 = document.getElementById('mylist2').options[document.getElementById('mylist2').selectedIndex].value;
var form1 = document.getElementById('form1');
 
if (val1 == "XS/S/M")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654321;
 
}
}
else if(val1 == "M/L/XL/XXL")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654322;
}
}
function isValidForm(theForm) {
  if(theForm.mylist1.selectedIndex<1) {
    alert('Please select size');
    theForm.mylist1.focus();
    return false;
  }
  return true; // allow submit
}
}
</script>
</head>
<body onload="javascript:selectProduct();">
 
<form id="form1" method="POST" onsubmit="return isValidForm(this);" action="http://secure.ultracart.com/cgi-bin/UCEditor">
 
<input type="hidden" name="merchantId" value="SWISH" />
<input type="hidden" name="add" id="add" value="" />
<br />
<SELECT id="mylist1" NAME="mylist1" onchange="javascript:selectProduct();">
<OPTION VALUE="" >Select size:</OPTION>
<OPTION VALUE="XS/S/M" >XS/S/M</OPTION>
<OPTION VALUE="M/L/XL/XXL">M/L/XL/XXL</OPTION>
</SELECT>
<br />
<SELECT id="mylist2" NAME="mylist2" onchange="javascript:selectProduct();">
<OPTION VALUE="NATURAL/BLUSH" >NATURAL/BLUSH</OPTION>
</SELECT>
<br />
<input type="text" name="quantity" value="1" />
<br />
<input type="submit" name="submit" value="add to cart" />
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:Tony T
ID: 24348205
do i need to add "onload" javascript?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function selectProduct()
{
var val1 = document.getElementById('mylist1').options[document.getElementById('mylist1').selectedIndex].value;
var val2 = document.getElementById('mylist2').options[document.getElementById('mylist2').selectedIndex].value;
var form1 = document.getElementById('form1');
 
if (val1 == "XS/S/M")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654321;
 
}
}
else if(val1 == "M/L/XL/XXL")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654322;
}
}
function isValidForm(theForm) {
  if(theForm.mylist1.selectedIndex<1) {
    alert('Please select size');
    theForm.mylist1.focus();
    return false;
  }
  return true; // allow submit
}
}
</script>
</head>
<body onload="javascript:selectProduct();isValidForm();">
 
<form id="form1" method="POST" onsubmit="return isValidForm(this);" action="http://secure.ultracart.com/cgi-bin/UCEditor">
 
<input type="hidden" name="merchantId" value="SWISH" />
<input type="hidden" name="add" id="add" value="" />
<br />
<SELECT id="mylist1" NAME="mylist1" onchange="javascript:selectProduct();">
<OPTION VALUE="" >Select size:</OPTION>
<OPTION VALUE="XS/S/M" >XS/S/M</OPTION>
<OPTION VALUE="M/L/XL/XXL">M/L/XL/XXL</OPTION>
</SELECT>
<br />
<SELECT id="mylist2" NAME="mylist2" onchange="javascript:selectProduct();">
<OPTION VALUE="NATURAL/BLUSH" >NATURAL/BLUSH</OPTION>
</SELECT>
<br />
<input type="text" name="quantity" value="1" />
<br />
<input type="submit" name="submit" value="add to cart" />
</form>
</body>
</html>

Open in new window

0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 85 total points
ID: 24348986
You have too many brackets

Load it into Firefox and look at the error console

Here is a better version but I did not have time to test - note how I pass the form to the function and removed the name="submit" from the submit button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function selectProduct(theForm) {
  var val1 = theForm.mylist1.options[theForm.mylist1.selectedIndex].value;
  var val2 = theForm.mylist2.options[theForm.mylist2.selectedIndex].value;
  if (val1 == "XS/S/M") {
    if (val2 == "NATURAL/BLUSH") {
      theForm.add.value = 987654321;
    }
  }
  else if (val1 == "M/L/XL/XXL") {
    if(val2 == "NATURAL/BLUSH") {
    theForm.add.value =  987654322;
  }
}
function isValidForm(theForm) {
  if(theForm.mylist1.selectedIndex<1) {
    alert('Please select size');
    theForm.mylist1.focus();
    return false;
  }
  return true; // allow submit
}
</script>
</head>
<body onload="selectProduct(document.form1);">
 
<form id="form1" method="POST" onsubmit="return isValidForm(this);" action="http://secure.ultracart.com/cgi-bin/UCEditor">
 
<input type="hidden" name="merchantId" value="SWISH" />
<input type="hidden" name="add" id="add" value="" />
<br />
<SELECT id="mylist1" NAME="mylist1" onchange="selectProduct(this.form);">
<OPTION VALUE="" >Select size:</OPTION>
<OPTION VALUE="XS/S/M" >XS/S/M</OPTION>
<OPTION VALUE="M/L/XL/XXL">M/L/XL/XXL</OPTION>
</SELECT>
<br />
<SELECT id="mylist2" NAME="mylist2" onchange="selectProduct(this.form);">
<OPTION VALUE="NATURAL/BLUSH" >NATURAL/BLUSH</OPTION>
</SELECT>
<br />
<input type="text" name="quantity" value="1" />
<br />
<input type="submit" value="add to cart" />
</form>
</body>
</html>

Open in new window

0
 
LVL 1

Accepted Solution

by:
mohgupta earned 375 total points
ID: 24382246
You can use onclick event instead of onsubmit as follows :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function selectProduct()
{
var val1 = document.getElementById('mylist1').options[document.getElementById('mylist1').selectedIndex].value;
var val2 = document.getElementById('mylist2').options[document.getElementById('mylist2').selectedIndex].value;
var form1 = document.getElementById('form1');
 
if (val1 == "XS/S/M")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654321;
 
}
 
}
else if(val1 == "M/L/XL/XXL")
{
if(val2 == "NATURAL/BLUSH")
{
document.getElementById('add').value = 987654322;
}
}
}

function isValidForm(theForm) {
  if(theForm.mylist1.selectedIndex<1) {
    alert('Please select size');
    theForm.mylist1.focus();
    return false;
  }
  return true; // allow submit
}

</script>
</head>
<body onload="javascript:selectProduct();">
 
<form id="form1" method="POST" onclick="return isValidForm(this);" action="http://secure.ultracart.com/cgi-bin/UCEditor">
<input type="hidden" name="merchantId" value="SWISH" />
<input type="hidden" name="add" id="add" value="" />
<br />
<SELECT id="mylist1" NAME="mylist1" onchange="javascript:selectProduct();">
<OPTION VALUE="error" >Select size:</OPTION>
<OPTION VALUE="XS/S/M" >XS/S/M</OPTION>
<OPTION VALUE="M/L/XL/XXL">M/L/XL/XXL</OPTION>
</SELECT>
<br />
<SELECT id="mylist2" NAME="mylist2" onchange="javascript:selectProduct();">
<OPTION VALUE="NATURAL/BLUSH" >NATURAL/BLUSH</OPTION>
</SELECT>
<br />
<input type="text" name="quantity" value="1" />
<br />
<input type="submit" name="submit" value="add to cart" />
</form>
</body>
</html>
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 85 total points
ID: 24382268
Not a great idea to use onClick - why would you want to do that when you can cancel the submission using onSubmit???
Also NEVER call anything in a form for NAME="submit"
0
 

Author Closing Comment

by:Tony T
ID: 31579871
thank you.
0
 
LVL 86

Expert Comment

by:CEHJ
ID: 24389448
:-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24389788
Hmm...
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question