IE submit the forms twice

Question

I have this problem in IE, sometimes my form is submitting twice. I know the issue of clicking the button twice and that is not the problem. But on my case I only click it once. I checked my records in the database and there are two records.

<input type="button" value="Approve" name="btn_approve" id="btn_approve">
<input type="button" value="Reject"  name="btn_reject" id="btn_reject">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script> 
<script>
$(document).ready(function () {
    $("#btn_approve").click(function () {
        // some validation before submitting the form

        $("#my_form").submit();
    });
});
</script>

Answer 1

Prevent the default behaviour of the button:

<input type="button" value="Approve" name="btn_approve" id="btn_approve">
<input type="button" value="Reject"  name="btn_reject" id="btn_reject">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script> 
<script>
$(document).ready(function () {
    $("#btn_approve").click(function (e) {
        e.preventDefault();
        // some validation before submitting the form

        $("#my_form").submit();
    });
});
</script>

Answer 2

Assuming that #btn_approve is actually a submit button inside of #my_form, you are triggering the form submission via .submit and the browser is also submitting it normally. Change to:

$("#btn_approve").on('click', function (e) {
   $("#my_form").trigger('submit');

   e.preventDefault();
});