how to make auto updated form with php and jquery?

Question

I try to make a selection update by selecting element on another form without the page refreshing I followed some tutorial (https://www.youtube.com/watch?v=AofECml9pQU) and get to this (this is part of my code)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    function chk() {
        var jeu = document.getElementById('liaisonJeu').value;
        var mode = document.getElementById('liaisonMode').value;
        $.ajax({
            type: 'post';
            url: "afficheEtapepourLiasion.php",
            data: {
                jeu: jeu,
                mode: mode
            },
            cache: false,
            success: function(html) {
                $('#LiaisonCompose').html(html);
            }
        });
        return false;
    }
</script>

<form>
    <h5>Jeu</h5>
    <select name="Jeu" id="liaisonJeu">
        <?php
         $req='SELECT Jeu.NomJeu FROM Jeu';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option>".$ligne[0];
         }
         ?>

    </select>

    <h5>Mode</h5>
    <select name="Mode" id="liaisonMode">
        <?php
         $req='SELECT Mode.NomMode FROM Mode';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option>".$ligne[0];
         }
         ?>

    </select>
    <input type="submit" value="Afficher" onclick="return chk()">
</form>

<div id="LiaisonCompose"></div>

and I send this to my php file

 <?php
include('../connexion.inc.php');
?>
<?php
$test = 0;
if (isset($_POST['jeu'])) {
    $jeu  = $_POST['jeu'];
    $test = $test + 1;
}
if (isset($_POST['mode'])) {
    $mode = $_POST['mode'];
    $test = $test + 1;
}
if ($test == 2) {
?>
<form action="LiaisonCompose.php" method="post">
<h5>Etape</h5>
<select name="Etape">
  <?php
    $req      = 'SELECT Etape.NomEtape FROM Etape WHERE Etape.NomEtape LIKE' . $jeu . '_' . $mode . '_%;';
    $resultat = $dbh->query($req);

    while ($ligne = $resultat->fetch()) {
        echo "<option>" . $ligne[0];
    }
?>
</select>
<br /><br />
<input type="submit" value="Valider">
</form>
<?php
} elseif ($test == 1) {
    echo "Missing data";
} else {
    echo "No data";
}
?> 

but when I submit on the first form it refresh the page on nothing

Answer 1

here type: 'post'; instead of ; put ,i.e : type: 'post', .try like below :

function chk(){
        var jeu = document.getElementById('liaisonJeu').value;
        var mode = document.getElementById('liaisonMode').value;
        alert("hi");
        $.ajax({
            type: 'post',
            url: "afficheEtapepourLiasion.php",
            data: {
                jeu: jeu,
                mode: mode
            },
            cache: false,
            success: function(html) {
                $('#LiaisonCompose').html(html);
            }
        });
        return false;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <h5>Jeu</h5>
    <select name="Jeu" id="liaisonJeu">
        <?php
         $req='SELECT Jeu.NomJeu FROM Jeu';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option value='$ligne[0]'>".$ligne[0];."</option>"
         }
         ?>

    </select>

    <h5>Mode</h5>
    <select name="Mode" id="liaisonMode">
        <?php
         $req='SELECT Mode.NomMode FROM Mode';
         $resultat=$dbh->query($req);

         while ($ligne=$resultat->fetch()) {
           echo "<option value='$ligne[0]'>".$ligne[0]."</option>"
         }
         ?>

    </select>
    <input type="submit" value="Afficher" onclick="return chk()">
</form>

<div id="LiaisonCompose"></div>

`

Answer 2

it seems that my first probleme was the presence of a ";" instead of a "," on:

 $.ajax({
            type: 'post'; <--- here
            url: "afficheEtapepourLiasion.php",
            data: {
                jeu: jeu,
                mode: mode
            },

but still when I submit it nothing happen except for the page that seems to refresh and return on top of it

EDIT : now it works my steps appear (it was because I made a mistake by deleting some html

Answer 3

Adding onsubmit="return chk()" to your <form> will do the trick

But any way if there is an error in javascript it will post

For that you have to check your browser console (F12) maybe there is something i didn't see in your code !