使用錨提交表單

Question

我有一個for循環創建了一些<form>元素。
每個<form>包含一個獨特的隱藏URL參數。

有沒有辦法鏈接每個<form>與相應的<anchor>，這樣當鏈接被點擊時，相應的表單被提交？

var f = document.createElement('form'); 
f.setAttribute('method','GET'); 
f.setAttribute('action','example.com'); 

var api = '&param=1'; 

var filters = document.createElement('input'); 
filters.setAttribute('type','hidden'); 
filters.setAttribute('name','filters'); 
filters.value = api; 

f.appendChild(filters); 
document.getElementById('body').appendChild(f); 

document.getElementById('formAnchors').innerHTML += '<li class=""><a href="#" role="button">ClickMe</a></li>'; 

Answer 1

var anchor = document.createElement('a'); 
anchor.setAttribute('href', '#'); 
anchor.setAttribute('role', 'button'); 
anchor.addEventListener('click', function(e) { 
    e.preventDefault(); 
    f.submit(); 
}); 

var li = document.createElement('li'); 
li.appendChild(anchor); 
document.getElementById('formAnchors').appendChild(li); 

如果你有多個錨和形式，我建議你給的表格的ID，並把ID在data-form屬性在相應的錨。然後你可以對所有錨使用相同的事件監聽器功能：

function anchor_submit(e) { 
    var form = e.target.getAttribute('data-form'); 
    e.preventDefault(); 
    form.submit(); 
}; 

Answer 2

這是我的承擔。我沒有檢查它的錯誤，但如果你在一個循環中創建表單，你需要調用一個像這樣的函數，這樣你就不會遇到你的事件的變量範圍問題。 [ID和其他識別屬性是不必要]

function addForm(url, api, getpost) { 
var f = document.createElement('form'); 
f.setAttribute('method',getpost?getpost:'GET'); 
f.setAttribute('action',url); 

var filters = document.createElement('input'); 
filters.setAttribute('type','hidden'); 
filters.setAttribute('name','filters'); 
filters.value = api?api:'&param=1'; 

var anchor = document.createElement('a'); 
anchor.setAttribute('href', '#'); 
anchor.setAttribute('role', 'button'); 
anchor.innerHTML='Click Me'; 
anchor.addEventListener('click', function(e) { 
    e.preventDefault(); 
    f.submit(); 
}); 

f.appendChild(filters); 
document.getElementById('body').appendChild(f); 
var li = document.createElement('li'); 
li.appendChild(anchor); 
document.getElementById('formAnchors').appendChild(li); 

return f; 
}