Javascript drop down menu form validating
Posted: Sun Oct 17, 2010 10:07 am
hi
im new to scripting so apologies if this is a basic question.
I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu.
This is the code for my drop down:
<select name="department" size="1" id="department">
<option value="" selected>Please select</option>
<option value="1">Personal Injury</option>
<option value="2">ULR & Credit Hire</option>
<option value="3">Consumer Credit</option>
<option value="4">Health & Safety</option>
<option value="5">Property</option>
</select>
And this is the code currently for the Javascript validating: (ive bolded the code in question)
<script type='text/javascript'>
$(document).ready(function(){
$('#submit_comment').click(function(e){
e.preventDefault();
var error = false;
var title = $('#title').val();
var name = $('#name').val();
var address = $('#address').val();
var email = $('#email').val();
var telephone = $('#telephone').val();
var department = $('#department').val();
var comment = $('#comment').val();
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
}else{
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
}else{
$('#email_error').fadeOut(500);
}
if(department.selectedIndex == 0){
error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
}
if(comment.length == 0){
var error = true;
$('#comment_error').fadeIn(500);
}else{
$('#comment_error').fadeOut(500);
}
if(error == false){
$('#submit_comment').attr({'disabled' : 'true', 'value' : 'Sent' });
$.post("send_email.php", $("#contact_form").serialize(),function(result){
if(result == 'sent'){
$('#mail_success').fadeIn(500);
}else{
$('#mail_fail').fadeIn(500);
$('#submit_comment').removeAttr('disabled').attr('value', 'Error');
}
});
}
});
});
</script>
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript?
Any help very much appreciated
Thanks
im new to scripting so apologies if this is a basic question.
I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu.
This is the code for my drop down:
<select name="department" size="1" id="department">
<option value="" selected>Please select</option>
<option value="1">Personal Injury</option>
<option value="2">ULR & Credit Hire</option>
<option value="3">Consumer Credit</option>
<option value="4">Health & Safety</option>
<option value="5">Property</option>
</select>
And this is the code currently for the Javascript validating: (ive bolded the code in question)
<script type='text/javascript'>
$(document).ready(function(){
$('#submit_comment').click(function(e){
e.preventDefault();
var error = false;
var title = $('#title').val();
var name = $('#name').val();
var address = $('#address').val();
var email = $('#email').val();
var telephone = $('#telephone').val();
var department = $('#department').val();
var comment = $('#comment').val();
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
}else{
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
}else{
$('#email_error').fadeOut(500);
}
if(department.selectedIndex == 0){
error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
}
if(comment.length == 0){
var error = true;
$('#comment_error').fadeIn(500);
}else{
$('#comment_error').fadeOut(500);
}
if(error == false){
$('#submit_comment').attr({'disabled' : 'true', 'value' : 'Sent' });
$.post("send_email.php", $("#contact_form").serialize(),function(result){
if(result == 'sent'){
$('#mail_success').fadeIn(500);
}else{
$('#mail_fail').fadeIn(500);
$('#submit_comment').removeAttr('disabled').attr('value', 'Error');
}
});
}
});
});
</script>
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript?
Any help very much appreciated
Thanks