when having two submit buttons named submit and nopay, only one is working at a time. I need to disable both buttons after clicking and submitting the form.
<form enctype="multipart/form-data" method="post" action="
<?php echo base_url();?>user/Purchases_ctrl/create_vendor_payment" onsubmit='disableButton()'>
<div class="d-flex content-block mb-2 pt-4 justify-content-center">
<button type="submit" name="submit" value="submit" id="submit" class="btn btn-outline-custom w-30 btn-sm submit-btn mr-3">Submit</button>
<button type="submit" id="nopay" name="nopay" value="nopay" class="btn btn-outline-custom w-30 btn-sm submit-btn">No Vendor Payments Today</button>
</div>
</form>
<script>
function disableButton() {
var submit = document.getElementById('submit');
var nopay = document.getElementById('nopay');
submit.disabled = true;
submit.innerText = 'SUBMITTING';
nopay.disabled = true;
nopay.innerText = 'No Vendor Payments Today';
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Disable button using disabled property</title>
</head>
<body>
<p>Click the button to submit data!</p>
<p>
<input type="submit" value="Submit" id="btClickMe"
onclick="disableButton(); this.disabled = true;" />
<input type="submit" value="submit" onclick="disableButton(); this.disabled=true;" >
</p>
<p id="msg"></p>
</body>
<script>
function disableButton() {
var msg = document.getElementById('msg');
var inputs = document.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "submit") {
inputs[i].disabled = true;
}
}
msg.innerHTML = 'Data submitted and the button disabled ☺';
}
</script>
</html><script>
function disableButton(btn) {
setTimeout( () => {
btn.disabled = true;
btn.style.backgroundColor = '#36aeeb';
btn.style.color = "white";
}) // No need to set a duration for the timeout
}