javascript - ページのリダイレクトを防ぎながらフォームを送信する方法

Question

私のフォームは次のようなものです：

<form action="http://example.com/test.php" method="post">
.....
<input type="submit" class="submit" />
</form>

ユーザーが送信ボタンをクリックすると、「情報を送信しました...」というウィンドウがポップアップ表示され、情報が test.php ページに渡されます。

これには jQuery を使用する必要がありますか?

Answer 1

必要に応じてAJAXを使用せずに実行でき、jQueryも必要ありません。ページのどこかに IFRAME を配置し (非表示のページでも)、iframe に TARGET を追加してフォームを変更する必要があります。

<iframe name="formSending"></iframe>
<form action="http://example.com/test.php" method="post" target="formSending">
.....
<input type="submit" class="submit" />
</form>

test.php ファイルの最後 (または処理後) に、次のような行が必要です。

<script>alert('you have submitted the information....');</script>

Answer 2

これを実現するためにajaxを使用できます。次のようなことを試してください：

<form action="http://example.com/test.php" method="post">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name="phone" />
<textarea name="message"></textarea>
<input type="submit" class="submit" onclick="formSubmit(event)" />
</form>

function formSubmit(e){

         e.preventDefault(); //This will prevent the default click action.

        // Create DataString
        var dataString = '&name=' + $('input[name=name]').val() +
                         '&email=' + $('input[name=email]').val() +
                         '&phone=' + $('input[name=phone]').val() +
                         '&message=' + $('textarea[name=message]').val() +

        $.ajax({
            type: "POST",
            url: "http://example.com/test.php",
            data: dataString,
            success: function() {
                alert('Form Successfully Submitted');
            },  
            error: function() {
                alert('There was an error submitting the form');
            }   
        }); 
        return false; // Returning false will stop page from reloading.
    }   
}

test.php ファイルでは$_POST、ajax が POST 値を送信するために作成した dataString を使用するため、値を取得できます。

$name = $_POST['name']
$email = $_POST['email']
$phone = $_POST['phone']
$mssg = $_POST['message']

Answer 3

次のようなフォーム送信のイベントを作成できます

    var html_custom ='';
    $(document).ready(function(){
        $('#btn_submit').click(function(){
          html_custom+= "Name : " + $('#name').val();
          html_custom+= "Email : " + $('#email').val();
          html_custom+= "<a href='javascript:void(0);' id='form_submit'>Submit</a>";
          //now populate this custom html on the div which is going to be shown as pop up.
        });
       $('#form_submit').click(function(){
          $('form').submit();
        });

    });

変更する

       <input type="submit" class="submit" />

に

       <input type="button" class="submit" name="btn_submit" />

Answer 4

これは非常に簡単なトリックです: - フォームを別のファイルに入れます。- 現在のページで、そのファイルを iframe に読み込みます。- フォームのアクションで送信されたデータを取得します。

JavaScript を使用してアクションからフォームを送信した後、親ウィンドウにアクセスできます。