앵커를 사용하여 양식 제출

Question

나는 <form> 개의 요소를 만드는 for 루프를 가지고있다.
각 <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를 부여 제안하고, 해당 앵커에 data-form 속성에 ID를 넣어. 그런 다음 모든 앵커에 동일한 이벤트 리스너 함수를 사용할 수 있습니다.

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

Answer 2

이것은 필자의 생각입니다. 오류를 검사하지는 않았지만 루프에서 양식을 작성하는 경우 이벤트와 함께 다양한 범위 문제가 발생하지 않도록이 함수를 호출해야합니다. ({f.submit();} 함수() "클릭")`

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