html table inside form and the buttons ARE NOT working

Viewed 129

Before i place this question i searched other similar problems like mine with tables and forms but i didn't manage to find solution. As you can see from my code i don't know why but this is not working.. I have a form and inside there is one form method='post'.. when i click the button Descending or Ascending nothing is happening and i don't know why ? any suggestions?

<form method="post">
<table class="table table-bordered table-striped">
    <thead>
    <tr>

        <th scope='col'>Id</th>
        <th scope='col'>Name
                            <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Sort by
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <button name="nameDescending" type="submit" class="dropdown-item btn btn-info">Descending</button>
                <button name="nameAscending" type="submit" class="dropdown-item btn btn-info">Ascending</button>
            </div>
        </th><!-- ORDER BY "name" -->

        <th scope='col'>Last</th><!-- ORDER BY "lastname" -->
        <th scope='col'>Email</th><!-- ORDER BY "email" -->
        <th scope='col'>Telephone</th><!-- ORDER BY "telephone" -->
    </tr>


    </thead>
    <tbody>


    <?php
   

    if(isset($_POST['nameDescending'])){
        $sql = "SELECT * FROM cust_information ORDER BY name DESC";
    }

    if(isset($_POST['nameAscending'])){
        $sql .= "SELECT * FROM cust_information ORDER BY name ASC";
    }

    $result = mysqli_query($conn,$sql);
    $rowCount = mysqli_num_rows($result);

    if($rowCount > 0){
        while($row = mysqli_fetch_assoc($result)){
            echo "<tr>
                          <td scope='row'>{$row['auto_id']}</td>    <!--difference between class='row' / scope='row'-->
                          <td>{$row['name']}</td>
                          <td>{$row['lastname']}</td>
                          <td>{$row['email']}</td>
                          <td>{$row['telephone']}</td>
                  </tr> ";
        }
    } else{
        echo "<tr> <td colspan='5'>Nothing was found!</td> </tr> ";
    }
    ?>
    </tbody>
</table>

</form>
2 Answers

I can't see anything wrong with your code that would prevent a form submission. But, I can see lots wrong with your coding style. It's a quiet day at work, so...

The biggest sin here is mixing PHP and HTML as much as you have. Always put as much code as you can at the top of file, separate from your HTML. (In a proper codebase these would be separate files, but I assume this is a learning exercise for you and not a professional project.) For database-driven pages like this, that means doing the query and gathering data into an array right away, so the only thing that comes into your HTML is some simple control structures and echos.

Using alternative syntax for control structures allows single line PHP intrusion into the HTML, no need for braces and certainly no echoing giant blocks of HTML where you have to worry about getting quotes right. Short echo tags make things cleaner as well. (For those rare instance where you absolutely have to echo a bunch of HTML, use a heredoc.)

According to convention, and RFCs, a POST request should implement some change on the server, such as storing or updating a record. Since that isn't the case here, you should really be using GET requests. As a bonus, this gets rid of your need for a form; the <button> elements are replaced with simple links. Looks like you're using Bootstrap so the styling makes them look identical.

Put that together and this is your code:

<?php
$sql = "SELECT * FROM cust_information ORDER BY name";

// default to empty string
$sort = $_GET["sort"] ?? "";

if($sort === "d") {
     $sql .= " DESC";
}

$result = $conn->query($sql);
// store the whole result into an associative array
$data = $result->fetch_all(MYSQLI_ASSOC);
?>

<table class="table table-bordered table-striped">
    <thead>
    <tr>

        <th scope='col'>Id</th>
        <th scope='col'>Name
            <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Sort by
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a href="?sort=d" class="dropdown-item btn btn-info">Descending</button>
                <a href="?sort=a" class="dropdown-item btn btn-info">Ascending</button>
            </div>
        </th><!-- ORDER BY "name" -->

        <th scope='col'>Last</th><!-- ORDER BY "lastname" -->
        <th scope='col'>Email</th><!-- ORDER BY "email" -->
        <th scope='col'>Telephone</th><!-- ORDER BY "telephone" -->
    </tr>


    </thead>
    <tbody>


    <?php if (count($data) === 0): ?>
        <tr> <td colspan='5'>Nothing was found!</td> </tr>
    <?php else: ?>
        <?php foreach ($data as $row): ?>
        <tr>
            <td scope='row'><?= $row['auto_id'] ?></td>    <!--difference between class='row' / scope='row'-->
            <td><?= $row['name'] ?></td>
            <td><?= $row['lastname'] ?></td>
            <td><?= $row['email'] ?></td>
            <td><?= $row['telephone'] ?></td>
        </tr>
        <?php endforeach ?>
    <?php endif ?>
    </tbody>
</table>

I usually don't use form inside a table beacuse it will not work. If i want to redirect me somewhere I use the a tag.

Example:

    @foreach($data as $card)
        <tr style="text-align: center;">
            <td>{{ $card -> id }}</td>
            <td>{{ $card -> cardType }}</td>
            <td>{{ $card -> cardValue }} RON</td>
            <td>{{ $card -> createdBy }}</td>
            <td>{{ $card -> created_at }}</td>
            <td>
                <form action="to somewhere">
                    <button type="submit">Submit</button>                       
                </form>
            </td>
    @endforeach

Instead of this, use this :

   @foreach($data as $card)
        <tr style="text-align: center;">
            <td>{{ $card -> id }}</td>
            <td>{{ $card -> cardType }}</td>
            <td>{{ $card -> cardValue }} RON</td>
            <td>{{ $card -> createdBy }}</td>
            <td>{{ $card -> created_at }}</td>
            <td>
                <a class="icon pencil-lg-icon" href="{{ route ( 'admin.catalog.giftcards.edit', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
                <a class="icon trash-icon" href="{{ route ( 'admin.catalog.giftcards.delete', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
            </td>
    @endforeach

Or you can try this

 @foreach($data as $card)

    // Outside the table
    <form action="to somewhere" id="idform"></form>

    <tr style="text-align: center;">
        <td>{{ $card -> id }}</td>
        <td>{{ $card -> cardType }}</td>
        <td>{{ $card -> cardValue }} RON</td>
        <td>{{ $card -> createdBy }}</td>
        <td>{{ $card -> created_at }}</td>
        <td>
            <button type="submit" form="idform">Submit</button>         
        </td>
@endforeach

I hope i helped you.

Related