как сделать автообновленную форму с php и jquery?

Question

Я пытаюсь обновить выбор, выбрав элемент в другой форме без обновления страницы. Я последовал некоторому учебнику (https://www.youtube.com/watch?v=AofECml9pQU) и дошел до этого (это часть моего кода)

<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>

и я отправляю это в мой php файл

 <?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";
}
?> 

но когда я отправляю в первую форму, она обновляет страницу ни на что

Answer 1

похоже, что моей первой проблемой было присутствие ";" вместо "," на:

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

но все же, когда я отправляю его, ничего не происходит, за исключением страницы, которая, кажется, обновляется и возвращается поверх нее

РЕДАКТИРОВАТЬ: теперь это работает, мои шаги появляются (это было, потому что я сделал ошибку, удалив некоторые HTML

Answer 2

здесь type: 'post'; вместо ; поставить , т.е.: type: 'post', .try, как показано ниже:

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 3

Добавление onsubmit="return chk()" к вашему <form> поможет вам

Но в любом случае, если в javascript возникнет ошибка, будет опубликовано сообщение

Для этого вы должны проверить консоль браузера (F12), возможно, есть что-то, чего я не увидел в вашем коде!