如何通过单击链接提交JavaScript表单？ [英] How to submit a form with JavaScript by clicking a link?

问题描述

而不是提交按钮我有一个链接：

 < form> 
 
< a href =＃>提交< / a> 
 
< / form> 
  

我可以在单击时提交表单吗？
<最好的方法

最好的方法是插入一个合适的输入标签：

 < input type =submitvalue =submit/> 
  

最好的JS方式

 < form id =form-id> 
< button id =your-id>提交< / button> 
< / form> 
  

var form = document。的getElementById（ 形式-ID）;

document.getElementById（your-id）。addEventListener（click，function（）{
form.submit（）;
}）;


将后面的JavaScript代码用 DOMContentLoaded 事件（仅选择加载以获得后退如果你还没有这样做：

  window.addEventListener（DOMContentLoaded，function（） {
 var form = document .... //复制最后一个代码块！
}）; 
  

简单而不可重复的方式（前面的答案）

为链接添加一个 onclick 属性并将一个 id 添加到表单中：

 < form id =form-id> 
 
< a href =＃onclick =document.getElementById（'form-id'）。submit（）;>提交< / a> 
 
< / form> 
  

所有方式

无论您选择何种方式，您最终会调用 formObject.submit（）（其中 formObject 是的DOM对象>< form> tag）。

您还必须绑定这样一个事件处理函数，它调用 formObject。 submit（），所以当用户点击特定的链接或按钮时会被调用。有两种方法：

• 建议：将事件侦听器绑定到DOM对象。 p>
  
  

    // 1.获取对< form>的引用。 
   //这也可以通过设置< form name =blub>：
   // var form = document.forms.blub; 
   
   var form = document.getElementById（form-id）; 
   
   
   // 2.获取对我们首选元素的引用（链接/按钮，见下文）和
   //为click事件添加事件侦听器。 
   document.getElementById（your-id）。addEventListener（click，function（）{
   form.submit（）; 
  }）; 
    




• 不建议：插入内嵌JavaScript。有几个理由不推荐这种技术。一个主要的观点是你将标记（HTML）和脚本（JS）混合在一起。
  $ b

   < a href =＃onclick =document.getElementById（'form- ID'）提交（）;>提交< / A> 
   
  < button onclick =document.getElementById（'form-id'）。submit（）;> submit< / button> 
    

现在，我们来到您必须决定触发submit（）调用的UI元素。

1. 一个按钮

    <按钮>提交< / button> 
     




2. 链接
   
   

    < a href =＃>提交< / a> 
     

应用上述技巧以添加事件监听器。

Instead of a submit button I have a link:

<form>

  <a href="#"> submit </a>

</form>

Can I make it submit the form when it is clicked?

解决方案

The best way

The best way is to insert an appropriate input tag:

<input type="submit" value="submit" />

The best JS way

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

Enclose the latter JavaScript code by an DOMContentLoaded event (choose only load for backward compatiblity) if you haven't already done so:

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

The easy, not recommandable way (the former answer)

Add an onclick attribute to the link and an id to the form:

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

All ways

Whatever way you choose, you have call formObject.submit() eventually (where formObject is the DOM object of the <form> tag).

You also have to bind such an event handler, which calls formObject.submit(), so it gets called when the user clicked a specific link or button. There are two ways:

• Recommended: Bind an event listener to the DOM object.

  // 1. Acquire a reference to our <form>.
  //    This can also be done by setting <form name="blub">:
  //       var form = document.forms.blub;
  
  var form = document.getElementById("form-id");
  
  
  // 2. Get a reference to our preferred element (link/button, see below) and
  //    add an event listener for the "click" event.
  document.getElementById("your-id").addEventListener("click", function () {
    form.submit();
  });
  

• Not recommended: Insert inline JavaScript. There are several reasons why this technique is not recommendable. One major argument is that you mix markup (HTML) with scripts (JS). The code becomes unorganized and rather unmaintainable.

  <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>
  

Now, we come to the point at which you have to decide for the UI element which triggers the submit() call.

1. A button

   <button>submit</button>
   

2. A link

   <a href="#">submit</a>
   

Apply the aforementioned techniques in order to add an event listener.

这篇关于如何通过单击链接提交JavaScript表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！