Bagaimana cara mengirimkan formulir dengan JavaScript dengan mengklik link?

Alih-alih tombol kirim, saya memiliki tautan:

<form>

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

</form>

Bisakah saya membuatnya mengirimkan formulir saat diklik?

Jalan terbaik

Cara terbaik adalah dengan memasukkan tag masukan yang sesuai:

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

Cara JS terbaik

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

Lampirkan kode JavaScript terakhir dengan sebuah DOMContentLoadedperistiwa (pilih hanya loaduntuk kompatibilitas mundur ) jika Anda belum melakukannya:

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

Cara yang mudah, tidak dapat diatur (jawaban sebelumnya)

Tambahkan onclickatribut ke tautan dan idke formulir:

<form id="form-id">

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

</form>

Semua cara

Apapun cara yang Anda pilih, pada formObject.submit()akhirnya Anda akan dipanggil (di mana formObjectobjek DOM dari <form>tag).

Anda juga harus mengikat pengendali kejadian tersebut, yang memanggil formObject.submit(), sehingga dipanggil ketika pengguna mengklik tautan atau tombol tertentu. Ada dua cara:

• Direkomendasikan: Ikat event listener ke objek 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();
  });

• Tidak disarankan: Sisipkan JavaScript sebaris. Ada beberapa alasan mengapa teknik ini tidak direkomendasikan. Salah satu argumen utamanya adalah Anda mencampur markup (HTML) dengan skrip (JS). Kode menjadi tidak teratur dan agak tidak dapat dikelola.

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

Sekarang, kita sampai pada titik di mana Anda harus memutuskan elemen UI yang memicu panggilan submit ().

1. Sebuah tombol

   <button>submit</button>

2. Sebuah link

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

Terapkan teknik yang disebutkan di atas untuk menambahkan pendengar acara.

Jika Anda menggunakan jQuery dan membutuhkan solusi inline, ini akan bekerja dengan sangat baik;

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

Juga, Anda mungkin ingin mengganti

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

dengan

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

agar pengguna tidak menggulir ke bagian atas halaman Anda saat mengklik link.

Anda dapat memberikan formulir dan tautan beberapa id dan kemudian berlangganan untuk onclickacara tautan dan submitformulir:

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

lalu:

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

Saya akan merekomendasikan Anda menggunakan tombol kirim untuk mengirimkan formulir karena itu menghormati semantik markup dan itu akan berfungsi bahkan untuk pengguna dengan javascript dinonaktifkan.

HTML & CSS - Tanpa Solusi Javascript

Buat tombol Anda muncul seperti tautan 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;

}

ini bekerja dengan baik tanpa memerlukan fungsi khusus. Jauh lebih mudah untuk menulis dengan php juga.<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();

Ini bekerja dengan sempurna dalam kasus saya.

Anda dapat menggunakannya dalam fungsi juga seperti,

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

Tetapkan "theForm" sebagai ID formulir Anda. Selesai.

inilah solusi terbaik untuk pertanyaan Anda: di dalam formulir Anda memiliki kode ini:

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

di file CSS, lakukan ini:

button{
  display: none;
}

di JS Anda melakukan ini:

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

Ini dia.