• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 475
  • Last Modified:

Javascript Alert on Color Choice

I need a simple javascript for a dropdown color choice.  They way it is done provides a page with a warning, however i need a popup alert.

the form is:

<form action="http://www.cartserver.com/sc/cart.cgi" method=POST>
                    <p class="bolds">Available in Several Colors<br><select name=op3 class="select">

                    <option value="=error= You must select a color for this product." selected>Please
                    select color</option>
                    <option value="Black - $158.99">Black</option>
                    <option value="Desert Tan - $158.99">Desert Tan</option>
                    <option value="OD Green - $158.99">OD Green</option>
                  </select></p>

<input type=hidden name="item" value="s-5437^1700^Pelican 1700 35 inch Gun Case^op3^1^^^^20.0^">
0
muligruber
Asked:
muligruber
  • 5
  • 5
  • 5
2 Solutions
 
ZvonkoSystems architectCommented:
Like this:

<form action="http://www.cartserver.com/sc/cart.cgi" method=POST onSubmit="if(this.op3.selectedIndex<1){alert('You must select a color for this product.');this.op3.focus();return fasle;}">

0
 
muligruberAuthor Commented:
Thanks for the quick response.  So i would just do this for each of them renaming the "op3" for each.?
0
 
ZvonkoSystems architectCommented:
Of course not.
If you have several dropdowns to check, then you do not do it inline like I deostrated above, but you sumirize the checks in a form checking function.

Like this:
<head>
<script>
function checkForm(theForm){
  if(theForm.op3.selectedIndex<1){
    alert('You must select a color for this product.');
    theFirm.op3.focus();
    return fasle;
  }
  if(theForm.op4.selectedIndex<1){
    alert('You must select something for this product.');
    theFirm.op4.focus();
    return fasle;
  }
  if(theForm.op5.selectedIndex<1){
    alert('You must select something for this product.');
    theFirm.op5.focus();
    return fasle;
  }
  return true;
}
</script>
</head>
<body>
<form action="http://www.cartserver.com/sc/cart.cgi" method=POST onSubmit="return checkForm(this)">

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
muligruberAuthor Commented:
Thanks that works great.  One thing.  It is still submitting to the shopping cart after you click ok on the alert.  How can I make it alert then just stop without following the form action?
0
 
ZvonkoSystems architectCommented:
Uhps, sorry :)
Change all statements:
    return fasle;

To:
    return false;

0
 
smaccariCommented:
I think it submits the form just because of some code mistakes (Zvonko, you typed too fast ;o)
Just replace all occurences of return fasle; by return false;
It won't submit the form no mre ;o)

function checkForm(theForm){
  if(theForm.op3.selectedIndex<1){
    alert('You must select a color for this product.');
    theFirm.op3.focus();
    return false;
  }
  if(theForm.op4.selectedIndex<1){
    alert('You must select something for this product.');
    theFirm.op4.focus();
    return false;
  }
  if(theForm.op5.selectedIndex<1){
    alert('You must select something for this product.');
    theFirm.op5.focus();
    return false;
  }
  return true;
}
0
 
smaccariCommented:
;o)
0
 
muligruberAuthor Commented:
I actually saw that before i tested it.  I must be doing something wrong.  The script is not working on the 2nd and 3rd dropdown.  Everything seems to be ok.  Please checkout http://www.gunslingsdirect.com/vv-pel-rev.html for source.
0
 
smaccariCommented:
Ok i saw another type mistake: replace all theFirm by theForm in the code.
Then, i saw that your form does not include you drop down lists.
Just put the closed tag </form> after all of them.
0
 
muligruberAuthor Commented:
There are three forms basically all like this..  should i just have one form?

                                    <form action="http://www.cartserver.com/sc/cart.cgi" method=POST onSubmit="return checkForm(this)">
                        <p class="bolds">Available in
                                    Several Colors<br><select name=op1 class="select">
                    <option value="You must select a color for this product." selected>Please
                    select color</option>
                    <option value="Black - $158.99">Black</option>
                    <option value="Desert Tan - $158.99">Desert Tan</option>
                    <option value="OD Green - $158.99">OD Green</option>
                  </select></p>
                                    </td>
                          <input type=hidden name="item" value="s-5437^1700^Pelican 1700 35 inch Gun Case^op3^1^^^^20.0^">
                        <td width="42" bgcolor="#DBE9FF" class="ourprice"> <div align="center">$158.99</div></td>
                        <td width="57" nowrap class="descriptions"> <div align="center"><input type=image border=0 name=add4 src="images/order-on.gif" width="57" height="15"></div></td>
                      </tr></form>
0
 
smaccariCommented:
ow oki i did not catch that point ;o)
Anyway, the function has then to be modified, as you want to check only one product not all:

function checkForm(theForm,el){
  if(theForm.elements[el].selectedIndex<1){
    alert('You must select a color for this product.');
    theFirm.el.focus();
    return false;
   }
    return true;
}

and in your forms:
<form action="http://www.cartserver.com/sc/cart.cgi" method=POST onSubmit="return checkForm(this,'op1')">

(i placed here op1, that is to be changed into dd name in each form)
0
 
smaccariCommented:
My turn to make a mistake ;o)

function checkForm(theForm,el){
  if(theForm.elements[el].selectedIndex<1){
    alert('You must select a color for this product.');
    theFirm.elements[el].focus();
    return false;
   }
    return true;
}
0
 
ZvonkoSystems architectCommented:
This is my function:
<script>
function checkSel(theForm){
  if(theForm.Color.selectedIndex<1){
    alert('You must select a color for this product.');
    theForm.Color.focus();
    return false;
  }
  return true;
}
</script>

This is my form tag:
<form action="/sc/cart.cgi" method=POST onSubmit="return checkSel(this)">

And you have to rename all color selects to:  Color
<p class="bolds">Available in Several Colors<br><select name=Color class="select">

0
 
muligruberAuthor Commented:
Thanks for the help i got it now.
0
 
ZvonkoSystems architectCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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