0

I have a 'dynamic' table where someone can change info about a person. When clicking on 'update' the cell should change to an input field. This works, but somehow the input field jumps out of the table and sits above it.

This is part of the function that shows the table:

 echo '<tr>';
        echo '<td><b>' . ucfirst(htmlspecialchars($data)) . '</b></td>'; 
        if($url_param_index[1] == $info) // Checks if second url-parameter is same as $info on row that is clicked on and changes cell to form input field
        {       
            echo '<form action="update.php method="POST"';                  
            echo '<td><input type="text" name="' . $data . '" value="' . $info . '"></td>';
            echo '<input type="hidden" name="lidnummer" value="' . $gegevens_lid['lidnummer'] . '">';
            echo '<td><button type="submit">Save</button></td>';
            echo '<td>----</td>';
            echo '</form>';
        }
        else
        {
            if($data == 'lidnummer' || $data == 'adres' || $data == 'woonplaats')
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td> ---- </td>';
                echo '<td> ---- </td>';
                
            } 
            else
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td><a href="lid.php?lidnummer=' . $gegevens_lid['lidnummer'] . '&' . $data . '=' . $info . '">Update</td>';
                echo '<td> ---- </td>';
            }            
        }
        echo '</tr>';

This is the page where the function gets called to show the table:

<div>
    <h3>Lid:</h3>
    <table>
        <tbody>
            <tr>
                <th>#</th>
                <th>Info</th>
                <th>Pas aan</th>
                <th>Delete</th>
            </tr>
            <?php show_single_lid($conn, $lidnummer); ?>          
        </tbody>
    </table>
</div>

Before clicking update Before clicking update

After clicking update After clicking update

The input field should stay in the table at the same row/column, but it jumps out and the rest slides one over...

Xavvey
  • 43
  • 5

2 Answers2

0

form is not permitted inside table or tr tags. So your form should encompas whole table or be in a single cell.

For example (note the form is inside single cell):

echo '<td><form action="update.php" method="POST">';                  
echo '<input type="text" name="' . $data . '" value="' . $info . '">';
echo '<input type="hidden" name="lidnummer" value="' . $gegevens_lid['lidnummer'] . '"><button type="submit">Save</button></form></td>';
echo '<td></td>';
echo '<td>----</td>';

See also https://stackoverflow.com/a/5967613/13891891

Kazimierz Niewielki
  • 405
  • 3
  • 5
  • Well, here the 'save' button jumps to the cell containing the input field and in the 'solution' above it does not but still works. Why should I go for this? – Xavvey Nov 16 '21 at 14:04
-1

Try changing your PHP code to this.

 echo '<tr>';
        echo '<td><b>' . ucfirst(htmlspecialchars($data)) . '</b></td>'; 
        if($url_param_index[1] == $info) // Checks if second url-parameter is same as $info on row that is clicked on and changes cell to form input field
        {       
            echo '<td><form action="update.php method="POST"';                  
            echo '<td><input type="text" name="' . $data . '" value="' . $info . '"></td>';
            echo '<input type="hidden" name="lidnummer" value="' . $gegevens_lid['lidnummer'] . '">';
            echo '<td><button type="submit">Save</button></td>';
            echo '<td>----</td>';
            echo '</form></td>';
        }
        else
        {
            if($data == 'lidnummer' || $data == 'adres' || $data == 'woonplaats')
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td> ---- </td>';
                echo '<td> ---- </td>';
                
            } 
            else
            {
                echo '<td>' . htmlspecialchars($info) . '</td>';
                echo '<td><a href="lid.php?lidnummer=' . $gegevens_lid['lidnummer'] . '&' . $data . '=' . $info . '">Update</td>';
                echo '<td> ---- </td>';
            }            
        }
        echo '</tr>';
Posandu
  • 525
  • 6
  • 18
  • That seems to work, but I can't really tell why. As far as I can tell you only added a td tag before
    and after
    and it works. Can you explain?     – Xavvey Nov 16 '21 at 13:54
  • `td` tags are used as table columns. – Posandu Nov 16 '21 at 13:55
  • https://www.w3schools.com/html/html_tables.asp – Posandu Nov 16 '21 at 13:56
  • Also make sure to mark this as the answer – Posandu Nov 16 '21 at 13:57
  • 1
    @Xavvey you can not nest a form into a table like you tried to do. Either the form element has to go around the _whole_ table, or it needs to be contained within a single table cell. Anything else is invalid HTML, and the browser will built a different DOM than the one you want out of that, when it applies error correction. – CBroe Nov 16 '21 at 13:57
  • 1
    (Which means the "solution" presented here is still not actually correct.) – CBroe Nov 16 '21 at 13:58
  • @CBroe Thanks! A little weird though because I got this idea from a youtube vid and there it seemed to work. I also got it to work before on another page but scrapped that for something else and now it did not work... But I'll just go with this! – Xavvey Nov 16 '21 at 14:00
  • `
    ` and `
    ` requires an opening ``     – brombeer Nov 16 '21 at 14:09