Отправка формы с помощью анкера

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

Если вы будете иметь несколько якорей и форму, я предлагаю вам идентификаторы формы, и поместить идентификатор в атрибуте data-form в соответствующем якоре. Затем вы можете использовать одну и ту же функцию прослушивания событий для всех якорей:

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

Answer 2

Это мой прием. Я не проверял его на наличие ошибок, но если вы создаете формы в цикле, вам нужно вызвать функцию, подобную этой, чтобы вы не сталкивались с проблемами с областью переменных с вашими событиями. [Идентификаторы и другие идентифицирующие атрибуты не нужны]

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