web-dev-qa-db-fra.com

Comment utiliser la méthode jquery $ .post () pour soumettre des valeurs de formulaire

J'ai 1 page principale avec un formulaire et une autre page pour traiter la valeur du formulaire, voici les codes source des 2 pages

Form Page:

<meta charset="UTF-8">
<title>Form Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process.php" method="post" id="reg-form">
        Username: <input type="text" id="username" name="username">
        <br>
        Password: <input type="password" id="password" name="password">
        <br>
        <button type="submit" id="submit-btn">Traditional Submit</button>
        <button type="button" id="post-btn">$.Post Submit</button>
</form>
<script>
    $("#post-btn").click(function(){        
        $.post("process.php",function(data){
            alert(data);
        });
    });
</script>

page de processus:

<?php
$username=$_POST["username"];
$password=$_POST["password"];
echo "Username: ".$username;
echo "<br>";
echo "Password: ".$password;?>

si je clique sur le bouton "Envoyer traditionnel", cela fonctionne parfaitement.

mais lorsque je clique sur le bouton "$ .Post Submit", le message d'erreur "Avis: index indéfini ... ..." continue de s'afficher.

Je ne peux pas comprendre où se situe le problème, merci de bien vouloir vérifier et corriger, merci d'avance!

javascriptphpjquerypost
31
Yolo

Vous devez également sélectionner et envoyer les données du formulaire:

$("#post-btn").click(function(){        
    $.post("process.php", $("#reg-form").serialize(), function(data) {
        alert(data);
    });
});

Consultez la documentation de la méthode jQuery serialize , qui code les données des champs de formulaire dans une chaîne de données à envoyer au serveur.

61
nbrooks

Obtenez la valeur de vos zones de texte en utilisant val() et stockez-les dans une variable. Transmettez ces valeurs à travers $.post. En utilisant le $.Post Submit button vous pouvez réellement supprimer le formulaire.

<script>

    username = $("#username").val(); 
    password = $("#password").val();

    $("#post-btn").click(function(){        
        $.post("process.php", { username:username, password:password } ,function(data){
            alert(data);
        });
    });
</script>
9
John Robertson

Votre $.post Ne contient aucune donnée. Vous devez transmettre les données du formulaire. Vous pouvez utiliser serialize() pour publier les données du formulaire. Essaye ça

$("#post-btn").click(function(){
    $.post("process.php", $('#reg-form').serialize() ,function(data){
        alert(data);
    });
});
7
MH2K9