I have submit button (bootstrap) where i submit some data from input fields to my PHP query. I have added to this submit button a loading spinner after the button has been clicked by the user. Since i have added the spinner id to the button the HTML attribute for "required" is not longer working. It does not indicate the user a missing information anymore.
Example:
$(document).ready(function() {
$("#load").click(function() {
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
);
$("#save").submit();
});
});<form method="post" action="" id="save">
<input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input>
<button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button>
</form>Perhaps you should listen the submit event instead of click?
$(document).ready(function() {
$("#save").submit(function(e) {
// disable button
$('#load').prop("disabled", true);
// add spinner to button
$('#load').html(
`<i class="spinner-border spinner-border-sm mb-1"></i> Loading`
);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="" id="save">
<input class="input" name="passwort" type="password" placeholder="Enter your password here" required> </input>
<button type="submit" class="btn btn-lg btn-primary" id="load"> Save </button>
</form>