วิธีการส่งแบบฟอร์มด้วย JavaScript โดยคลิกที่ลิงค์?

แทนที่จะเป็นปุ่มส่งฉันมีลิงค์:

<form>

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

</form>

ฉันสามารถส่งแบบฟอร์มเมื่อคลิกได้หรือไม่?

วิธีที่ดีที่สุด

วิธีที่ดีที่สุดคือการใส่แท็กอินพุตที่เหมาะสม:

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

วิธี JS ที่ดีที่สุด

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

ใส่โค้ด JavaScript หลังด้วยDOMContentLoadedเหตุการณ์ (เลือกเฉพาะloadสำหรับความเข้ากันได้แบบย้อนหลัง ) หากคุณยังไม่ได้ดำเนินการ:

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

วิธีที่ง่ายไม่แนะนำ (คำตอบเดิม)

เพิ่มonclickแอตทริบิวต์ให้กับลิงก์และidในแบบฟอร์ม:

<form id="form-id">

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

</form>

ทุกวิธี

ไม่ว่าคุณจะเลือกวิธีใดformObject.submit()ในที่สุดคุณก็มีการเรียกใช้( formObjectวัตถุ DOM ของ<form>แท็กอยู่ที่ไหน)

นอกจากนี้คุณยังต้องผูกตัวจัดการเหตุการณ์ดังกล่าวซึ่งเรียกใช้formObject.submit()ดังนั้นจึงถูกเรียกเมื่อผู้ใช้คลิกลิงก์หรือปุ่มใดปุ่มหนึ่ง มีสองวิธี:

• แนะนำ:ผูกตัวฟังเหตุการณ์กับวัตถุ 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();
  });

• ไม่แนะนำ:แทรก JavaScript แบบอินไลน์ มีสาเหตุหลายประการที่ไม่สามารถแนะนำเทคนิคนี้ได้ อาร์กิวเมนต์สำคัญอย่างหนึ่งคือคุณผสมมาร์กอัป (HTML) กับสคริปต์ (JS) รหัสจะไม่เป็นระเบียบและไม่สามารถเข้าถึงได้

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

ตอนนี้เรามาถึงจุดที่คุณต้องตัดสินใจสำหรับองค์ประกอบ UI ที่ทริกเกอร์การเรียก submit ()

1. ปุ่ม

   <button>submit</button>

2. ลิงค์

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

ใช้เทคนิคดังกล่าวเพื่อเพิ่มผู้ฟังเหตุการณ์

หากคุณใช้ jQuery และต้องการโซลูชันแบบอินไลน์สิ่งนี้จะใช้ได้ดีมาก

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

นอกจากนี้คุณอาจต้องการแทนที่

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

กับ

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

ดังนั้นผู้ใช้จะไม่เลื่อนไปที่ด้านบนสุดของหน้าเว็บของคุณเมื่อคลิกลิงก์

คุณสามารถให้แบบฟอร์มและลิงค์รหัสจากนั้นสมัครเข้าonclickร่วมกิจกรรมของลิงค์และsubmitแบบฟอร์ม:

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

แล้ว:

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

ฉันขอแนะนำให้คุณใช้ปุ่มส่งเพื่อส่งแบบฟอร์มเนื่องจากเป็นไปตามความหมายของมาร์กอัปและจะใช้ได้แม้กระทั่งกับผู้ใช้ที่ปิดใช้จาวาสคริปต์

HTML & CSS - ไม่มีโซลูชัน Javascript

ทำให้ปุ่มของคุณปรากฏเป็นลิงค์ 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;

}

ทำงานได้ดีโดยไม่ต้องใช้ฟังก์ชันพิเศษใด ๆ เขียนง่ายกว่าด้วย php เช่นกัน<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();

มันใช้งานได้ดีในกรณีของฉัน

คุณสามารถใช้มันในฟังก์ชันเช่น

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

ตั้งค่า "theForm" เป็นรหัสแบบฟอร์มของคุณ มันจบแล้ว.

นี่คือทางออกที่ดีที่สุดสำหรับคำถามของคุณ: ภายในแบบฟอร์มคุณมีรหัสเหล่านี้:

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

ในไฟล์ CSS ให้ดำเนินการดังนี้:

button{
  display: none;
}

ใน JS คุณทำสิ่งนี้:

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

ไปเลย