'Disable 2 submit buttons in single form after clicking button

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>
javascriptphphtml


Solution 1:[1]

<!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 &#9786;';
    }
</script>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 danilopopeye

Related Questions