Javascript:通过单击表单中的任何锚标记提交表单

Javascript: Submit form by clicking on any anchor tag within a form

本文关键字：表单 任何锚 提交 单击 Javascript      更新时间：2023-09-26

我有一个表单和许多链接:

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

如果用户按下submit，表单应该像往常一样提交到/a(所以没有更改)。

但是当用户单击/b时，而不是丢弃一些数据并向/b发送get请求，我想向/b发送POST请求，就像表单是<form action=/b>一样。

是否有可能对页面上的所有超文本锚自动执行此操作，以便它不仅可以与/b一起工作，还可以与/c，/d和/e一起工作?

纯Javascript和jQuery都可以

将表单的action更改为所选<a>的href，然后提交表单

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


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>

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>

首先删除提交按钮。

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