Come inviare un modulo con JavaScript facendo clic su un collegamento?

Invece di un pulsante di invio ho un collegamento:

<form>

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

</form>

Posso fargli inviare il form quando viene cliccato?

Il modo migliore

Il modo migliore è inserire un tag di input appropriato:

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

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

Racchiudi quest'ultimo codice JavaScript con un DOMContentLoadedevento (scegli solo loadper compatibilità con le versioni precedenti ) se non l'hai già fatto:

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

Il modo facile, non raccomandabile (la prima risposta)

Aggiungi un onclickattributo al collegamento e un idal modulo:

<form id="form-id">

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

</form>

In tutti i modi

In qualunque modo tu scelga, formObject.submit()alla fine avrai una chiamata (dov'è formObjectl'oggetto DOM del <form>tag).

È inoltre necessario associare un gestore di eventi di questo tipo, che chiama formObject.submit(), quindi viene chiamato quando l'utente fa clic su un collegamento o un pulsante specifico. Ci sono due modi:

• Consigliato: associa un listener di eventi all'oggetto 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();
  });
  

• Non consigliato: inserire JavaScript in linea. Ci sono diversi motivi per cui questa tecnica non è raccomandabile. Uno dei principali argomenti è che mescoli markup (HTML) con script (JS). Il codice diventa disorganizzato e piuttosto irraggiungibile.

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

Ora, arriviamo al punto in cui devi decidere per l'elemento UI che attiva la chiamata submit ().

1. Un bottone

   <button>submit</button>

2. Un collegamento

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

Applicare le tecniche di cui sopra per aggiungere un listener di eventi.

Se usi jQuery e hai bisogno di una soluzione inline, questo funzionerebbe molto bene;

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

Inoltre, potresti voler sostituire

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

con

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

in modo che l'utente non scorra fino all'inizio della pagina quando fa clic sul collegamento.

Potresti dare al modulo e al link alcuni ID e poi iscriverti onclickall'evento del link e submitdel modulo:

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

e poi:

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

Ti consiglio di utilizzare un pulsante di invio per inviare i moduli poiché rispetta la semantica del markup e funzionerà anche per gli utenti con javascript disabilitato.

HTML e CSS - Nessuna soluzione Javascript

Fai apparire il tuo pulsante come 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;

}

funziona bene senza alcuna funzione speciale necessaria. È molto più facile scrivere anche con 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();

Funziona perfettamente nel mio caso.

puoi usarlo in funzione anche come,

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

Imposta "theForm" come ID modulo. E 'fatto.

ecco la migliore soluzione alla tua domanda: all'interno del form hai questi codici:

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

nel file CSS, fai questo:

button{
  display: none;
}

in JS fai questo:

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

Ecco qua.