javascript - 使用 anchor 提交表单

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

如果您有多个 anchor 和表单，我建议您提供表单 ID，并将 ID 放入相应 anchor 的 data-form 属性中。然后您可以对所有 anchor 使用相同的事件监听器函数:

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