Solved

form html

Posted on 2009-05-09
13
226 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:Hiroyuki Tamura
  • 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:Hiroyuki Tamura
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
 
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:Hiroyuki Tamura
ID: 24347981
thank you.
it doesn't work...
0
 

Author Comment

by:Hiroyuki Tamura
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Hiroyuki Tamura
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:Hiroyuki Tamura
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now