Disable button after clicked PHP

Question

How can I disable a button after it has been clicked. And let it remain disabled. I tried using .prop('disabled', true); although it disables the button, however when i refresh the page then button became clickable again. Also if I have a list of it, it would disable other button as well which I do not want. Is there anyway to do it?

<table>
<tr>
<td id="milestone_1"> 
</td>
<td id="percentage_1">
</td>
<td>
<form id="pay1">
<input type="hidden" class="id_hidden" name="id_hidden">
<input type="hidden" class="paid_hidden" name="paid_hidden">
<input type="hidden" class="budget_hidden" name="budget">
<input type="hidden" id="percent1" name="percent">
<input type="submit" name="pay1" value="Pay">
</form>
</td>
</tr>

<tr>
<td id="milestone_2">
</td>
<td id="percentage_2">
</td>
<td>
<form id="pay2">
<input type="hidden" class="id_hidden" name="id_hidden">
<input type="hidden" class="paid_hidden" name="paid_hidden">
<input type="hidden" class="budget_hidden" name="budget">
<input type="hidden" id="percent2" name="percent">
<input type="submit" name="pay2" value="Pay">
</form>
</td>
</tr>

<tr>
<td id="milestone_3">
</td>
<td id="percentage_3">
</td>
<td>
<form id="pay3">
<input type="hidden" class="id_hidden" name="id_hidden">
<input type="hidden" class="paid_hidden" name="paid_hidden">
<input type="hidden" class="budget_hidden" name="budget">
<input type="hidden" id="percent3" name="percent">
<input type="submit" name="pay3" value="Pay">
</form>
</td>
</tr>

</table>


$("#pay1").submit(function(){
    $.ajax({
        type: "GET",
        url: "pay.php",
        data: $("#pay1").serialize(),
        success: function(data){

            $("#add_success").html(data);
            $("#add_err").html("");

        }
    });
    return false
});
$("#pay2").submit(function(){
    $.ajax({
        type: "GET",
        url: "pay.php",
        data: $("#pay2").serialize(),
        success: function(data){

            $("#add_success").html(data);
            $("#add_err").html("");

        }
    });
    return false
});
$("#pay3").submit(function(){
    $.ajax({
        type: "GET",
        url: "pay.php",
        data: $("#pay3").serialize(),
        success: function(data){

            $("#add_success").html(data);
            $("#add_err").html("");

        }
    });
    return false
});

JS works only for current page elements. You should disable buttons on server side. So page loads with disabled items static. and effecting other buttons may because of same identifiers (id, name, class, ...) so jQuery finds more than one elements. — AHHP
– AHHP, Commented Aug 3, 2014 at 9:38

Mohamad Ali · Accepted Answer · 2014-08-03 10:13:53Z

2

I suggest to you use cookie to keep user state or data.
simply you can use cookie in pure javascript by document.cookie object,

javascript create cookie sample code:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

read cookie:

var x = document.cookie;

also you can use this jQuery plugin for handle that

cookie are very handy in PHP, so you can access cookie data by $_COOKIE global php variable.
Personally i recommend you to keep tag selector in javascript variable and disable them on dom ready for other later requests.

UPDATE

For more secure implementation you can use server-side solutions, for this case you can use PHP session to keep data for showing or not showing elements to user.

edited Aug 3, 2014 at 10:13

answered Aug 3, 2014 at 9:43

Mohamad Ali

4251 gold badge6 silver badges16 bronze badges

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

1 Comment

lch Over a year ago

As is like a payment stuff, once that section is paid it will no longer be payable. So I dun think cookie will work in my situation here

Collectives™ on Stack Overflow

Disable button after clicked PHP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related