Existe-t-il une meilleure solution jQuery que this.form.submit(); ?

Question

Je veux déclencher l'événement submit du formulaire dans lequel se trouve l'élément actuel. Je connais une méthode qui fonctionne parfois :

this.form.submit();

Je me demande s'il existe une meilleure solution, éventuellement en utilisant jQuery, car je ne suis pas sûr à 100% que la méthode fonctionne dans tous les navigateurs.

Edit :

La situation que je rencontre est la suivante :

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

Je veux pouvoir soumettre le formulaire en cas de changement de l'adresse de l'utilisateur. <select> .

Ce que je recherche, c'est une solution qui fonctionne sur n'importe quel champ de n'importe quel formulaire sans connaître l'identifiant ou le nom du formulaire. $('form:first') y $('form') ne fonctionnera pas car le formulaire pourrait être le troisième de la page. De plus, j'utilise déjà jQuery sur le site, donc utiliser un peu de jQuery n'est pas un gros problème.

Existe-t-il un moyen de faire en sorte que jQuery récupère le formulaire dans lequel se trouve l'entrée/sélection/textarea ?

Answer 1

Je pense que ce que vous cherchez est quelque chose comme ça :

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

Par exemple, pour gérer l'événement onchange, vous auriez ceci :

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

Si, pour une raison quelconque, vous n'utilisez pas jQuery 1.3 ou plus, vous pouvez appeler parents au lieu de closest .

Answer 2

this.form.submit();

C'est probablement votre meilleure chance. Surtout si vous n'utilisez pas déjà jQuery dans votre projet, il n'est pas nécessaire de l'ajouter (ou toute autre bibliothèque JS) juste dans ce but.

Answer 3

Vous pouvez toujours JQuery-ize votre form.submit, mais cela peut appeler la même chose :

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

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

Vous pouvez également joindre à l'événement submit, mais il s'agit là d'un concept différent.

Answer 4

Similaire à Matthew réponse, je viens de découvrir que vous pouvez faire ce qui suit :

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

Faux. Le problème de l'utilisation de la fonctionnalité parent est que le champ doit se trouver immédiatement dans le formulaire pour fonctionner (pas dans les champs, les étiquettes, etc.).

Je suis corrigé : parent s (avec un s) fonctionne également. Merci à Paolo de me l'avoir signalé.

Answer 5

Votre question est quelque peu confuse dans la mesure où vous n'expliquez pas ce que vous entendez par "élément courant".

Si vous avez plusieurs formulaires sur une page avec toutes sortes d'éléments de saisie et un bouton de type "submit", le fait d'appuyer sur "enter" après avoir rempli l'un de ses champs déclenchera la soumission de ce formulaire. Vous n'avez pas besoin de Javascript dans ce cas.

Mais si vous avez plusieurs boutons "submit" sur un formulaire et aucune autre entrée (par exemple, les boutons "edit row" et/ou "delete row" dans un tableau), alors la ligne que vous avez postée pourrait être la façon de faire.

Une autre solution (sans Javascript) pourrait être de donner des valeurs différentes à tous vos boutons (qui sont de type "submit"). Comme ceci :

<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>

Lorsque vous cliquez sur un bouton, seul le formulaire contenant le bouton sera soumis, et seule la valeur du bouton sur lequel vous avez cliqué sera envoyée (avec les autres valeurs d'entrée).

Ensuite, sur le serveur, il suffit de lire la valeur de la variable "myaction" et de décider ce qu'il faut faire.