Solved

form html

Posted on 2009-05-09
13
225 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

708 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

13 Experts available now in Live!

Get 1:1 Help Now