www.webdeveloper.com
Results 1 to 4 of 4

Thread: Check option in select menu has been selected

  1. #1
    Join Date
    Dec 2011
    Posts
    4

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414

    Lightbulb

    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>

  3. #3
    Join Date
    Dec 2011
    Location
    Lethbridge
    Posts
    34
    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(){});

  4. #4
    Join Date
    Nov 2010
    Posts
    86
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles