web-dev-qa-db-ja.com

jquery $ .post（）メソッドを使用してフォーム値を送信する方法

フォームのあるメインページが1つあり、ここでフォームの値を処理する別のページが2ページのソースコードです

フォームページ：

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

プロセスページ：

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

[Traditional Submit]ボタンをクリックすると、完全に機能します。

しかし、「$。Post Submit」ボタンをクリックすると、エラーメッセージ「Notice：Undefined Index ...」が表示され続けます。

問題がどこにあるのかわかりませんが、チェックと修正を親切に助けてください、事前に感謝します！

javascriptphpjquerypost
31
Yolo

フォームデータも選択して送信する必要があります。

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

フォームフィールドのデータをサーバーに送信するデータ文字列にエンコードするjQuery serialize メソッドのドキュメントをご覧ください。

61
nbrooks

val()を使用してテキストボックスの値を取得し、変数に保存します。それらの値を$.postを通して渡します。 $.Post Submit buttonを使用すると、実際にフォームを削除できます。

<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

Yor $.postにはデータがありません。フォームデータを渡す必要があります。 serialize()を使用して、フォームデータを送信できます。これを試して

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