使用锚提交表单

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; 
}