• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 467
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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