Hi guys,
I have this button below, the problem is I need to double click it before the form will submit.
<?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.
<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.