web-dev-qa-db-ja.com

ページをリロードせずにjQuery送信フォーム

私はjQueryにあまり詳しくありません。ページをリロードせずにバックグラウンドで送信されるフォームを作成しようとしています。

クリックすると表示/非表示になる非表示のdivがあります。divの中にフォームがあります。

2つの問題があります。

1）フォームの検証に失敗した場合でも、フォームは送信されます。検証コードと送信コードを条件if(validation == valid) { $.ajax.... }に入れようとしましたが、正しく機能しません。

2）フォームが送信されると、divは自動的に非表示になるため、成功したメッセージを表示できません。

これがコードです：

$().ready(function() { 

    // Validate the form when it is submitted, using validation plugin.
    var validator = $("#contactform").validate({
        errorContainer: container,
        errorLabelContainer: $(),
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    errorPlacement: function (error, element) { 
error.insertBefore(element);    
}   
    });
});

$(function() {

    //This submits a form
$('input[type=submit]').click(function() {
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: $("#contactform").serialize(),
            beforeSend: function() {
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data) {
                $('#result').html(data);
            }

        })
    })
})


//This shows and hides div onclick
$(document).ready(function(){   
        $(".slidingDiv").hide(); 
        $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    });
});
jqueryajaxformsform-submit
10
qwaz

クリックイベント（input[type=submit]）にバインドするのではなく、フォームのsubmitイベントにバインドする必要があります。

$("form").on("submit", function (e) {
    e.preventDefault();

検証についてもわかりません。非同期で実行する場合は、コールバックが必要です。同期して実行される場合、いつトリガーされますか？検証プラグインがそれ自体でそれを行わない限り、フォームが送信されたときにそれを行う必要があるようです：

$("form").on("submit", function (e) {
    e.preventDefault();
    if ($(this).validate(options)) {
        $.ajax

e.preventDefaultを使用するとリロードが防止され、成功したdivが表示されます。

22
Explosion Pills

1）event.preventDefault();を使用して、フォームが送信されないようにします- http://api.jquery.com/event.preventDefault/

2）#resultを非表示にする原因となっているスクリプトには何もありませんが、$('#result').show()を試して、それが戻ってくるかどうかを確認できます

1
Seth McClaine

JQuery 1.8.2以降ではjQuery Ajaxの「成功」機能が廃止されているため、使用しているjQueryバージョンを確認してください。

実際の送信イベントを防ぐには、e.preventDefault()を使用します。

1
Jay Patel