After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, while Chrome and IE block it.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$(function(){
$("#btn").on("click",function(){
$(this).prop('disabled','true');
alert('clicked');
});
$("#frm").on("submit",function(){
alert("submit1");
});
$("#frm").on("submit",function(){
alert("submit2");
});
})
</script>
</head>
<body>
<form id="frm" action="#">
<input type='submit' id="btn"/>
</form>
</body>
It's puzzling that the submit action is being prevented when the button is disabled. What could be causing this strange behavior? In Chrome and IE, the sequence of events is triggering the click first and then immediately closing the script.
Why isn't it following the expected order of execution: clicking the button first, followed by submitting the form?