web-dev-qa-db-fra.com

Comment soumettre un formulaire sur Select Change

J'ai le formulaire suivant. J'aimerais que le fichier soit automatiquement envoyé via jQuery lorsque l'utilisateur effectue une sélection, sans qu'il soit nécessaire d'appuyer sur le bouton d'envoi. Comment puis-je faire cela?

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>

adeneo, j'ai essayé votre suggestion mais elle ne fonctionne toujours pas. Voici le code complet, quelque chose qui ne va pas?

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#cars').on('change', function() {
                this.form.submit();
            });
        });
        </script>
    </head>
    <body>
        <form action="" method="post">
            <select name="id" id="cars">
                <option value="">Select...</option>
                <option value="1">Toyota</option>
                <option value="2">Nissan</option>
                <option value="3">Dodge</option>
            </select> 
            <input type="submit" name="submit" value="Submit">
        </form>
    </body>
</html>
jqueryformsselectsubmit
14
Rick Helston

Il manque une valeur d'action à votre formulaire, ce qui empêche de le soumettre à la fin. Mais à la mi-temps, vous devriez corriger ce code:

$(document).ready(function() {
  $('#cars').on('change', function() {
     document.forms[myFormName].submit();
  });
});

Vous pouvez également soumettre un formulaire en déclenchant un événement de clic sur le bouton d'envoi:

$(document).ready(function() {
  $('#cars').on('change', function() {
    var $form = $(this).closest('form');
    $form.find('input[type=submit]').click();
  });
});
12
Sigismundus

Dans mon cas, cela fonctionne parfaitement et fonctionne avec ou sans le bouton d'envoi.

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
</form>

 <script type="text/javascript">

  jQuery(function() {
    jQuery('#car').change(function() {
        this.form.submit();
    });
});
</script>
5
Oskar

Je sais que c'est un peu vieux (et déjà répondu), mais aucune des réponses n'était aussi flexible que je le voulais, donc voici la solution que j'ai trouvée:

$(document).ready(function() {
   $('#cars').change(function() {
     var parentForm = $(this).closest("form");
     if (parentForm && parentForm.length > 0)
       parentForm.submit();
   });
});
2
Dan Sinclair

même vous pouvez faire celui-ci:

<form action="" method="post">
<select name="id" id="cars">
    <option value="">Choose</option>
    <option value="1">Toyota</option>
    <option value="2">Nissan</option>
    <option value="3">Dodge</option>
</select> 
<input id='submit' type="submit" name="submit" value="Submit">


$(document).ready(function() {
   $('#cars').on('change', function() {
     $('#submit').click();

   });
});
2
praveenraj