Làm thế nào để gửi biểu mẫu bằng JavaScript bằng cách nhấp vào liên kết?

Thay vì nút gửi, tôi có một liên kết:

<form>

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

</form>

Tôi có thể làm cho nó gửi biểu mẫu khi nó được nhấp vào không?

Cách tốt nhất

Cách tốt nhất là chèn một thẻ đầu vào thích hợp:

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

Cách JS tốt nhất

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

Đính kèm mã JavaScript thứ hai bằng một DOMContentLoadedsự kiện (chỉ chọn loadcho khả năng tương thích ngược ) nếu bạn chưa làm như vậy:

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

Cách dễ dàng, không đáng chê trách (câu trả lời trước đây)

Thêm onclickthuộc tính vào liên kết và một thuộc tính vào idbiểu mẫu:

<form id="form-id">

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

</form>

Tất cả các cách

Dù bạn chọn cách nào thì formObject.submit()cuối cùng bạn cũng có lệnh gọi ( formObjectđối tượng DOM của <form>thẻ ở đâu).

Bạn cũng phải ràng buộc một trình xử lý sự kiện formObject.submit()như vậy, nó sẽ gọi, vì vậy nó sẽ được gọi khi người dùng nhấp vào một liên kết hoặc nút cụ thể. Có hai cách:

• Khuyến nghị: Liên kết trình nghe sự kiện với đối tượng DOM.

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

• Không nên: Chèn JavaScript nội tuyến. Có một số lý do tại sao kỹ thuật này không được khuyến khích. Một lập luận chính là bạn kết hợp đánh dấu (HTML) với tập lệnh (JS). Mã trở nên vô tổ chức và không thể hiểu được.

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

Bây giờ, chúng ta đã đến thời điểm mà bạn phải quyết định phần tử giao diện người dùng sẽ kích hoạt lệnh gọi submit ().

1. Một nut bâm

   <button>submit</button>

2. Đường dẫn

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

Áp dụng các kỹ thuật đã nói ở trên để thêm trình nghe sự kiện.

Nếu bạn sử dụng jQuery và cần một giải pháp nội tuyến, điều này sẽ hoạt động rất tốt;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

Ngoài ra, bạn có thể muốn thay thế

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

với

<a href="javascript:void(0);">text</a>

vì vậy người dùng không cuộn lên đầu trang của bạn khi nhấp vào liên kết.

Bạn có thể cung cấp cho biểu mẫu và liên kết một số id và sau đó đăng ký onclicksự kiện của liên kết và submitbiểu mẫu:

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

và sau đó:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

Tôi khuyên bạn nên sử dụng nút gửi để gửi biểu mẫu vì nó tôn trọng ngữ nghĩa đánh dấu và nó sẽ hoạt động ngay cả với những người dùng bị vô hiệu hóa javascript.

HTML & CSS - Không có giải pháp Javascript

Làm cho nút của bạn xuất hiện giống như một liên kết Bootstrap

HTML:

<form>
    <button class="btn-link">Submit</button>
</form>

CSS:

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

điều này hoạt động tốt mà không cần bất kỳ chức năng đặc biệt nào. Viết với php cũng dễ dàng hơn nhiều.<input onclick="this.form.submit()"/>

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

document.getElementById("theForm").submit();

Nó hoạt động hoàn hảo trong trường hợp của tôi.

bạn cũng có thể sử dụng nó trong chức năng như,

function submitForm()
{
     document.getElementById("theForm").submit();
} 

Đặt "theForm" làm ID biểu mẫu của bạn. Xong rôi.

đây là giải pháp tốt nhất cho câu hỏi của bạn: bên trong biểu mẫu, bạn có mã sau:

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

trong tệp CSS, hãy làm như sau:

button{
  display: none;
}

trong JS, bạn làm điều này:

$("a").click(function(){
   $("button").trigger("click");
})

Của bạn đây.