Javascript：通過單擊表單中的任何錨標簽來提交表單

Question

我有一個表格和許多鏈接：

<form action="/a">
<input type=text name=somedata>
<input type=submit>

<a href="/b">my first link</a>
<a href="/c">link</a>
<a href="/d">link</a>
<a href="/e">link</a>
</form>

如果用戶按“提交”，則應像往常一樣將表單提交到/ a（因此無更改）。

但是，當用戶單擊/ b時，而不是剪貼一些數據並向/ b發送GET請求，我想向/ b發送POST請求，就像表單是<form action=/b> 。

是否可以對頁面上的所有超文本錨自動執行此操作，以使其不僅適用於/ b，而且適用於/ c，/ d和/ e？

純Javascript和jQuery都是可以接受的。

Answer 1

將表單的action更改為所選<a>的href ，然后提交表單

$('form a').click(function(event){
    event.preventDefault();
    $(this).closest('form').attr('action', this.href ).submit();
});

Answer 2

 var form = document.querySelector("form"); var allA = document.querySelectorAll("a"); allA.forEach(function(el){ el.addEventListener("click",function(e){ form.action = this.href; console.log("Form action is been change to => " + this.href) form.submit(); e.preventDefault(); }); }); form.addEventListener("submit",function(e){ e.preventDefault(); console.log("The form has been submit"); }); 

 <form action="/a"> <input type=text name=somedata> <input type=submit> <a href="/b">my first link</a> <a href="/c">link</a> <a href="/d">link</a> <a href="/e">link</a> </form> 

Answer 3

 var form = document.querySelector("form"); var allA = document.querySelectorAll("a"); allA.forEach(function(el){ el.addEventListener("click",function(e){ form.submit(); e.preventDefault(); }); }); form.addEventListener("submit",function(e){ e.preventDefault(); console.log("The form has been submit"); }); 

 <form action="/a"> <input type=text name=somedata> <input type=submit> <a href="/b">my first link</a> <a href="/c">link</a> <a href="/d">link</a> <a href="/e">link</a> </form> 

Answer 4

首先刪除提交按鈕。

$("#formId a").click(function(){
   var currentHref = $(this).attr("href");
   $("#formId").attr("action",currentHref);
   $("#formId").submit();
});