Jump to content

Running function if a particular option is chosen


Flic

Recommended Posts

Ok, this should be simple enough but IE says there is a problem with it on the select statement line of the form and I can't see anything wrong which is rather annoying. This is almost working fully now with one item and I'll expand it when its working fully. The jist of what I am trying to do is to bring up an alert box if a particular option is chosen, I will add to this so that it only happens once per page, one step at a time!

<html><head><script type="text/javascript">function open_win(){window.open("../colours/colours.html", "Colours", 'width=300, height=350')}function colourCheck(){var selection = document.add.os0.selectedIndex;if (selection == 5) {alert("You have specified other colours, please check the colour chart and specify colours at checkout. Thank you.")}}}</script></head><body><table width=100% border=0><tr><td width=250><img src="../necklaces/blueFlower.jpg" alt=Blue Flower necklace></td><td>Description will go here</td><td width=200 align=center><p><a href="javascript:open_win()">Colour combinations</a></p><p><b>£9.99</b></p><form name="add" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><p><input type="hidden" name="on0" value="Colour"><select name="os0" onchange="colourCheck()"><option value="Jet and Black Diamond">Black / Grey</option><option value="Capri and Aquamarine">Blue / Light Blue</option><option value="Amethyst and Light Amethyst">Purple / Light Purple</option><option value="Light Siam and FireOpal">Red / Orange</option><option value="Garnet and Light Rose">Dark Red / Pink</option><option value="Other colours (please specify)">Other colours</option></select></p><p><input type="hidden" name="add" value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="email"><input type="hidden" name="item_name" value="Two strand flower necklace"><input type="hidden" name="amount" value="9.99"><input type="hidden" name="no_shipping" value="2"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="lc" value="GB"><input type="hidden" name="bn" value="PP-ShopCartBF"><input type=submit value="Add to basket"></p></td></tr></form></body></html>

Also a quick note, if I have multiple forms on a page can I call them the same thing? It'll be performing the same function and it'll save me duplicating methods for the different forms.Thank you!

Link to comment
Share on other sites

The only problem with the code you pasted above was that you had an extra } in the function, that's why it wouldn't work.To use this on mutilple forms all you have to do it pass the form to the function when you call it, i have highlighted this in red below. That will save you adding new functions etc :)

<html><head><script type="text/javascript">function open_win(){window.open("../colours/colours.html", "Colours", 'width=300, height=350')}function colourCheck([color="red"]myForm[/color]){var selection = [color="red"]myForm[/color].selectedIndex;if (selection == 5) {alert("You have specified other colours, please check the colour chart and specify colours at checkout. Thank you.")}}</script></head><body><table width=100% border=0><tr><td width=250><img src="../necklaces/blueFlower.jpg" alt=Blue Flower necklace></td><td>Description will go here</td><td width=200 align=center><p><a href="java script:open_win()">Colour combinations</a></p><p><b>£9.99</b></p><form name="add" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><p><input type="hidden" name="on0" value="Colour"><select name="os0" onchange="colourCheck([color="red"]this[/color])"><option value="Jet and Black Diamond">Black / Grey</option><option value="Capri and Aquamarine">Blue / Light Blue</option><option value="Amethyst and Light Amethyst">Purple / Light Purple</option><option value="Light Siam and FireOpal">Red / Orange</option><option value="Garnet and Light Rose">Dark Red / Pink</option><option value="Other colours (please specify)">Other colours</option></select></p><p><input type="hidden" name="add" value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="email"><input type="hidden" name="item_name" value="Two strand flower necklace"><input type="hidden" name="amount" value="9.99"><input type="hidden" name="no_shipping" value="2"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="lc" value="GB"><input type="hidden" name="bn" value="PP-ShopCartBF"><input type=submit value="Add to basket"></p></td></tr></form></body></html>

Link to comment
Share on other sites

