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>
