¿Existe una mejor solución jQuery para this.form.submit();?

Question

Quiero activar el evento de envío del formulario en el que se encuentra el elemento actual.Un método que sé que a veces funciona es:

this.form.submit();

Me pregunto si existe una solución mejor, posiblemente usando jQuery, ya que no estoy 100% seguro de que el método funcione en todos los navegadores.

Editar:

La situación que tengo es la siguiente:

<form method="get">
    <p><label>Field Label
        <select onchange="this.form.submit();">
            <option value="blah">Blah</option>
            ....
        </select></label>
    </p>
</form>

Quiero poder enviar el formulario sobre cambio de <select>.

Lo que estoy buscando es una solución que funcione en cualquier campo dentro de cualquier formulario sin conocer la identificación o el nombre del formulario. $('form:first') y $('form') no funcionará porque el formulario podría ser el tercero en la página.Además, ya estoy usando jQuery en el sitio, por lo que usar un poco de jQuery no es gran cosa.

Entonces, ¿hay alguna manera de que jQuery recupere el formulario en el que se encuentra el área de entrada/selección/texto?

Answer 1

Creo que lo que estás buscando es algo como esto:

$(field).closest("form").submit();

Por ejemplo, para manejar el evento onchange, tendría esto:

$(select your fields here).change(function() {
    $(this).closest("form").submit();
});

Si, por alguna razón, no está utilizando jQuery 1.3 o superior, puede llamar a parents en lugar de closest.

Answer 2

this.form.submit();

Esta es probablemente su mejor apuesta. Especialmente si aún no está utilizando jQuery en su proyecto, no es necesario agregarlo (o cualquier otra biblioteca JS) solo para este propósito.

Answer 3

Siempre puede JQuery-ize su formulario.submit, pero puede llamar al lo mismo:

$("form").submit(); // probably able to affect multiple forms (good or bad)

// or you can address it by ID
$("#yourFormId").submit();

También puede adjuntar funciones al evento de envío, pero ese es un concepto diferente.

Answer 4

Similar a Matthew's respuesta, acabo de descubrir que puede hacer lo siguiente:

$(this).closest('form').submit();

Incorrecto: El problema con el uso de la funcionalidad principal es que el campo debe estar inmediatamente dentro del formulario para funcionar (no dentro de tds, etiquetas, etc.).

Estoy corregido: padre s (con una s) también funciona. Gracias Paolo por señalar eso.

Answer 5

He descubierto que usando jQuery la mejor solución es

$(this.form).submit()

El uso de esta declaración jquery plugins (por ejemplo, jquery form plugin ) funciona correctamente y la sobrecarga de jquery DOM se minimiza .

Answer 6

Su pregunta es algo confusa porque no explica lo que quiere decir con " elemento actual " ;.

Si tiene varias formas en una página con todo tipo de elementos de entrada y un botón de tipo " submit " ;, luego presione " ingrese " al completar cualquiera de sus campos se activará el envío de ese formulario. No necesita ningún Javascript allí.

Pero si tiene múltiples " submit " botones en un formulario y ninguna otra entrada (por ejemplo, " editar fila " y / o " eliminar fila " botones en la tabla), entonces la línea que publicó podría ser manera de hacerlo.

Otra forma (no se necesita Javascript) podría ser dar diferentes valores a todos sus botones (que son del tipo " submit "). Así:

<form action="...">
    <input type="hidden" name="rowId" value="...">
    <button type="submit" name="myaction" value="edit">Edit</button>
    <button type="submit" name="myaction" value="delete">Delete</button>
</form>

Cuando haga clic en un botón, solo se enviará el formulario que contiene el botón, y solo se enviará el valor del botón que presionó (junto con otros valores de entrada).

Luego, en el servidor, solo lee el valor de la variable " myaction " y decide qué hacer.

Answer 7

En JQuery puedes llamar

$("form:first").trigger("submit")

No sé si eso es mucho mejor. Creo que form.submit (); es bastante universal.

Answer 8

<form method="get">
   <p><label>Field Label
      <select onchange="this.form.submit();">
         <option value="blah">Blah</option>
            ....
     </select>
     </label>
   </p>
    **<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
  </form>

<!-- 

   this.form.submit == this.form.elements['submit'];

-->