it-swarm.com.de

Senden Sie das Formular mit AJAX und jQuery

Es scheint, dass dies etwas sein sollte, das in jQuery integriert ist, ohne dass mehr als ein paar Zeilen Code erforderlich sind, aber ich kann die "einfache" Lösung nicht finden. Angenommen, ich habe ein HTML-Formular:

<form method="get" action="page.html">
    <input type="hidden" name="field1" value="value1" />
    <input type="hidden" name="field2" value="value2" />
    <select name="status">
         <option value=""></option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
    </select>
</form>

Wenn jemand das Auswahlfeld ändert, möchte ich das Formular mit Ajax zum Aktualisieren der Datenbank senden. Ich dachte, es gäbe eine Möglichkeit, das Folgende zu tun, ohne die Werte/Attribute manuell zu erstellen. Senden Sie sie einfach alle wie folgt:

$("select").change(function(){
    $.get("page.html?" + serializeForm());
});

Was vermisse ich?

58
Chris Bartow

Dies ist, was am Ende funktioniert hat.

$("select").change(function(){
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
});
14
Chris Bartow

Geben Sie Ihrem Formular zuerst ein id -Attribut, und verwenden Sie dann folgenden Code:

$(document).ready( function() {
  var form = $('#my_awesome_form');

  form.find('select:first').change( function() {
    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  } );

} );

Dieser Code verwendet also .serialize(), um die relevanten Daten aus dem Formular abzurufen. Es wird auch davon ausgegangen, dass die Auswahl, die Sie interessiert, die erste im Formular ist.

Zum späteren Nachschlagen sind die jQuery docs sehr, sehr gut.

145
rfunduk

Es gibt ein Nice Formular-Plugin , mit dem Sie ein HTML-Formular asynchron senden können.

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

oder

$("select").change(function(){
    $('#myForm1').ajaxSubmit();
});

um das Formular sofort einzureichen

30
Darin Dimitrov