Need assistance with Javascript Code - How to disable buttons (5 buttons) after clicking 1 of the four buttons

Question

Good Day,

So I have three pages with the following scripts I would like to disable this button(sign button) along with 4 other buttons eg (add, update, change-status, delete) once the sign button is clicked

Please note the buttons I mentioned before have similar scripts as the sign script below just the actual function that the buttons perform are different for eg the add button would insert a new record, update would update a record etc)

Any assistance would be greatly appreciated.

Script 1 index.php

$(document).on('click','.sign', function(){
    var expenditureid = $(this).attr("id");

    var btn_action = 'sign';
    if(confirm("Are you sure you want to sign this expenditure?"))
    {
        $.ajax({
            url:"expenditure_action.php",
            method:"POST",
            data:{expenditureid:expenditureid, btn_action:btn_action},
            success:function(data)
            {
                $('#alert_action').fadeIn().html('<div class="alert alert-info">'+data+'</div>');
                expendituredataTable.ajax.reload();
            }
        })
    }
    else
    {
        return false;
    }
});

Script 2 action.php

            if($_POST['btn_action'] == 'sign') {
            $signed = "yes";
                $query = "
                UPDATE expenditure
                set checking_officer = :checking_officer,
                modified_by = :modified_by,
                signed = :signed

            WHERE expenditureid = :expenditureid
                ";
                $statement = $connect->prepare($query);
                $statement->execute(
                    array(
                            ':checking_officer'                     =>  $_SESSION["user_id"],
                                    ':modified_by'                      =>  $_SESSION["user_id"],
                            ':signed'                       =>  $signed,
                        ':expenditureid'                        =>  $_POST["expenditureid"]
                    )
                );

Script 3 fetch.php

$sub_array[] = "<button type='button' name='sign' id='".$row['expenditureid']."' class='btn btn-secondary btn-xs sign'>Sign";

$sub_array[] = "<button type='button' name='delete' id='".$row['expenditureid']."' class='btn btn-danger btn-xs delete'>Delete";

Marik Ishtar · Accepted Answer · 2020-07-23 19:35:44Z

1

you can use this function


function disable_buttons (buttons) {
 buttons.each(function(){
   $(this).attr("disabled", "disabled")
 })
}

edited Jul 23, 2020 at 19:35

answered Jun 22, 2020 at 23:14

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ria Over a year ago

Thank you will try it!

Roko C. Buljan · Accepted Answer · 2020-06-22 23:16:00Z

1

$(".sign").on("click", function() {
  const $otherButtons = $(this).closest("tr").find("button");
  $otherButtons.prop({disabled: true});
});

<table>
  <tr>
    <td><button type="button">Update</button></td>
    <td><button type="button" class="sign">Sign</button></td>
    <td><button type="button">Delete</button></td>
    <td><button type="button">Change Status</button></td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jun 22, 2020 at 23:16

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Ria Over a year ago

Thank you..I tried this script However the buttons are re-enabling after the page reloads

Roko C. Buljan Over a year ago

@Ria JS has no state unless you store it in Database or locally on the user machine (i.e: using a Storage API like localStorage). You should - on a subsequent page request know how to handle those disabled states - such should be served by your backend.

Collectives™ on Stack Overflow

Need assistance with Javascript Code - How to disable buttons (5 buttons) after clicking 1 of the four buttons

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related