如何使用JavaScript .submit（函數（事件）{多個元素

-1

好了，我有以下的Javascript：如何使用JavaScript .submit（函數（事件）{多個元素

//Form handling 
var form = $('#form-ajax'); 
var formMessages = $('#form-messages'); 
$(form).submit(function(event) { 
    // Stop the browser from submitting the form. 
    event.preventDefault(); 

    // Serialize the form data. 
    var formData = $(form).serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: $(form).attr('action'), 
     data: formData 
    }).done(function(response) { 
     //Do something 
    }).fail(function(data) { 
     //Do something 
    }); 
});

基本上覆蓋默認表單提交和使用Ajax，而不是處理事情

要使用它，我只需要在form-ajax ID添加到窗體，並添加id爲form-messages一個空div;從形式的任何響應將無需重新加載頁面顯示在這個div

。我的問題是我想要的使用這個相同的Javascript調用多種形式，我不能解決如何。

我認爲改變form-ajax到一個類會有所訣竅。所以

var form = $('.form-ajax');

而不是：

var form = $('#form-ajax');

但它並沒有幫助。在這兩種情況下，如果多個形式使用具有這樣的：

<div id="form-messages"></div> 

<form class="form-ajax" method="post" action="dosomething.php"> 
</form> 
<form class="form-ajax" method="post" action="dosomethingelse.php"> 
</form>

提交任一形式將觸發第二被張貼。我假設由於它們在DOM中加載的順序。

任何想法如何解決這個問題，以便我可以重新使用這一個處理程序/事件。

來源

2014-09-12 user3420034

使用'this'取代'form'的事件處理中。瞭解關於jQuery事件處理基礎知識的更多信息：http://learn.jquery.com/events/event-basics/ – 2014-09-12 19:20:15

當你這樣做：

var form = $('.form-ajax');

要設置form潛在元素的集合，不只是一個。這可能不是一個大問題，在這裏：

$(form).submit(function(event) { 
    // event handler 
});

因爲jQuery將僅僅是處理程序添加到submit事件集合中的每個表格。但它很變成一個大問題在這裏：

var formData = $(form).serialize();

因爲你序列化整個集合表單元素，不只是一個。在事件處理程序的範圍，你可以使用this引用特定元素在運行時被處理：

var formData = $(this).serialize();

這樣，你只序列什麼是在一種形式的範圍，而不是所有的形式。

同樣的問題在這裏也適用：

$(form).attr('action')

這也應該作用域，只剩下那些調用的處理形式：

$(this).attr('action')

來源

2014-09-12 19:27:08 David

這是這裏最好的答案 – dave 2014-09-12 19:34:19

爲了解決這個問題，你應該在提交函數中創建一個變量，該函數有一個對當前表單的引用。檢查您的代碼波紋管的修改：

//Form handling 
var form = $('.anyClass'); 
var formMessages = $('#form-messages'); 
$(form).submit(function(event) { 
    // Current form 
    var currentForm = $(this); 
    // Stop the browser from submitting the form. 
    event.preventDefault(); 

    // Serialize the form data. 
    var formData = currentForm.serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: currentForm.attr('action'), 
     data: formData 
    }).done(function(response) { 
     //Do something 
    }).fail(function(data) { 
     //Do something 
    }); 
});

希望它有幫助。祝你好運。

來源

2014-09-12 19:24:58 Peruggia

'form'已經是表單元素的引用... – naomik 2014-09-12 19:27:14

如何使用JavaScript .submit（函數（事件）{多個元素

回答

相關問題