通過按鈕單擊禁用/啟用按鈕

Question

我在行中顯示 SQL 數據，每行包含“添加到 Zip”按鈕。 啟用每一行的按鈕。 我想在點擊時禁用當前行的按鈕。 我稍后想通過不同 php 文件中的另一個按鈕重新啟用這些禁用的按鈕。 我如何實現這一目標？ 另外，請不要指向 SQL 注入，我已使用登錄詳細信息檢查是否添加了正確的憑據，我只會發布我認為與此問題相關的代碼。

FetchData.php

...
if(mysqli_num_rows($result) > 0)
{
 $output .= '<h4 align = "center">Search Result</h4>';
 $output .= '<div class="table-responsive">
                <table class = "table table bordered">
                   <tr>
                        <th>ID</th>                                 
                    </tr>';
                    
    while($row = mysqli_fetch_array($result))
    {
                
        $output .= '
                <tr>
                    <td>'.$row["ID"].'</td>
                    <td><button type="button" class="btn btn-primary" onclick="addToPdf(\''.$row["ID"].'\', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
                </tr>
            ';
    }
    echo $output;
    
}
...

AddToZip.php

...
...
$sql = "INSERT INTO Zip (ID)
VALUES ('$id')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

header("Refresh: 0");
...
...

編輯：我正在使用 AJAX 顯示從FetchData.php獲取的值

索引.php

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>LiveData</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Live Data Search</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by ID" class="form-control" />
    </div>
    
   </div>

   <br />
   <div id="result"></div>
  </div>
 </body>
</html>


<script>
$(document).ready(function(){
    $('#search_text').keyup(function(){
        var txt = $(this).val();
        if(txt != '')
        {
            $.ajax({
                url:"FetchData.php",
                method: "post",
                data: {search:txt},
                dataType: "text",
                success: function(data)
                {
                    $('#result').html(data);
                }
            });
        }
       });

});

    var addToPdf = function(id, btn) {
    $.get({
        url:"AddToZip.php?id=" + id,
        success: function(data) {
            btn.disabled = true;
            
        }
    });
  };

</script>

...
...

Answer 1

您的 HTML 標記存在幾個問題。 即，您在錨<a>標記內有一個<button>標記，這在技術上是不正確的。 但是，您很可能在按鈕標簽上有一些引導樣式，並且僅使用錨點來執行 AddToZip.php 調用，對嗎？

如果是這種情況，我寧願去掉<a>標簽並在<button>上使用 onclick 方法。 一個例子：

代替

<td><a href="AddToZip.php?id='.$row["ID"].'" target="target"><button  id="pdf" name="AddToZip" action="" class="btn btn-primary"><i class="fa fa-pdf"" aria-hidden="true"> </i>Add to Zip</button></a></td>
<iframe style="display:none;" name="target"></iframe>

和

<td><button id="pdf" name="AddToZip" type="button" class="btn btn-primary" onclick="document.getElementById(\'frame-x\').src=\'AddToZip.php?id='.$row["ID"].'\'; this.disabled = true;"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
<iframe style="display:none;" name="target" id="frame-x"></iframe>

要清楚

這不是一個理想的解決方案，只是實現 OP 尋求幫助的快速解決方案。 對於 OP，我強烈建議使用 Ajax 調用來與后端通信。

我建議查看jQuery 的 AJAX API

OP更新后更新問題

所以現在我看到你正在使用 jQuery AJAX 調用，添加一個 function 到你的腳本部分：

<script>

$(document).ready(function(){
    ...
};


var addToPdf = function(id, btn) {
    $.get({
        url:"AddToZip.php?id=" + id,
        success: function(data) {
            btn.disabled = true;
        }
    });
};
</script>

然后將您的標記更改為此（同時刪除 iframe）：

<td><button type="button" class="btn btn-primary" onclick="addToPdf(\''.$row["ID"].'\', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>

通過按鈕單擊禁用/啟用按鈕

問題描述

1 個解決方案

解決方案1
0 已采納 2020-06-28 13:33:34

要清楚

OP更新后更新問題

通過按鈕單擊禁用/啟用按鈕

問題描述

1 個解決方案

解決方案1 0 已采納 2020-06-28 13:33:34

要清楚

OP更新后更新問題

解決方案1
0 已采納 2020-06-28 13:33:34