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

使用锚点提交表单

2 个答案: