Intended function: require user to select an option from the drop down menu. After user clicks submit button, validate if an option is selected. Display error message and not submit the form if user fails to select. Otherwise submit the form.
Problem: After select an option, button has to be clicked twice to submit the form. I have no clue at all..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p{display: none;}
</style>
</head>
<script>
$(function(){
// language as an array
var language=['Arabic','Cantonese','Chinese','English','French','German','Greek','Hebrew','Hindi','Italian','Japanese','Korean','Malay','Polish','Portuguese','Russian','Spanish','Thai','Turkish','Urdu','Vietnamese'];
$('#muyu').append('<option value=0>Select</option>');
//loop through array
for (i in language) //js unique statement for iterate array
{ $('#muyu').append($('<option>',{id:'muyu'+i,val:language[i], html:language[i]})) }
$('form').submit(function(){
alert('I am being called!'); // check if submit event is triggered
if ( $('#muyu').val()==0 ) {$('#muyu_error').show(); } else {$('#muyu_error').hide(); return true;}
return false;
})
})
</script>
<form method="post" action="match.php">
I am
fluent in <select name='muyu' id='muyu'></select>
<p id='muyu_error'>Tell us your native language</p>
<input type="submit" value="Go">
</form>
