How can I define a $_POST variable myself in a form?

Question

I'm trying to make a list where on each row there is the request type, first name, and last name of the person who submitted the request. Also, there are two buttons for each row, an accept or deny button. After either button is pressed, I need to use the request_id of the row where the button was pressed in order to delete the correct row from the requests table in my database.

What is the correct way to go about this?

Below is how I've tried achieving this:

<?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

I don't understand the "How can I define a $_POST variable myself in a form?" as what appears in the code does not make any sense in terms of processing the form given the later references to the two buttons and deleting content from your db.

If you assign the POST variables at page load ( as here ) they will no longer exist once the form is actually submitted. Instead with a regular form, fields and submit model a hidden field with the correct ID could be used but the commonly used approach for years has been to use AJAX to send the requests. By using AJAX the user experience is generally more refined.

The following removes the ID attributes from the buttons, does not manually assign POST variables which would be unused and instead sends an ajax request with 2 parameters - namely ID and type . The latter parameter can be used within the PHP logic to determine which button was clicked and thus which piece of logic to run at the server. This is untested but gives an idea.

<?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>