Cómo hacer un enlace para enviar un formulario

Question

¿Cuál es la mejor manera de obtener un ancla regular (<a href="...">) para enviar el formulario en el que está incrustado cuando se hace clic?

<form> 
    <ul> 
     <li> 
      <p> 
       The link could be <span>embedded <a href="" onclick="?">at any level</a></span> 
       in the form, so "this.parentNode.parentNode..." is no good. :(
      </p> 
     </li> 
    </ul> 
</form> 

sé que la forma más fácil usando jQuery sería

$('#myLink').click(function() { 
    $(this).parents('form:first').submit(); 
}); 

... pero estoy tratando de encontrar una manera de hacer esto sin necesidad de utilizar una biblioteca.

---

Editar: estoy realmente tratando de encontrar un método que no requiere el conocimiento de la forma (por ejemplo: su nombre, identificación, etc.). Esto sería similar a cómo se puede poner esto en un elemento de entrada: <input onclick="this.form.submit()" />

Answer 1

recorra los nodos principales hasta que encuentre un elemento con nombre de etiqueta que indique que se trata de un formulario.

<form> 
    <ul> 
     <li> 
      <p> 
       The link could be <span>embedded <a href="" onclick="get_form(this).submit(); return false">at any level</a></span> 
       in the form, so "this.parentNode.parentNode..." is no good. :(
      </p> 
     </li> 
    </ul> 
</form> 



<script type="text/javascript"> 
    //<![CDATA[ 
    function get_form(element) 
    { 
     while(element) 
     { 
      element = element.parentNode 
      if(element.tagName.toLowerCase() == "form") 
      { 
       //alert(element) //debug/test 
       return element 
      } 
     } 
     return 0; //error: no form found in ancestors 
    } 
    //]]> 
</script> 

Answer 2

¿Por qué no utilizar un elemento <input> o <button> y simplemente ajustar con CSS? Entonces funciona sin Javascript y, por lo tanto, es más confiable.

Answer 3

La forma más sencilla de hacerlo sería utilizar algo como esto:

<a href="#" onclick="document.formName.submit();"> 

Answer 4

mejor manera es

<a href="#" onclick="document.forms[0].submit();return false;">Submit Form</a> 

sin embargo es probable que no quiere hacer eso, ya que hará imposible la presentación para usuarios con JS deshabilitado

Answer 5

similares a solutionhasen j, pero utilizando una función recursiva para recorrer el documento.

function findParentForm(element) { 
    if (element.parentNode.tagName.toLowerCase() == 'html') { 
     throw('No Parent Form Found'); 
    } else if (element.parentNode.tagName.toLowerCase() == 'form') { 
     return element.parentNode; 
    } else { 
     return findParentForm(element.parentNode); 
    } 
} 

y la forma, por supuesto ...

<form> 
    <ul> 
     <li> 
      <p> 
       The link could be <span>embedded <a href="" onclick="findParentForm(this).submit(); return false;">at any level</a></span> 
       in the form, so "this.parentNode.parentNode..." is no good. :(
      </p> 
     </li> 
    </ul> 
</form> 

Answer 6

Personalmente, yo prefiero usar el protocolo javascript: en el href en lugar de utilizar onclick caso ... Si hay algún problema con este , Me complacería que me corrigieran.

Si sólo tiene un formulario en la página, un caso bastante común, puede hacerlo simplemente:

<li><p><a href="javascript:document.forms[0].submit();">Click here to submit</a></p></li> 

De lo contrario, burbujeando los elementos que el anterior es una solución.

[EDIT] Guardo la respuesta, incluso si es downvoted, como referencia (la información dada en los comentarios es interesante).
Otro inconveniente de la técnica de protocolo: no genera un objeto de evento. No es un problema en el fragmento que di, pero molesto cuando llamo a un controlador.

Answer 7

Debe utilizar un botón (y la entrada o el botón de tipo enviar) para enviar un formulario.

Si necesita alguna característica adicional que tenga un enlace pero los elementos de entrada no tienen (como el vuelo estacionario), entonces es más fácil implementar aquellos con javascript, que el envío del formulario.También se degradará más elegantemente para las personas sin javascript.

Incluso puede resolver esto con código específico MSIE (y uso: flotar durante otros navegadores):

<input type="submit" value="send" class="linkstyles" 
     onmouseenter="this.className+=' hovered';" 
     onmouseleave="this.className=this.className.replace(/(^|\s)hovered(\s|$)/g, '');" /> 

Si todavía realmente quiere hacerlo al revés, entonces aquí es cómo yo no lo haría:

function submitByLink (elm) { 
    // Move up domtree until we hit no parentNode or find a form 
    while (elm) { 
    elm = elm.parentNode; 
    if (elm && elm.tagName == 'FORM') { 
     // First chance we get, we submit the form and exit. 
     // The return on the node it kills the event bubble by forwarding false to browser 
     elm.submit(); 
     return false; 
    } 
    } 
    // If we got here then there is no form parent and user will be sent to link href 
} 

Y el HTML se vería así:

<a href="aPageExplainingWhyYouNeedJavascript.html" onclick="return submitByLink(this);">Send</a> 

Answer 8

$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});}); 

Usando Jquery, verificamos que el documento se haya cargado, luego esperamos que se haga clic en una etiqueta de anclaje con una identificación de 'enviar'. A continuación, envía el formulario con un id de 'registro'. Cambiar 'enviar' y 'registrarse' para que se adapte.

Answer 9

Estoy usando esto ahora cada vez. Debido a que el botón de enviar en mi proyecto por lo general un enlace (por recapitulación de una imagen o CSS), por lo que utilizan este:

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

No se olvide que está usando jQuery también.

Puede envolver su propia función. Por lo tanto, siempre envía el elemento padre (formulario) en ese enlace.

Answer 10

Siempre que el enlace sea un elemento directo del formulario, puede usarlo. No necesita saber el nombre del formulario. Funciona al menos en Firefox y Chrome.

<form action=""> 
    <a href="" onclick="parentNode.submit();return false;">Submit</a> 
</form> 

quirksmode.org me dice x.parentNode funciona en todos los navegadores, por lo que este debe trabajo en todas partes.

Answer 11

Para una continuación de la respuesta anterior How best to make a link submit a form, la forma en que he estado haciendo recientemente se

<button class="submit" type="submit"><a href="#" onclick="return false;">Link Text</a></button> 

y CSS

.submit { 
    background: transparent; 
    border:0; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    cursor:pointer; 
} 
.submit a 
{ 
    color: #CEA249; 
} 
.submit:hover a 
{ 
    color: white; 
} 

Me envió este ya que no pude encontrar un ejemplo de html/css hecho. Si alguien tiene alguna mejora se actualizará.

Answer 12

su vez un botón de enviar en un enlace mediante el marcado de esta manera:

<input id="submitlink" type="submit" value="Text" /> 

y CSS como esto:

input#submitlink { 
    background: transparent; 
    border: 0; 
    cursor:pointer; 
    margin: 0; 
    padding: 0; 
    color: #034af3; 
    text-decoration: underline; 
} 

input#submitlink:visited { 
    color: #505abc; 
} 

input#submitlink:hover { 
    color: #1d60ff; 
    text-decoration: none; 
} 

input#submitlink:active { 
    color: #12eb87; 
} 

Answer 13

<form> 
<input type="submit" id="submit" style="display:none;"/> 
<a href="#" onclick="$('#submit').click();">Sample Submit Trick</a> 
</form>