How can I send SQL variable from a HTML table to JS popup and then to PHP variable without jquery?

Question

I'm trying to make software that creates a job board where you can add jobs and maintenance guys can check them off as they go. My problem is getting the request_ID of my table to my SQL query at the bottom in deleteData(). I've tried so much, any tips will be a lot of help.

I have to be making this hard than it needs to be. Im literally just trying to click a button, pop up a form, ask if the user has completed the job, then remove it from the table.

<!DOCTYPE html>
<html>
<head>
<script>
function complete() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

 
</script>
<link rel="stylesheet" href="styles.css">
<title>KCHC Work Orders</title>
</head>
<?php
        $host = "localhost";
        $user= "";
        $password = "";
        $database="workorders";
        $DBConnect = @new mysqli($host,$user,$password,$database);
        if ($DBConnect->connect_error)
        echo "The database server is not available at the moment. " .
        "Connect Error is " . $DBConnect->connect_errno .
        " " . $DBConnect->connect_error . ".";
        else{
        echo "Connection made";
        }
    ?>

<header>
    <div class="menu">
        <nav>
            <a href="orderform.php">Create a Request</a>
        </nav>
    </div>
</header>

<body>
    <?php
    $sql = "SELECT request_id, name, date, location, description FROM requests";
    $stmt = $DBConnect->query($sql);
    
    if ($stmt->num_rows > 0) {
        echo '<div class="request_box">';
        echo '<table id="myTable" ><tr><th>ID</th> <th>Name</th> <th>Date</th> <th>Location</th> <th>Description</th> <th>Complete?</th> </tr>';
    while (($Row = $stmt->fetch_assoc()))
    {
    echo "<tr id=";
    echo $Row['request_id'] . ">";
    echo "<th>" . $Row['request_id'] . "</th> <th>" . $Row['name'] . "</th> <th>" . $Row['date'] . "</th> <th>" . $Row['location'] . "</th> <th>" . $Row['description'] . "</th> <th>" . '<input type="button" onclick="complete()" value="' . $Row["request_id"]. '" />' . "</th></tr>";
    }
    echo "</table> </div>";
    
    }
    else{
        echo '<div class="request_error">';
        echo "<p> There are no jobs to complete!</p> <br>";
        echo "<p> If you think there should be, please contact Matt or his genius son</p>";
        echo '</div>';
    }
    
    function sendit($i){
        $newId = $i;
    }
?>
`
<div class="popup" id="myForm" >
  <form id="formReal" method="post">
    <h1>Would you like to remove this job? </h1>
    <input type="submit" class="btn" onclick="" submit="<?php deleteData() ?>" value="Remove from List" />
    <button type="button" class="btnCancel" onclick="closeForm()">Cancel</button>
  </form>
</div>
</body>

<?php
function deleteData(){
    global $DBConnect;
    $id_new = $newId;
    $sql = "DELETE FROM requests WHERE request_id = 3";
    $stmt = $DBConnect->query($sql);
    } 
?>

`onclick="" submit=""` looks decidedly wrong. Use addEventListener and preventDefault on the form submit event - `fetch` using post for example — mplungjan, Aug 24 '21 at 17:53
Welcome to Stack Overflow. There is simply a LOT to unpack here. This is is not consider the "best practice" when it comes to HTML, PHP, and JavaScript. It might help to post a copy of the resulting HTML as well as the PHP. This way you can see what JavaScript is working with. Please also review: Minimal, Reproducible Example: https://stackoverflow.com/help/minimal-reproducible-example — Twisty, Aug 24 '21 at 18:17
If you don't want to use jQuery why'd you add the tag to your question? — j08691, Aug 24 '21 at 20:10
@j08691 The tag was probably auto-added by the system because the question text contains "jquery", and the OP, being new here, probably did not notice and/or edit the tags. I submitted an edit to remove the tag. — cazort, Aug 24 '21 at 20:40

score 0 · Answer 1 · answered Aug 24 '21 at 20:57

You cannot put PHP code inside a javascript event and have it work the way you are intending it to in your code. PHP code is run on the server before the page is sent to the user. PHP can be used to generate javascript code, but PHP cannot be called in-page by javascript. Javascript is run in the browser. If you want javascript code to trigger PHP code, you need to have javascript initiate an HTTP(S) request to a separate PHP script. This can be done either by sending the browser to a new page for that script, or by using AJAX to initiate a background call to that script while keeping the user on the same page. It seems like this latter option is what you are intending.

So what you want here to do this gracefully is the AJAX programming method, which is a whole paradigm of programming that is quite involved; there's no way we could possibly teach you in a single answer. The basic idea is that, in javascript, you need to initiate a request, and then you need event-handling code to listen for the response, do error handling, and then update the HTML on-page to reflect whatever response you got from the script you called.

Then in the PHP script that got called, you put the SQL query to actually delete the appropriate row in the table in the database.

If you look up some basic AJAX tutorials and you feel like you're in over your head, you might want to rethink a simpler way of doing this that is perhaps a bit clunkier or old-fashioned ("Web 1.0") to the user.

You can achieve what you want easily via HTML forms, use a form with action="/path/to/some_script.php" and then send the user to a new page, sending POST variables which are read by the PHP script. And then that page can just redirect back to the original page, displaying a refreshed version of the page after deleting the item. The tradeoff here is that the programming is much easier and less error-prone, and debugging is easier, but you need to send the user around to different pages. So you get less work, but a more clunky user experience.

It's your choice. If I were in your position, and I need to meet a nearby deadline, I would probably put up a quick solution using HTML forms, but I'd start learning AJAX, which is going to take months for you to do well. Then come back and put up a slick AJAX solution when you're ready.

How can I send SQL variable from a HTML table to JS popup and then to PHP variable without jquery?

1 Answers1