3

ちょっと質問です --

実際にフォームを送信し、スクリプトの実行中に同じページにとどまるにはどうすればよいですか?

次のような単純なフォームがあります。

<form action="process.php" method="post" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required="required" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required="required" />
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required="required" />
    <label for="message">Message</label>
    <input type="text" name="message" id="message" required="required" />
    <input type="submit" id="button" value="Submit"/>
</form>

しかし、フォームを送信するたびに、process.php に移動します。私はそれを望んでいません、私はそれを同じページにとどめたいです、多分「ありがとう」などと言うjqueryポップアップを持っているかもしれません。

スクリプトの実行中に実際に同じページに留まるにはどうすればよいですか?

4

9 に答える 9

3
  1. フォーム処理ロジックをフォームと同じページに配置します
  2. Ajax を使用する
  3. process.php がフォームの処理を完了すると、そのページにリダイレクトされます
于 2012-05-03T13:58:07.543 に答える
3

この場合、ajax を使用する必要があります。

基本的に、すべてのデータを ajax を使用して投稿する必要があります。サーバー側では、サーバー スクリプトで通常行うように、$_POST['name'] を使用してすべてのパラメーターを取得する必要があります。

形

<form action="process.php" method="post" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required="required" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required="required" />
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required="required" />
    <label for="message">Message</label>
    <input type="text" name="message" id="message" required="required" />
    <input type="button" id="button" value="Submit"/>
</form>

<div id="dialog-message" title="Thank You">
    <p>Your message here</p>
</div>

​

Jクエリ

$(document).ready(function(){

    $('#dialog-message').dialog({
        modal: true,
        autoOpen: false,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });



    $('#button').on('click', function() {
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        var dataString = 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function() {
                alert('');
                $('#dialog-message').dialog('open');
            }
        });
    });
});​

こちらの例をご覧ください

jquery参照とjquery ui参照を忘れずに入力してください。

于 2012-05-03T14:17:29.577 に答える
2

ジョン・コンデが最良の答えを出したと思います。

フォームを表示する php ファイルが $_POST も処理するようにするか、そのようにできない場合は、次のようなコードを使用して Ajax で処理します。

$("#form").bind("submit", function() { 

var nameTxt = $("#name").val();
var emailTxt = $("#email").val();
$.post('process.php', 
    {
        name: nameTxt,
        email: emailTxt
    }, 
    function(data) {
                if (data == 'ko')
                    alert('Could not submit...');
                else {
                    alert('Thank you for your message.');
                }
            });
return false;
}

これが行うことは、送信ボタンをクリックしたときにフォームの通常の送信を「ブロック」し、入力値を取得して process.php スクリプトに送信することです。

あなたの「process.php」が

 echo "ko";

エラーがある場合。入力をリセットすることにより、フォームが正常に送信された後にフォームのクリーンアップを実行できます。

$("#name").val('');
$("#email").val('');
于 2012-05-03T14:29:42.367 に答える
1

このようなことを試してください

      action="<?php print $_SERVER["PHP_SELF"]; ?>" (or) action=""

編集：

         <?php
         if(isset($_POST['Submit'])){
             //do your validation or something here
             header("location:Process.php");

             }
于 2012-05-03T14:00:00.603 に答える
1

jquery を使用していると仮定します。

$(document).ready(function(){
  $('#form').submit(function(e){
    // do some ajax request to process.php here...

    // stop the form doing its default action of submitting directly to process.php
    e.preventDefault();
  });
});
于 2012-05-03T13:57:53.050 に答える
0

これを行うには、jquery ajax が必要です。ここを参照してください$.post

于 2012-05-03T14:00:44.113 に答える
0

このようなことができます（jQueryを使用、テストされていません）

$(function() {
    $("#form").submit(e) {
        // Prevent regular form submission
        e.preventDefault();

        // Submit the form via AJAX
        var $form = $("#form");
        $.post(
            $form.attr("action"),
            $form.serialize(),
            function() { alert("Done!"); }
        );
   }
}
于 2012-05-03T14:01:57.077 に答える
0

文字通り：

<form action="process.php" method="post" id="form" target="_blank">
                                                   ^^^^^^^^^^^^^^^^

これにより、フォームが送信された場合でも、ブラウザは同じページにとどまります。

ただし、代わりにAJAXを探す可能性が高くなります。

于 2012-05-03T13:59:26.763 に答える