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

Question

我正在一个有一些严格规格的网站上工作。 我想知道我想要实现的目标是否可能，如果可以，如何实现。

我有一个页面，显示一个产品列表，每个产品旁边都有一个按钮，称为“ Reserve 。 我从MySQL数据库获取信息。 代码是这样的（不是实际的代码）：

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>';
}

注意那里的iframe 。 我用这个，因为按钮时Reserve被点击，页面不应该被刷新。

reserve.php页面包含以下内容：

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

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

现在，我的实际问题是：是否可以单击该“ Reserve按钮，而不刷新页面，但仍将按钮更改为禁用状态？ 我认为应该从reserve.php中执行禁用操作，从而解决问题标题。

如果没有，请告诉我。 我想要实现的是，当用户向下滚动产品页面并单击Reserve ，我希望该按钮被禁用。 我不介意刷新本身，但是我介意的是，发生刷新时，用户将被发送回页面的开头，并且如果他要保留其他产品，则必须再次向下滚动。

Answer 1

尝试ajax ...这是可能的解决方案，无需刷新页面即可更新db中的值

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

现在考虑下面的javascript函数来触发ajax调用

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')
                    }
                }
            });
         }

现在创建一个PHP文件ajax_reserve.php

并将数据库更新代码放在该文件中

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

让我知道是否需要进一步的帮助