Question

I have a table showing information from a mysql table. I have three forms in it that add, delete or update the database like this :

<table>
  <form method="POST" action="php/delete.php">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Espéce</th>
        <th>Cri</th>
        <th>Propiétaire</th>
        <th>Age (années)</th>
        <th><input type="submit" name="supprimer" value="Supprimer" /></th>
      </tr>
    </thead>

    <tbody>
      <?php
        $connexion = mysql_connect($hote, $login, $mdp);
        mysql_select_db($bd, $connexion);

        $req = "Select * from animaux;";
        $resultat = mysql_query($req, $connexion);

        while (list($id, $nom, $esp, $cri, $prop, $age) = mysql_fetch_row($resultat)) {
      ?>

      <tr>
        <td><?= $nom ?> </td>
        <td><?= $esp ?></td>
        <td><?= $cri ?></td>
        <td><?= $prop ?></td>
        <td><?= $age ?></td>
        <td> <input type="checkbox" name="choix[]" value=<?= $id ?>></td>
      </tr>
  </form>
  <form method="POST" action="php/maj.php">
      <tr>
        <input type="hidden" name="num" value=<?= $id ?>/>
        <td><input id="nom-maj" type="text" name="nom" value=<?= $nom ?> /></td>
        <td><input id="esp-maj" type="text" name="esp" value=<?= $esp ?> /></td>
        <td><input id="cri-maj" type="text" name="cri" value=<?= $cri ?> /></td>
        <td><input id="prop-maj" type="text" name="prop" value=<?= $prop ?> /></td>
        <td><input id="age-maj" type="text" name="age" value=<?= $age ?>
                   onKeyPress='validationNombres(event)' maxlength="3" /></td>
        <td><input id="btn_maj" type="submit" name="maj" value="Mettre à jour"
        onclick=verif("maj") /></td>
      </tr>
  </form>

    <?php } ?>

  <form method="POST" action="php/add.php">  
      <tr>
        <td><input id="nom-add" type="text" name="nom" placeholder="Nom" /></td>
        <td><input id="esp-add" type="text" name="esp" placeholder="Espéce" /></td>
        <td><input id="cri-add" type="text" name="cri" placeholder="Cri" /></td>
        <td><input id="prop-add" type="text" name="prop" placeholder="Propiétaire" /></td>
        <td><input id="age-add" type="text" name="age" placeholder="Âge"
                   onKeyPress='validationNombres(event)' maxlength="3"  /></td>
        <td><input id="btn-add" type="submit" name="ajouter" value="Ajouter"
        onclick=verif("add") /></td>
     </tr>

 </form> 

  </tbody>

</table>

Is there anyway to use this forms without having to leave the page, and also update the page ?

Answer 1

Try jquery post method..

$("input[name=supprimer]").click(function (e){

    e.preventDefaults(); 
    val = $("input[name=supprimer]").val();

    $.post(
            "php/delete.php", //Ajax file
            "supprimer":val,  // create an object will all values
            function (data) {

                   //Handle Response
                   alert(data.result);
            },
            "json"
        );



});

In your delete.php ;

if(isset($_POST["supprimer"]))
{
    $supprimer = $_POST["supprimer"];
    //Delete it, Let say result is true
    $result = true;
    echo json_encode(array("result" => $result));
}

You can try similar logic for others..