Resolved Now to determine if select option is empty

1andyw · 02-07-2011, 09:45 AM

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

Spudhead · 02-07-2011, 11:23 AM

http://api.jquery.com/val/

Either of these will give you the selected value:

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

What does 'failed' mean?

1andyw · 02-07-2011, 02:40 PM

I post the related form without selecting any option but it submits anyway.

Spudhead · 02-07-2011, 04:17 PM

What event are you firing your validation code on? Do you receive any error messages? Can you post more of your code?

1andyw · 02-07-2011, 05:34 PM

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>

Spudhead · 02-07-2011, 06:19 PM

Ok, first, some pointers:

Give elements ID's to make them easier to access with JS and CSS
Don't use reserved words, like "name" for naming things
Double quotes are preferable for HTML attributes. Either way, choose one and stick to it.
Inline styles are hard to maintain. Put styles in the <head> and apply them with CSS selectors
Attach form validation code to the form's "submit" handler
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]{

    font: bold 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>

1andyw · 02-07-2011, 06:40 PM

Works perfectly and I can now understand why.
I have printed this post for reference.
Thank you on all points.

Andy