Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

form html

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
Hiroyuki Tamura
Asked:
Hiroyuki Tamura
  • 5
  • 4
  • 3
  • +1
6 Solutions
 
CEHJCommented:
Just check the value in a function set as the <form> onsubmit attribute
0
 
Hiroyuki TamuraField EngineerAuthor Commented:
thank you.
where should i put that?
could you modify my snippet?
0
 
CEHJCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Michel PlungjanIT ExpertCommented:
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
 
Hiroyuki TamuraField EngineerAuthor Commented:
thank you.
it doesn't work...
0
 
Hiroyuki TamuraField EngineerAuthor Commented:
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
 
Hiroyuki TamuraField EngineerAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
mohguptaCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
Hiroyuki TamuraField EngineerAuthor Commented:
thank you.
0
 
CEHJCommented:
:-)
0
 
Michel PlungjanIT ExpertCommented:
Hmm...
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now