Check option in select menu has been selected

**asurfaceinbetwe** · 12-14-2011, 04:41 PM

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

**JMRKER** · 12-14-2011, 05:19 PM

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>

**johnWebber** · 12-14-2011, 05:24 PM

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(){});

**interfacetricks** · 12-14-2011, 05:30 PM

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

Thread: Check option in select menu has been selected

Thread Tools

Display

Check option in select menu has been selected

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions