Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    174
    Thanks
    13
    Thanked 1 Time in 1 Post

    Now to determine if select option is empty

    I'm trying to validate a form select option. If select is ignored, an alert should be displayed. Select id is 'status'.
    Code:
    if($("select#status option").val()===''){alert("Make a selection in the Status field");return false;}
    I tested this and it failed.

    Thanks,

    Andy
    Last edited by 1andyw; 02-07-2011 at 06:41 PM. Reason: Resolved

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    http://api.jquery.com/val/

    Either of these will give you the selected value:

    $('#status option:selected').val();
    $('#status').val();

    What does 'failed' mean?

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    174
    Thanks
    13
    Thanked 1 Time in 1 Post
    I post the related form without selecting any option but it submits anyway.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    What event are you firing your validation code on? Do you receive any error messages? Can you post more of your code?

  • #5
    Regular Coder
    Join Date
    Jul 2006
    Posts
    174
    Thanks
    13
    Thanked 1 Time in 1 Post
    I listed the select#status three times in the jquery, just trying to find one that would pass info. Seems like the variable is just never created so there is no value to hook on to. The text fields work fine. I am not able to determine if the select options are being ignored.

    The form:
    PHP Code:
    <form method="post" action="csmemberchangepost.php" style='background:#cccccc'>
    <select name="m_id">
    <?php showmem();?>(This lists the members in a drop down list. Provides the member id)
    </select>
    <p style='font:16px Arial'><label for "name">Name</label><br><input type="text" size="60" name="name" style='font:16px Arial'></p>
    <p style='font:16px Arial'><label for status>Status</label><br>
    <select size="3" name="status" id="status">
    <option value='Verified' style='font:16px Arial;width:150px;text-align:center'>Verified</option>
    <option value='NonVer' style='font:16px Arial;width:150px;text-align:center'>NonVer</option>
    <option value='New' style='font:16px Arial;width:150px;text-align:center'>New</option>
    </select></p>
    <p style='font:16px Arial'><label for "special">Special Instructions</label><input type='text' size='60' name='special' style='font:16px Arial'></p>
    <p style='text-align:center;margin-top:1em;'><input type="submit" id="submit" value="Update File" style='font: bold 20px Arial'></p>
    </form>
    The jquery:

    Code:
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    $("#submit").click(function(){
    if($("input[name='name']").val() === ''){alert("Name must be entered.");return false;}
    if($("input[name='special']").val()===''){alert("Special entry must be made");return false;}
    if($("select#status option").val()===''){alert("Make a selection in the Status field");return false;}
    if($("#status option:selected").val()==='null'){alert("Make a option:selected in the Status field");return false;}
    if($("select#status option").val()==='null'){alert("Make a status option in the Status field");return false;}
    });
    });
    </script>

  • #6
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Ok, first, some pointers:
    1. Give elements ID's to make them easier to access with JS and CSS
    2. Don't use reserved words, like "name" for naming things
    3. Double quotes are preferable for HTML attributes. Either way, choose one and stick to it.
    4. Inline styles are hard to maintain. Put styles in the <head> and apply them with CSS selectors
    5. Attach form validation code to the form's "submit" handler
    6. ALWAYS VALIDATE YOUR CODE


    With those in mind, here's a reworked version:

    PHP Code:
    <!DOCTYPE HTML>
    <
    html>
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <
    title>Untitled Document</title>

    <
    style type="text/css">
    #f1{
        
    background-color:#cccccc;
    }
    #f1 p, #f1 input{
        
    font:16px Arial;
    }
    #f1 input[type=submit]{
        
    fontbold 20px Arial;
    }
    #f1 label{
        
    display:block;    
    }
    #f1 option{
        
    font:16px Arial;
        
    width:150px;
        
    text-align:center
    }
    .
    submitwrap{
        
    margin-top:1em;
        
    text-align:center;
    }
    </
    style>

    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#f1").submit(function(){
            if($("#txtName").val() === ''){alert("Name must be entered.");return false;}
            if($("#txtSpecial").val() === ''){alert("Special entry must be made");return false;}
            if($("#selStatus").val()=== null){alert("Make a selection in the Status field");return false;}
            return false;
        });
    });

    </script>

    </head>

    <body>

    <form id="f1" method="post" action="csmemberchangepost.php">
    <p>
        <label for="txtName">Name</label>
        <input type="text" size="60" id="txtName" name="txtName"></p>
    <p>
        <label for="selStatus">Status</label>
        <select size="3" name="selStatus" id="selStatus">
            <option value="Verified">Verified</option>
            <option value="NonVer">NonVer</option>
            <option value="New">New</option>
        </select>
    </p>
    <p>
        <label for="txtSpecial">Special Instructions</label>
        <input type="text" size="60" name="txtSpecial" id="txtSpecial">
    </p>

    <div class="submitwrap"><input type="submit" id="submit" value="Update File"></div>

    </form>

    </body>
    </html> 

  • Users who have thanked Spudhead for this post:

    1andyw (02-07-2011)

  • #7
    Regular Coder
    Join Date
    Jul 2006
    Posts
    174
    Thanks
    13
    Thanked 1 Time in 1 Post
    Works perfectly and I can now understand why.
    I have printed this post for reference.
    Thank you on all points.

    Andy


  •  

    Posting Permissions

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