¿Cómo enviar un formulario con JavaScript haciendo clic en un enlace?

En lugar de un botón de envío, tengo un enlace:

<form>

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

</form>

¿Puedo hacer que envíe el formulario cuando se hace clic en él?

La mejor manera

La mejor forma es insertar una etiqueta de entrada adecuada:

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

La mejor forma de 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();
});

Incluya el último código JavaScript junto a un DOMContentLoadedevento (elija solo loadpara compatibilidad con versiones anteriores ) si aún no lo ha hecho:

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

La forma fácil, no recomendable (la respuesta anterior)

Agregue un onclickatributo al enlace y un idal formulario:

<form id="form-id">

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

</form>

Todas las formas

Cualquiera que sea la forma que elija, tendrá que llamar formObject.submit()eventualmente (donde formObjectestá el objeto DOM de la <form>etiqueta).

También debe vincular dicho controlador de eventos, que llama formObject.submit(), por lo que se llama cuando el usuario hace clic en un enlace o botón específico. Hay dos maneras:

• Recomendado: vincule un detector de eventos al objeto 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();
  });
  

• No recomendado: inserte JavaScript en línea. Hay varias razones por las que esta técnica no es recomendable. Un argumento importante es que mezcla el marcado (HTML) con los scripts (JS). El código se vuelve desorganizado y bastante inmanejable.

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

Ahora, llegamos al punto en el que debe decidir el elemento de la interfaz de usuario que activa la llamada de submit ().

1. Un botón

   <button>submit</button>

2. Un enlace

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

Aplique las técnicas antes mencionadas para agregar un detector de eventos.

Si usa jQuery y necesita una solución en línea, esto funcionaría muy bien;

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

Además, es posible que desee reemplazar

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

con

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

para que el usuario no se desplace hasta la parte superior de su página al hacer clic en el enlace.

Puede darle al formulario y al enlace algunos identificadores y luego suscribirse al onclickevento del enlace y submitel formulario:

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

y entonces:

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

Le recomendaría que use un botón de envío para enviar formularios, ya que respeta la semántica de marcado y funcionará incluso para usuarios con JavaScript desactivado.

HTML y CSS: sin solución de JavaScript

Haga que su botón aparezca como un enlace de 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;

}

esto funciona bien sin necesidad de ninguna función especial. También es mucho más fácil de escribir 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();

Funciona perfecto en mi caso.

puedes usarlo en función también como,

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

Establezca "theForm" como su ID de formulario. Está hecho.

aquí está la mejor solución a su pregunta: dentro del formulario tiene este código:

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

en el archivo CSS, haga esto:

button{
  display: none;
}

en JS haces esto:

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

Ahí tienes.