Bir bağlantıya tıklayarak JavaScript içeren bir form nasıl gönderilir?

Gönder düğmesi yerine bir bağlantım var:

<form>

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

</form>

Tıklandığında formu göndermesini sağlayabilir miyim?

En iyi yol

En iyi yol, uygun bir giriş etiketi eklemektir:

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

En iyi JS yolu

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

Henüz yapmadıysanız , ikinci JavaScript kodunu bir DOMContentLoadedolayla çevreleyin (yalnızca geriye dönük uyumlulukload için seçin ):

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

Kolay, tavsiye edilemeyen yol (eski cevap)

onclickBağlantıya ve idforma bir öznitelik ekleyin :

<form id="form-id">

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

</form>

Tüm yollar

Hangi yolu seçerseniz seçin, formObject.submit()sonunda aramanız olur ( etiketin formObjectDOM nesnesi nerede <form>).

Ayrıca, arama yapan böyle bir olay işleyicisini bağlamanız gerekir formObject.submit(), böylece kullanıcı belirli bir bağlantı veya düğmeyi tıkladığında çağrılır. İki yol var:

• Önerilen: Bir olay dinleyicisini DOM nesnesine bağlayın.

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

• Önerilmez: Satır içi JavaScript ekleyin. Bu tekniğin tavsiye edilmemesinin birkaç nedeni vardır. Önemli bir argüman, işaretlemeyi (HTML) komut dosyalarıyla (JS) karıştırmanızdır. Kod örgütlenmemiş ve sürdürülemez hale gelir.

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

Şimdi, submit () çağrısını tetikleyen UI öğesine karar vermeniz gereken noktaya geldik.

1. Düğme

   <button>submit</button>

2. Bir bağlantı

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

Bir olay dinleyicisi eklemek için yukarıda belirtilen teknikleri uygulayın.

JQuery kullanıyorsanız ve satır içi bir çözüme ihtiyacınız varsa, bu çok iyi çalışacaktır;

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

Ayrıca, değiştirmek isteyebilirsiniz

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

ile

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

böylece kullanıcı, bağlantıyı tıkladığında sayfanızın en üstüne gitmez.

Formu ve bağlantıya bazı kimlikler verebilir ve ardından onclickbağlantı ve submitformun etkinliğine abone olabilirsiniz :

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

ve sonra:

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

Biçimlendirme anlamlarına saygı duyduğundan ve javascript devre dışı bırakılmış kullanıcılar için bile çalışacağından, formları göndermek için bir gönder düğmesi kullanmanızı tavsiye ederim.

HTML ve CSS - Javascript Çözümü Yok

Düğmenizin bir Bootstrap bağlantısı gibi görünmesini sağlayın

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;

}

bu, herhangi bir özel işlev gerekmeden iyi çalışır. Php ile yazmak çok daha kolay.<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();

Benim durumumda mükemmel çalışıyor.

bunu şu işlevlerde de kullanabilirsiniz:

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

Form kimliğiniz olarak "Form" u ayarlayın. Bitti.

İşte sorunuz için en iyi çözüm: formun içinde şu koda sahipsiniz:

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

CSS dosyasında şunu yapın:

button{
  display: none;
}

JS'de şunu yaparsınız:

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

İşte gidiyorsun.