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

2. <?php
3. if($data_completion != FALSE) { //If lesson already taken, disable submit button. 
4. ?>
5. <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>
6. <?php
7. } else {
8. //If lesson not yet taken, enable submit button.
9. //Decide weather essay or multiple choice button.
11. //Essay button  
12. if($data_lesson['essay'] == 'true') {
13. ?>
14. <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">
15. <div id="btn"></div>
17. <?php
18. }
19. 
    
20. //Multiple choice button
21. if($data_lesson['essay'] == 'false') {
22. ?>
23. <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">
24. <div id="btn"></div>
26. <?php
27. }
28. }
29. ?>

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.

2. <script type="text/javascript">
3. $(function() {
4. /*** Menu begin. ***/
5. var menu_ul = $('.menu > li > ul'),
6.   menu_a  = $('.menu > li > a');
8. //menu_ul.hide();
9. menu_a.click(function(e) {
10. e.preventDefault();
11. if(!$(this).hasClass('active')) {
12. menu_a.removeClass('active');
13. menu_ul.filter(':visible').slideUp('normal');
14. $(this).addClass('active').next().stop(true,true).slideDown('normal');
15. } else {
16. $(this).removeClass('active');
17. $(this).next().stop(true,true).slideUp('normal');
18. } 
19. });
20. /*** Menu end. ***/
22. /*** Tooltip begin. ***/
23. //$("#submit1").click(function(){
24. $( "form" ).submit(function( event ) {
25. if ($("#op1").is(":checked")) {
26. var user_choice = "option1";
27. var correct_choice = document.getElementById('correct_choice').value;
28. var message = document.getElementById('op1').value;
29. 
    
30. if (user_choice == correct_choice) { //Submit form if answer is correct
31. $("input[id='answermc']").val("1");
32. $("#tooltip").hide();
33. return;
34. } else {
35. //$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
36. $("#tooltip").html(message).show();
37. event.preventDefault(); //Prevent submission of form.
38. }
39. event.preventDefault(); //Prevent submission of form.
40. }
41. 
    
42. if ($("#op2").is(":checked")) {
43. var user_choice = "option2";
44. var correct_choice = document.getElementById('correct_choice').value;
45. var message = document.getElementById('op2').value;
46. 
    
47. if (user_choice == correct_choice) { //Submit form if answer is correct
48. $("input[id='answermc']").val("2");
49. $("#tooltip").hide();
50. return;
51. } else {
52. //$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
53. $("#tooltip").html(message).show();
54. event.preventDefault(); //Prevent submission of form.
55. }
56. event.preventDefault(); //Prevent submission of form.
57. }
58. 
    
59. if ($("#op3").is(":checked")) {
60. var user_choice = "option3";
61. var correct_choice = document.getElementById('correct_choice').value;
62. var message = document.getElementById('op3').value;
63. 
    
64. if (user_choice == correct_choice) { //Submit form if answer is correct
65. $("input[id='answermc']").val("3");
66. $("#tooltip").hide();
67. return;
68. } else {
69. //$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
70. $("#tooltip").html(message).show();
71. event.preventDefault(); //Prevent submission of form.
72. }
73. event.preventDefault(); //Prevent submission of form.
74. }
75. 
    
76. if ($("#op4").is(":checked")) {
77. var user_choice = "option4";
78. var correct_choice = document.getElementById('correct_choice').value;
79. var message = document.getElementById('op4').value;
80. 
    
81. if (user_choice == correct_choice) { //Submit form if answer is correct
82. $("input[id='answermc']").val("4");
83. $("#tooltip").hide();
84. return;
85. } else {
86. //$("#tooltip").html("msg: " + (message) + "<br>User: " + (user_choice) + "<br>Correct: " + (correct_choice)).show();
87. $("#tooltip").html(message).show();
88. event.preventDefault(); //Prevent submission of form.
89. }
90. event.preventDefault(); //Prevent submission of form.
91. }
93. //Submit form if essay button is click
94. $( "#buttonessay" ).click(function() {
95. $( "form" )[0].submit();
96. //$( "form" ).submit();
97. //return;
98. });
100. event.preventDefault(); //Prevent submission of form.
101. });
103. //Hide tooltip When outside tooltip is click.
104. $(document).mouseup(function (e)
105. {
106. var container = $("#tooltip");
107. if (!container.is(e.target) // if the target of the click isn't the container...
108. && container.has(e.target).length === 0) // ... nor a descendant of the container
109. {
110. container.hide();
111. }
112. });
113. /*** Tooltip end. ***/                                                       
114. });
115. </script>

What is causing the double click?

Thanks in advance whoever will help me.