So senden Sie das Formular bei Select Change

Question 1

Ich habe folgendes Formular. Ich möchte, dass es automatisch über jQuery übermittelt wird, wenn der Benutzer eine Auswahl trifft, ohne dass die Schaltfläche „Senden“ gedrückt werden muss. Wie mache ich das?

<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, ich habe deinen Vorschlag ausprobiert, aber es funktioniert immer noch nicht. Hier ist der vollständige Code, stimmt etwas nicht?

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

Question 2

Ihrem Formular fehlt ein Aktionswert, der das Absenden des Formulars am Ende verhindert. Aber in der Zwischenzeit sollten Sie diesen Code korrigieren:

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

Sie können ein Formular auch senden, indem Sie das Klickereignis der Schaltfläche “Senden” auslösen:

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

Question 3

In meinem Fall funktioniert das perfekt, und es funktioniert mit oder ohne den Submit-Button.

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

Question 4

Eine noch schnellere Version des Codes würde in etwa so aussehen.

<form action="" method="post">
    <select name="id" id="cars" onchange="javascript:this.form.submit()">
        <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>

Jetzt fügen wir hinzu
onchange="javascript:this.form.submit()" in ein beliebiges Feld, auf dem die Submit-Aktion ausgelöst werden soll. Das funktioniert natürlich nur bei Elementen, die das unterstützen bei Änderung html-Eigenschaft

Question 5

Verwenden Sie einfach die Hilfe von JavaScript.

<select onchange="this.form.submit()">
    ...
</select>

Question 6

Ich weiß, dass dies ein bisschen alt ist (und bereits beantwortet wurde), aber keine der Antworten war so flexibel, wie ich wollte, also ist unten die Lösung, mit der ich gelandet bin:

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

Question 7

Sogar du kannst das tun:

<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();

   });
});

Question 8

Meine Lösung ist, eine versteckte Senden-Schaltfläche zu erstellen und auf Change Event zu klicken.

 <select name="id" onchange="javascript:$('#submit').click();">
 <option value="0">Please Select Web Site</option>
 <option value="1">------</option>
 <option value="2">-------</option>
 </select>
 <button id="submit" class="hidden" type="submit" name="submit" value="Submit"/>