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^">
muligruberAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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;}">

muligruberAuthor Commented:
Thanks for the quick response.  So i would just do this for each of them renaming the "op3" for each.?
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)">

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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?
ZvonkoSystems architectCommented:
Uhps, sorry :)
Change all statements:
    return fasle;

To:
    return false;

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;
}
smaccariCommented:
;o)
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.
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.
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>
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)
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;
}
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">

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
muligruberAuthor Commented:
Thanks for the help i got it now.
ZvonkoSystems architectCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.