如何在表單中自己定義 $_POST 變量？

Question

我正在嘗試制作一個列表，其中每一行都有提交請求的人的請求類型、名字和姓氏。 此外，每行有兩個按鈕，一個接受或拒絕按鈕。 按下任一按鈕后，我需要使用按下按鈕所在行的 request_id，以便從數據庫中的 requests 表中刪除正確的行。

解決這個問題的正確方法是什么？

以下是我嘗試實現這一目標的方法：

<?php for ($j = 0; $j < count($requests); $j++): ?>
    <tr id=' <?php echo $requests[$j]['request_id'] ?>' class="table-row">
       <?php if ($requests[$j]['request_type'] == '1') {
          $request_type = 'candidate';
          } else {
          $request_type = 'voter';
          } ?>
       <form method="POST" action="../assets/php/accept-requests.inc.php">
          <?php $_POST['request_id'] = $requests[$j]['request_id'];?>
          <td class="school"><?=$request_type?></td>
          <td class="name"><?=$requests[$j]['first_name']?></td>
          <td class="candidates"><?=$requests[$j]['last_name']?></td>
          <td> <button id="acceptReq" name="acceptReq" value="req_accepted" type="submit" class="btn btn-success">Accept</button> </td>
          <td> <button id="denyReq" name="denyReq"value="req_denied" type="submit" class="btn btn-danger">Deny</button> </td>
       </form>
       <!-- TODOTODO make these buttons accept or deny -->
    </tr>
<?php endfor; ?>

Answer 1

我不明白"How can I define a $_POST variable myself in a form?" 因為代碼中出現的內容在處理表單方面沒有任何意義，因為后面引用了兩個按鈕並從數據庫中刪除內容。

如果您在頁面加載時分配 POST 變量（如此處），一旦實際提交表單，它們將不再存在。 代替常規表單、字段和提交模型，可以使用具有正確 ID 的隱藏字段，但多年來常用的方法是使用 AJAX 發送請求。 通過使用 AJAX，用戶體驗通常更加精致。

下面從按鈕中刪除 ID 屬性，不手動分配將不使用的 POST 變量，而是發送帶有 2 個參數的 ajax 請求 - 即ID和type 。 后一個參數可以在 PHP 邏輯中使用，以確定單擊了哪個按鈕，從而確定在服務器上運行哪個邏輯。 這是未經測試的，但給出了一個想法。

<?php for ($j = 0; $j < count($requests); $j++): ?>
    <tr id=' <?php echo $requests[$j]['request_id'] ?>' class="table-row">
        <?php 
            if ($requests[$j]['request_type'] == '1') {
                $request_type = 'candidate';
            } else {
                $request_type = 'voter';
            } 
        ?>
        <!--
        
            Remove the ID attributes from the buttons and use the `event`
            to find the parent Table-Row from which the ID can be retrieved.
            
            Once found the ID can be used in an AJAX request to perform
            whatever tasks are necessary and the callback function then manipulates
            the DOM ... or whatever.
            
        -->
        <td class="school"><?=$request_type?></td>
        <td class="name"><?=$requests[$j]['first_name']?></td>
        <td class="candidates"><?=$requests[$j]['last_name']?></td>
        <td> <button data-type='accept' name="acceptReq" value="req_accepted" type="submit" class="btn btn-success">Accept</button> </td>
        <td> <button data-type='deny' name="denyReq" value="req_denied" type="submit" class="btn btn-danger">Deny</button> </td>
    </tr>
<?php endfor; ?>


</table>

<script>

    let fd=new FormData();

    document.querySelectorAll('button[name="acceptReq"],button[name="denyReq"]').forEach( bttn=>bttn.addEventListener('click',function(e){
        let tr=this.parentNode.closest('tr');
        
        fd.set('id',tr.id);
        fd.set('type',this.dataset.type);
        
        fetch('../assets/php/accept-requests.inc.php',{ method:'post',body:fd })
            .then(r=>r.text())
            .then(text=>{
                //this is the callback
                alert(text)
            })
    }));
</script>

 let fd = new FormData(); document.querySelectorAll('button[name="acceptReq"],button[name="denyReq"]').forEach(bttn => bttn.addEventListener('click', function(e) { let tr = this.parentNode.closest('tr'); fd.set('id', tr.id); fd.set('type', this.dataset.type); fetch('../assets/php/accept-requests.inc.php', { method: 'post', body: fd }) .then(r => r.text()) .then(text => { //this is the callback alert(text) }) .catch(e=>{ console.log('Computer says No! %s',e) }) }));

 *{ transition:ease-in-out all 100ms; font-family:monospace } th{ background:rgba(50,50,100,0.5); color:white; } tr{ margin:0.25rem; } tr:hover td{ background:rgba(0,200,0,0.25); } td, th{ margin:0.25rem; border:1px dotted rgba(0,0,0,0.3); padding:0.45rem } button:hover{ cursor:pointer; } [data-type='accept']:hover{ background:lime } [data-type='deny']:hover{ background:red; color:white; }

 <table> <tr> <th>Assignment</th> <th>Forename</th> <th>Surname</th> <th colspan=2>Vote</th> </tr> <tr id='1' class="table-row"> <td class="school">candidate</td> <td class="name">Geronimo</td> <td class="candidates">Bogtrotter</td> <td> <button data-type='accept' name="acceptReq" value="req_accepted" type="submit" class="btn btn-success">Accept</button> </td> <td> <button data-type='deny' name="denyReq" value="req_denied" type="submit" class="btn btn-danger">Deny</button> </td> </tr> <tr id='2' class="table-row"> <td class="school">candidate</td> <td class="name">Horatio</td> <td class="candidates">Nelson</td> <td> <button data-type='accept' name="acceptReq" value="req_accepted" type="submit" class="btn btn-success">Accept</button> </td> <td> <button data-type='deny' name="denyReq" value="req_denied" type="submit" class="btn btn-danger">Deny</button> </td> </tr> <tr id='3' class="table-row"> <td class="school">voter</td> <td class="name">John</td> <td class="candidates">Smith</td> <td> <button data-type='accept' name="acceptReq" value="req_accepted" type="submit" class="btn btn-success">Accept</button> </td> <td> <button data-type='deny' name="denyReq" value="req_denied" type="submit" class="btn btn-danger">Deny</button> </td> </tr> </table>