如何从另一个页面更改按钮的状态？

Question

I'm working on a site that has some strict specifications. I'm interested to know if what I'm trying to achieve is possible and if yes, how.

I have a page displaying a list of products and a button next to each one called Reserve . I get the information from a MySQL database. The code is something like this (it's not the actual code):

while($obj = $results->fetch_object()) {
    echo '<div class="product">'; 
    echo '<iframe name="votar" style="display:none;"></iframe>';
    echo '<form method="post" action="reserve.php" target="votar">';
    echo $obj->description.' <button class="reserve" >Reserve</button>';
    echo '<input type="hidden" name="barcode" value="'.$obj->bar_code.'"/>';
    echo '</form>';
    echo '</div>';
}

Notice the iframe there. I use this because when the button Reserve is clicked, the page is not supposed to be refreshed.

The reserve.php page contains the following:

if (isset($_POST["barcode"])) {
    $barcode = filter_var($_POST["barcode"], FILTER_SANITIZE_STRING);

    $results = $mysqli->query("UPDATE devices 
                              SET status='reserved' 
                              WHERE bar_code=".$barcode);
}

Now, the actual question that I have is: Is it possible to click that Reserve button, not refresh the page, but still change the button to the disabled state? I figured that the disabling action should be done from the reserve.php hence the question title.

If not, please advise me. What I'm trying to achieve is, when a user scrolls down the product page and clicks Reserve , I want the button to become disabled. I wouldn't mind the refresh per se, but what I mind is that when the refresh happens, the user is sent back to the beginning of the page and has to scroll down again if he wants to reserve another product.

Answer 1

Try ajax ... it is the possible solution to update the value in db without refreshing the page

<input type='button' name='reserve' onclick='return doReserve(your_primary_key)' value='reserve' />

Now consider below javascript function to fire an ajax call

function doReserve(id)
    var data= {id: id};
            $.ajax({
                url: "ajax_reserve.php",
                data: data,
                type: "GET",
                success: function(html) {
                     if(html=='ok')
                    {
                         $('#reserve').prop('disabled', true);
                    }
                    else
                    {
                      alert('There was some error')
                    }
                }
            });
         }

and now create a php file ajax_reserve.php

and put your database update code there in that file

$update= 'your update check variable i.e true or false';
if($update)
{
    echo 'ok';
}
else
{
    echo 'error';
}

let me know if any further help needed