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更改为所选href的{​​{1}}，然后提交表单

<a>

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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