web-dev-qa-db-fra.com

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

Je souhaite déclencher l'événement submit du formulaire dans lequel se trouve l'élément actuel. Une méthode que je connais qui fonctionne parfois est la suivante:

this.form.submit();

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

Modifier:

La situation que j'ai 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 lors du changement du <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') et $('form') ne fonctionneront 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 une grosse affaire.

Alors, y at-il un moyen pour que jQuery récupère le formulaire dans lequel se trouvent les entrées/sélections/textarea?

javascriptjqueryformssubmit
43
Darryl Hein

Je pense que ce que vous recherchez ressemble à ceci:

$(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 version 1.3 ou ultérieure, vous pouvez appeler parents au lieu de closest.

104
Matthew Crumley
this.form.submit();

C'est probablement votre meilleur pari. Surtout si vous n'utilisez pas déjà jQuery dans votre projet, il n'est pas nécessaire de l'ajouter (ou de toute autre bibliothèque JS) uniquement à cette fin.

24
Beau Simensen

Vous pouvez toujours JQuery-ize votre formulaire. Soumettre, mais il peut simplement 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 attacher fonctions à l'événement submit, mais il s'agit d'un concept différent.

3
patridge

J'ai trouvé que l'utilisation de jQuery était la meilleure solution.

$(this.form).submit()

L'utilisation de cette instruction jquery plugins (par exemple, jquery form plugin ) fonctionne correctement et la surcharge de traversée de jquery DOM est réduite.

3
Mikus

Semblable à Matthew's answer, je viens de découvrir que vous pouvez effectuer les opérations suivantes:

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

Wrong: le problème avec l'utilisation de la fonctionnalité parent est que le champ doit être immédiatement dans le formulaire pour fonctionner (pas dans tds, libellés, etc.).

Je suis corrigé: parents (avec un s) fonctionne également. Thxs Paolo pour l'avoir signalé.

3
Darryl Hein

Votre question est quelque peu déroutante en ce sens que vous n'expliquez pas ce que vous entendez par "élément actuel".

Si vous avez plusieurs formulaires sur une page avec toutes sortes d'éléments d'entrée et un bouton de type "submit", 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 ici.

Mais si vous avez plusieurs boutons "soumettre" sur un formulaire et aucune autre entrée (par exemple, des boutons "modifier une ligne" et/ou "supprimer une ligne" dans le tableau), la ligne que vous avez postée peut être le moyen de le faire. 

Une autre façon (pas de Javascript nécessaire) pourrait être de donner des valeurs différentes à tous vos boutons (qui sont du type "submit"). Comme ça:

<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 est soumis et seule la valeur du bouton que vous avez frappé est envoyée (avec les autres valeurs d'entrée).

Ensuite, sur le serveur, il vous suffit de lire la valeur de la variable "myaction" et de décider quoi faire.

1
Marko Dumic

Dans JQuery, vous pouvez appeler

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

Je ne sais pas si c'est beaucoup mieux. Je pense que form.submit (); est assez universel.

0
Brig Lamoreaux
<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'];

-->
0
Zhaipeng