Sujet Précédent Sujet Suivant

Problème boutton html

Fermé
Superdiamant7 - 14 mai 2023 à 15:54
jordane45 Messages postés 38182 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mai 2024 - 14 mai 2023 à 18:07

Bonjour,

J'ai commencé un projet de "To do list", et ça fonctionne bien.

Mais il y a un problème: Les boutons qui permettent de supprimer chaque élément de la liste refusent de se placer à coté. J'ai d'abords regardé sur internet et même demandé à chat-GPT !, mais rien ne fonctionne ???? 

Pouvez vous m'aider svp ?

Index.php:

<?php
require_once 'list.php';
?>
<html>
    <head>
        <link rel="stylesheet" href="style.scss">
        <title>To do list</title>
    </head>
    <body>
        <h1>To do list</h1>
        <label>
            <div>
                <form method="POST">
                    <input placeholder="Enter a new task" required id="form" name="form" maxlength="36">
                    <button id="newTask">Add to list</button>
                </form>
            </div>  
        </label>
    </body> 
</html>

List.php:

<?php

require_once 'login.php';
try 
{
    $pdo = new PDO($attr, $user, $pass, $opts);
}
catch (PDOException $e)
{
    throw new PDOException($e->getMessage(), (int)$e->getCode());
}

if (isset($_POST['form']))
{
    $newTask = htmlentities($_POST['form']);
    $query = "INSERT INTO tasks (text) VALUES (\"$newTask\")";
    $result = $pdo->query($query);
    $newTask = NULL;
    header("refresh: 0");
}

$query = "SELECT * FROM tasks";
$result = $pdo->query($query);

echo "<ol class='list'>";
while ($row = $result->fetch())
{
    echo "<li>" . $row['text'] . "</li>" . "<form method='POST'>
    <button name='supprimer' value=" . $row['id'] . ">Supprimer</button></form>";
}
echo "</ol>";

if (isset($_POST['supprimer']))
{
    $id = $_POST['supprimer'];
    $query = "DELETE FROM tasks WHERE id=" . $id;
    $result = $pdo->query($query);
    header("refresh: 0");
}

style.scss:

h1 {
    position: absolute;
    top: 7%;
    left: 10%;
    font-size: 400%;
    text-decoration: underline;
}

#form {
    position: absolute;
    top: 25%;
    left: 35%;
    width: 30%;
    height: 5%;
    text-align: center;
    &:focus {
        border: 5px solid black;
    }
    font-size: 200%;
}

#newTask {
    position: absolute;
    top: 26%;
    left: 66.5%;
    width: 10%;
    height: 3%;
    transition: 400ms;
    &:hover {
        transform: scale(1.15);
    }
}

.list {
    position: absolute;
    top: 40%;
    left: 35%;
    font-size: 200%;
}
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38182 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 mai 2024 4 670
14 mai 2023 à 18:07

Bonjour,

Pour commencer, tes boutons doivent se trouver dans tes LI

Ensuite, tu peux utiliser le css : display:inline-block

 <ol class='list'>
  <li>aaa
    <form method='POST'>
      <button name='supprimer' value="1">Supprimer</button>
    </form>
  </li>
  <li>bbbb
    <form method='POST'>
      <button name='supprimer' value="2">Supprimer</button>
    </form>
  </li>
 </ol>
      .list > li > form {
        display:inline-block
      }
0

Discussions similaires

&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Image cliquable dans html
pau -
efS -

5 réponses