Hi guys,

I have this button below, the problem is I need to double click it before the form will submit.

Code:
<?php
	if($data_completion != FALSE) { //If lesson already taken, disable submit button. 
		?>
		<input type="image" name="submitlesson" alt="Submit Lesson" src="<?php echo base_url('images/buttoncomplete1.jpg'); ?>" onmouseover="this.src='<?php echo base_url('images/buttoncomplete2.jpg'); ?>'" onmouseout="this.src='<?php echo base_url('images/buttoncomplete1.jpg'); ?>'" value="submit" disabled>
		<?php										
	} else {
		//If lesson not yet taken, enable submit button.
		//Decide weather essay or multiple choice button.
		
		//Essay button  
		if($data_lesson['essay'] == 'true') {
			?>
			<input type="image" id="buttonessay" name="submitlesson" alt="Submit Lesson" src="<?php echo base_url('images/buttoncomplete1.jpg'); ?>" onmouseover="this.src='<?php echo base_url('images/buttoncomplete2.jpg'); ?>'" onmouseout="this.src='<?php echo base_url('images/buttoncomplete1.jpg'); ?>'" value="submit">
			<div id="btn"></div>
			
			<?php
		}

		//Multiple choice button
		if($data_lesson['essay'] == 'false') {
			?>
			<input type="image" id="buttonmc" name="submitlesson" alt="Submit Lesson" src="<?php echo base_url('images/buttoncomplete1.jpg'); ?>" onmouseover="this.src='<?php echo base_url('images/buttoncomplete2.jpg'); ?>'" onmouseout="this.src='<?php echo base_url('images/buttoncomplete1.jpg'); ?>'" value="submit">
			<div id="btn"></div>
			
			<?php
		}
	}
?>
As you can see I have three buttons base from the above codes.
The double click happens on the id="buttonessay" button.



Below are the jQuery Codes.
Code:
<script type="text/javascript">
	$(function() {
		/*** Menu begin. ***/
		var menu_ul = $('.menu > li > ul'),
			   menu_a  = $('.menu > li > a');
		
		//menu_ul.hide();
		menu_a.click(function(e) {
			 e.preventDefault();
			if(!$(this).hasClass('active')) {
				menu_a.removeClass('active');
				menu_ul.filter(':visible').slideUp('normal');
				$(this).addClass('active').next().stop(true,true).slideDown('normal');
			} else {
				$(this).removeClass('active');
				$(this).next().stop(true,true).slideUp('normal');
			} 
		});
		/*** Menu end. ***/
	
		/*** Tooltip begin. ***/
		//$("#submit1").click(function(){
		$( "form" ).submit(function( event ) {
			if ($("#op1").is(":checked")) {
				var user_choice 	= "option1";
				var correct_choice 	= document.getElementById('correct_choice').value;
				var message 		= document.getElementById('op1').value;

				if (user_choice == correct_choice) { //Submit form if answer is correct
					$("input[id='answermc']").val("1");
					$("#tooltip").hide();
					return;
				} else {
					//$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
					$("#tooltip").html(message).show();
					event.preventDefault(); //Prevent submission of form.
				}
				event.preventDefault(); //Prevent submission of form.
			}

			if ($("#op2").is(":checked")) {
				var user_choice 	= "option2";
				var correct_choice 	= document.getElementById('correct_choice').value;
				var message 		= document.getElementById('op2').value;

				if (user_choice == correct_choice) { //Submit form if answer is correct
					$("input[id='answermc']").val("2");
					$("#tooltip").hide();
					return;
				} else {
					//$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
					$("#tooltip").html(message).show();
					event.preventDefault(); //Prevent submission of form.
				}
				event.preventDefault(); //Prevent submission of form.
			}

			if ($("#op3").is(":checked")) {
				var user_choice 	= "option3";
				var correct_choice 	= document.getElementById('correct_choice').value;
				var message 		= document.getElementById('op3').value;

				if (user_choice == correct_choice) { //Submit form if answer is correct
					$("input[id='answermc']").val("3");
					$("#tooltip").hide();
					return;
				} else {
					//$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
					$("#tooltip").html(message).show();
					event.preventDefault(); //Prevent submission of form.
				}
				event.preventDefault(); //Prevent submission of form.
			}

			if ($("#op4").is(":checked")) {
				var user_choice 	= "option4";
				var correct_choice 	= document.getElementById('correct_choice').value;
				var message 		= document.getElementById('op4').value;

				if (user_choice == correct_choice) { //Submit form if answer is correct
					$("input[id='answermc']").val("4");
					$("#tooltip").hide();
					return;
				} else {
					//$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();					
					$("#tooltip").html(message).show();
					event.preventDefault(); //Prevent submission of form.
				}
				event.preventDefault(); //Prevent submission of form.
			}
			
			//Submit form if essay button is click
			$( "#buttonessay" ).click(function() {
				$( "form" )[0].submit();
				//$( "form" ).submit();
				//return;
			});
			
			event.preventDefault(); //Prevent submission of form.
		});
		
		//Hide tooltip When outside tooltip is click.		
		$(document).mouseup(function (e)
		{
			var container = $("#tooltip");
			if (!container.is(e.target) // if the target of the click isn't the container...
				&& container.has(e.target).length === 0) // ... nor a descendant of the container
			{
				container.hide();
			}
		});			
		/*** Tooltip end. ***/                                                       
	});
</script>

What is causing the double click?


Thanks in advance whoever will help me.