Cum să trimiteți un formular cu JavaScript făcând clic pe un link? (Programare, Javascript, Html, Formulare, Hyperlink)

sandy a intrebat.

În loc de un buton de trimitere am un link:

<form>

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

</form>

Pot să-l fac să trimită formularul atunci când este apăsat?

Comentarii

  • Folosesc acest lucru pentru a integra un formular complet ascuns într-o pagină. Dar există întreruperi de linie înainte și după link. Vin ele de la elementul de formular? Și aș dori să deschid link-ul într-o nouă filă/pagină, target="_blank" nu pare să funcționeze. –  > Por JPT.
  • tl;dr <a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">Submit</a> –  > Por Josh Habdas.
8 răspunsuri
ComFreek

Cea mai bună cale

Cel mai bun mod este să inserați o etichetă de intrare corespunzătoare:

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

Cel mai bun mod 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();
});

Înconjurați codul JavaScript din urmă cu un DOMContentLoaded event (alegeți doar load pentru compatibilitate), dacă nu ați făcut-o deja:

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

Calea ușoară, nerecomandată (primul răspuns)

Adăugați un onclick la link și un atribut id la formular:

<form id="form-id">

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

</form>

Toate modalitățile

Oricare ar fi modalitatea pe care o alegeți, trebuie să apelați formObject.submit() în cele din urmă (unde formObject este obiectul DOM al elementului <form> tag).

De asemenea, trebuie să legați un astfel de gestionar de eveniment, care să apeleze formObject.submit(), , astfel încât acesta să fie apelat atunci când utilizatorul a făcut clic pe un anumit link sau buton. Există două modalități:

  • Recomandată: Legați un ascultător de evenimente la obiectul 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();
    });
    
  • Nerecomandat: Introduceți JavaScript în linie. Există mai multe motive pentru care această tehnică nu este recomandabilă. Un argument major este că amestecați marcajul (HTML) cu scripturile (JS). Codul devine neorganizat și mai degrabă imposibil de întreținut.

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

Acum, ajungem la punctul în care trebuie să vă decideți pentru elementul UI care declanșează apelul submit().

  1. Un buton

    <button>submit</button>
    
  2. Un link

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

Aplicați tehnicile menționate mai sus pentru a adăuga un ascultător de evenimente.

Comentarii

  • Am vrut să aplic acest lucru, dar nu pare să funcționeze la mine. Iată o încercare, jsfiddle.net/rbhr9wt2 –  > Por user1149244.
  • @user114924244 În panoul JavaScript de pe jsFiddle, faceți clic pe „JavaScript” și apoi setați „Tip de încărcare” la „Fără înfășurare – în <body>” (sau <head>). În mod implicit este setat la „onLoad”, după care DOMContentReady nu se mai declanșează. –  > Por ComFreek.
  • Notă: Dacă formularul dvs. are un buton cu attr name="submit", , se afișează submit() metoda formularului dvs. nu va fi accesibilă. –  > Por 2540625.
  • De ce nu este recomandată metoda onclick? –  > Por nu everest.
  • @nueverest An <input type="submit"> are mai multă semnificație semantică decât, să zicem, un <a href="#" onclick="...">. Acest lucru este deosebit de important în ceea ce privește cititoarele de ecran. Dacă trebuie să îl folosiți pe acesta din urmă, v-aș sugera să faceți uz de ARIA. –  > Por ComFreek.
Maurice

Dacă folosiți jQuery și aveți nevoie de o soluție inline, aceasta ar funcționa foarte bine;

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

De asemenea, ați putea dori să înlocuiți

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

cu

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

astfel încât utilizatorul să nu se deplaseze în partea de sus a paginii dvs. atunci când face clic pe link.

Comentarii

  • Cred că ar fi de preferat să o faceți într-un <span>text</span>. Nu este un link, iar href:javascript nu este bun. (în curând va deveni rău din următoarele motive de securitate … javascript inlined va fi interzis într-o bună zi. –  > Por Milche Patern.
  • Sunt de acord. Judecând după natura întrebării, am mers pe un răspuns simplu. Ceea ce fac eu personal este să folosesc href="#" și apoi selectez toate acele link-uri cu jquery și apelez la e.preventDefault() în click event handler astfel încât browserul să nu deruleze. –  > Por Maurice.
  • Eu personal prefer acest răspuns. Simplu și curat și ușor de implementat dacă pagina dvs. folosește JQuery. Foarte flexibil, de asemenea, deoarece am o pagină cu mai multe formulare pe ea și funcționează fără probleme. –  > Por John Contarino.
  • Se poate folosi href=”#” dacă se adaugă la sfârșitul apelului javascript onClick „return false” –  > Por Lumis.
Darin Dimitrov

Ați putea da formularului și linkului niște id-uri și apoi să vă abonați pentru onclick evenimentului linkului și submit formularului:

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

și apoi:

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

V-aș recomanda să folosiți un buton de trimitere pentru trimiterea formularelor, deoarece respectă semantica de marcare și va funcționa chiar și pentru utilizatorii cu javascript dezactivat.

chris

acest lucru funcționează bine fără a fi nevoie de vreo funcție specială. Mult mai ușor de scris și cu php. <input onclick="this.form.submit()"/>

Comentarii

  • OP a declarat prin apăsarea unui link nu element de intrare. –  > Por Rahil Wazir.
  • Poate funcționa acest lucru făcând ceva de genul <input onclick="this.form.submit()"> Some Text</input> –  > Por CodyBugstein.
Darren Murphy

HTML & CSS – Nici o soluție Javascript

Faceți ca butonul dvs. să apară ca un link 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;

}

Comentarii

  • Excelent, de ce să fie complicat când poate fi simplu. Totuși, cred că arată și mai bine dacă adăugați și „cursor: pointer;” în clasa hover, astfel încât cursorul să se transforme în mână. –  > Por Lumis.
Shashank
<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>

Comentarii

  • Poți să explici cum răspunsul tău răspunde de fapt la întrebare? Adaugă mai mult context, te rog. – user2140173
Chintan Thummar
document.getElementById("theForm").submit();

Funcționează perfect în cazul meu.

îl puteți utiliza și în funcție, de asemenea, ca,

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

Setați „theForm” ca ID al formularului dvs. Este gata.

iamwave007

iată cea mai bună soluție la întrebarea ta: în interiorul formularului ai aceste coduri:

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

în fișierul CSS, faceți acest lucru:

button{
  display: none;
}

în JS faci așa::

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

Poftim.