Check option in select menu has been selected

Printable View

12-14-2011, 04:41 PM
asurfaceinbetwe

Check option in select menu has been selected

Hi,

When a user clicks "Add To Basket" I need some javascript to check that the size option they have selected is not "-" in the form before the actual form is submitted.

My form is like so:

Code:

<form method="post" name="addtobasket" action="?action=add&id=<?php echo $rows['id']; ?>"> <input type="submit" class="addtobasket" name="addtobasket" value="Add To Basket"> <select name="sizechoice"> <option disabled="disabled" value="">-</option> <option disabled="disabled" value="S">S</option> <option disabled="disabled" value="M">M</option> </select> </form>

Any help would be great as I'm a php man and know nothing about javascript :)

Thanks,

Jack
12-14-2011, 05:19 PM
JMRKER

Well, this makes us even ... I know nothing about PHP.

Code:

<!DOC HTML> <html> <head> <title> Untitled </title> <script type="text/javascript"> function checkSizeChoice() { var sel = document.getElementById('sizeChoice').value; if (sel == '') { alert('Size must be chosen'); return false; } else { alert('Size will be: '+sel); return false; } // change this to 'true' after testing // remove one or more of the alerts if desired. } </script> </head> <body> <form method="post" name="addtobasket" action="?action=add&id=<?php echo $rows['id']; ?>" onsubmit="return checkSizeChoice()"> <input type="submit" class="addtobasket" name="addtobasket" value="Add To Basket"> <p>Size: <select id="sizeChoice" name="sizechoice" value=""> <option value="">-</option> <option value="S">S</option> <option value="M">M</option> </select> </form> </body> </html>
12-14-2011, 05:24 PM
johnWebber

I use jquery so I can hardly remember how to use straight up java script but here is what is should look like.

Code:

$('form').submit( function(){ if ( $('select[name="sizechoice"]').val() == '-' ){ return false; } } );

make sure the script runs after the form else do a $(document).ready(function(){});
12-14-2011, 05:30 PM
interfacetricks

Hi, you can get the currently selected list index with "select_element.selectedIndex" or the value with "select_element.value"

Or you can get the text of the select option using:

select_elements.options[select_element.selectedIndex].firstChild.nodeValue;

Assuming the option just contains text.

I put up examples of these three approachs which you test try out here:
http://pagefabricator.com?page=list_items

Click the buttons in the example to show the selected property and display the button's code in another box so you can see its onclick event.

The select element can be accessed as document.forms["addtobasket"].elements["sizechoice"] or by giving it an ID property (see above link for an example of the latter).

Look up "onsubmit" to find out how to cancel a form submission when necesssary (from memory I think you just return false).

http://www.htmlcodetutorial.com/form..._onSubmit.html