The only problem with the code you pasted above was that you had an extra } in the function, that's why it wouldn't work.To use this on mutilple forms all you have to do it pass the form to the function when you call it, i have highlighted this in red below.  That will save you adding new functions etc  :) <html><head><script type="text/javascript">function open_win(){window.open("../colours/colours.html", "Colours", 'width=300, height=350')}function colourCheck(myForm){var selection = myForm.selectedIndex;if (selection == 5) {alert("You have specified other colours, please check the colour chart and specify colours at checkout. Thank you.")}}</script></head><body><table width=100% border=0><tr><td width=250><img src="../necklaces/blueFlower.jpg" alt=Blue Flower necklace></td><td>Description will go here</td><td width=200 align=center><p><a href="java script:open_win()">Colour combinations</a></p><p><b>£9.99</b></p><form name="add" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><p><input type="hidden" name="on0" value="Colour"><select name="os0" onchange="colourCheck(this)"><option value="Jet and Black Diamond">Black / Grey</option><option value="Capri and Aquamarine">Blue / Light Blue</option><option value="Amethyst and Light Amethyst">Purple / Light Purple</option><option value="Light Siam and FireOpal">Red / Orange</option><option value="Garnet and Light Rose">Dark Red / Pink</option><option value="Other colours (please specify)">Other colours</option></select></p><p><input type="hidden" name="add" value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="email"><input type="hidden" name="item_name" value="Two strand flower necklace"><input type="hidden" name="amount" value="9.99"><input type="hidden" name="no_shipping" value="2"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="lc" value="GB"><input type="hidden" name="bn" value="PP-ShopCartBF"><input type=submit value="Add to basket"></p></td></tr></form></body></html>

Thank you Scott! I normally check things like closing brackets by doing replace all on them, but I was too tired and just did it visually and of course I didn't see the one at the end of the line as it was off screen!To clarify, by calling the form in the method I can call them all the same thing and it will still work?
Link to comment
Share on other sites

actually, when calling it put this.selectedIndex into the onchange, it's a bit neater.And you can use the function over and over again. :) <select onchange="colourCheck(this.selectedIndex)">i have used 2 <select> menu's so that you can see.

<html><head><script type="text/javascript">function open_win(){window.open("../colours/colours.html", "Colours", 'width=300, height=350')}function colourCheck([color="red"]myForm[/color]){if ([color="red"]myForm[/color] == 5) {alert("You have specified other colours, please check the colour chart and specify colours at checkout. Thank you.")}}</script></head><body><table width=100% border=0><tr><td width=250><img src="../necklaces/blueFlower.jpg" alt=Blue Flower necklace></td><td>Description will go here</td><td width=200 align=center><p><a href="java script:open_win()">Colour combinations</a></p><p><b>£9.99</b></p><form name="add" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"><p><input type="hidden" name="on0" value="Colour"><select onchange="colourCheck([color="red"]this.selectedIndex[/color])"><option value="Jet and Black Diamond">Black / Grey</option><option value="Capri and Aquamarine">Blue / Light Blue</option><option value="Amethyst and Light Amethyst">Purple / Light Purple</option><option value="Light Siam and FireOpal">Red / Orange</option><option value="Garnet and Light Rose">Dark Red / Pink</option><option value="Other colours (please specify)">Other colours</option></select></p><p><select onchange="colourCheck([color="red"]this.selectedIndex[/color])"><option value="Jet and Black Diamond">Black / Grey</option><option value="Capri and Aquamarine">Blue / Light Blue</option><option value="Amethyst and Light Amethyst">Purple / Light Purple</option><option value="Light Siam and FireOpal">Red / Orange</option><option value="Garnet and Light Rose">Dark Red / Pink</option><option value="Other colours (please specify)">Other colours</option></select></p><p><input type="hidden" name="add" value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="email"><input type="hidden" name="item_name" value="Two strand flower necklace"><input type="hidden" name="amount" value="9.99"><input type="hidden" name="no_shipping" value="2"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="lc" value="GB"><input type="hidden" name="bn" value="PP-ShopCartBF"><input type=submit value="Add to basket"></p></td></tr></form></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...