web-dev-qa-db-de.com

So senden Sie ein Formular zum Auswählen von Änderungen

Ich habe das folgende Formular. Ich möchte, dass es automatisch über jQuery gesendet wird, wenn der Benutzer eine Auswahl vornimmt, ohne die Schaltfläche "Senden" zu drücken. 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 Ihren Vorschlag ausprobiert, aber es funktioniert immer noch nicht. Hier ist der komplette Code, irgendetwas stimmt 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>
14
Rick Helston

Ihrem Formular fehlt ein Aktionswert, der das Senden des Formulars am Ende verhindert. In der Zwischenzeit sollten Sie diesen Code jedoch korrigieren:

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

Sie können ein Formular auch senden, indem Sie das Klickereignis "Senden" auslösen:

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

In meinem Fall funktioniert das einwandfrei und funktioniert mit oder ohne Senden.

<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

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

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

selbst Sie können dies 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();

   });
});
2
praveenraj

Eine noch schnellere Version des Codes würde ungefähr 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 onchange="javascript:this.form.submit()" zu jedem Feld hinzu, auf das die Submit-Aktion angewendet werden soll. Dies funktioniert natürlich nur bei Elementen, die die Eigenschaft onchange html unterstützen

0
larrytech