窗體事件處理模式

我正在使用後端，我發送ajax post請求而不是在表單上使用默認操作是理想的。窗體事件處理模式

考慮到這一點，我需要提取在我的表單中選擇的最終字段。

我有不同的文本字段，單選按鈕，複選框等

我一直在努力獲得事件委託和事件傳播的一個很好的理解。我不完全確定這是否是我想要實現的主題。

我知道我可以編寫放置一個ID上的每個字段抓住所有的在我的格式相關的信息和有功能上的ID提取每個值，如代碼：

function example(){ 
    var field0 = $('#field0').val(); 
    var field1 = $('#field1').parent().hasClass('active') 
    // ... and more  

}

我已經使用這種模式一段時間，我不覺得它是有效的。

我有兩個模式的想法，但我仍然不知道這是一個「普遍做法」

因爲我不關心每個字段的數據，直到提交表單時，我可以在我的表單上對所有基於輸入的字段執行循環並提取內容，而不是爲每個單獨的輸入字段分配一個ID。
我可以聽窗體上的變化（我不確定如何做到這一點，這是事件委託/傳播將發揮作用）。而不是等待提交按鈕來收集表單中的所有信息，我將有一些類型的偵聽器來檢測表單上的更改（不確定這是否可能）。

我一直在使用我目前的格局數月，想提高自己，如果任何人有任何建議，鏈接，或約我的想法上的一種新方法的批評我會很感激的。

來源

2016-07-25 HelloWorld

所以，你基本上提出3種方式來得到一個值上提交的所有表單域（或類似事件）：

硬編碼ID並檢索它們的值，例如

var field_a = document.getElementById('a') 
    , field_b = document.getElementById('b') 
    , form = document.getElementById('my_form'); 

form.addEventListener('submit', function() { 
    fetch('//your/api/endpoint', { 
    method: 'POST', 
    body: JSON.stringify({a: field_a.value, b: field_b.value}) 
    }); 
});

循環所有並檢索它們的值，例如

var form = document.getElementById('my_form'); 

form.addEventListener('submit', function() { 
    var values = [].reduce.call(
    form.querySelectorAll('input, textarea, select'), 
    function(values, element) { 
     values[element.name] = element.value; 
     return values; 
    }, 
    {} 
); 

    fetch('//your/api/endpoint', { 
    method: 'POST', 
    body: JSON.stringify(values) 
    }); 
});

手錶的形式內的變化，他們積累

var form = document.getElementById('my_form') 
    , state = {}; 

form.addEventListener('change', function(e) { 
    state[e.srcElement.name] = e.value; 
}); 
form.addEventListener('submit', function() { 
    fetch('//your/api/endpoint', { 
    method: 'POST', 
    body: JSON.stringify(state) 
    }); 
});

從性能角度來看，選項1將是最快的，之後接着是3（與最後2我不是100％確定，querySelectorAll可能是昂貴的，但聽噸的change事件可能也是如此 - 取決於變化事件被觸發多久我會說）。

從開發的角度來看（設置表單需要多長時間），2和3應該沒有區別，因爲它們都是通用的（您可以使用我的代碼示例作爲開始）。

「真正的」數據綁定（如Angular）或「純態」（如React）幾乎歸結爲選項2/3（只是框架將爲您執行繁重的工作）。

關於選項3（在整個表單上聆聽change）：https://stackoverflow.com/a/4616720/1168892很好地解釋了JavaScript中的事件冒泡是如何發生的。要使用它，你必須確保表單中沒有元素取消change事件（否則它不會冒泡到表單本身）。不取消事件是默認的行爲，所以你必須明確地做出這個錯誤（並且你可以在你的實現中關注它）。

我沒有在我的例子中使用jQuery，因爲這些都可以通過瀏覽器直接完成。我用的是Element.querySelectorAll,Array.reduce和window.fetch。

來源

2016-07-25 20:55:21

沒有jquery我曾經寫過一個函數，它返回一個對象的所有輸入值與它的名字相關。我認爲它比簡單的id鏈接更好，因爲您不必擔心表單內的內容，只要您爲輸入提供名稱屬性即可。

function getFormData(form) { 
    var data = {}; 
    for (var i = 0; i < form.elements.length; i++) { 
     var input = form.elements[i]; 

     if (input.value && input.type !== 'submit' && input.type !== 'button') { 
     data[input.name] = input.value; 
     } 
    } 
    return data; 
}

所有你需要做的是通過你的表格是這樣的：

var form = document.querySelector('.monFormulaire'); 
// your form data 
var data = getFormData(form);

來源

2016-07-25 20:33:55 Gatsbill

模式＃1（使用serializeArray）

$('#formId').on('submit', function(e){ 
    var allData; 
    e.preventDefault(); 

    allData = $(this).serializeArray(); 

    // use the allData variable when sending the ajax request 
});

模式＃ 2（使用的$container.on('event', 'selector', ..)委派的形式和change事件）

$('#formId').on('change', 'input,textarea,select', function(){ 
var element = $(this), // element that changed 
    value = element.val(); // its new value 
// do what you want .. 
});

來源

2016-07-25 20:44:30

窗體事件處理模式

回答

相關問題