Soumettre un formulaire en utilisant AJAX et jQuery

Question

Il semble que cela devrait être intégré à jQuery sans nécessiter plus de quelques lignes de code, mais je n'arrive pas à trouver la solution "simple". Disons que j'ai un formulaire HTML :

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

Lorsque quelqu'un modifie le champ de sélection, je voudrais soumettre le formulaire en utilisant ajax pour mettre à jour la base de données. Je pensais qu'il y aurait un moyen de faire ce qui suit sans créer manuellement les valeurs/attributs, juste les envoyer tous, comme :

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

Qu'est-ce que je rate ?

Answer 1

Donnez d'abord à votre formulaire un id puis utilisez un code comme celui-ci :

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

} );

Ce code utilise donc .serialize() pour extraire les données pertinentes du formulaire. Il suppose également que la sélection qui vous intéresse est la première du formulaire.

Pour une référence ultérieure, le fichier jQuery docs sont très, très bonnes.

Answer 2

Il y a une belle plugin de formulaire qui vous permet d'envoyer un formulaire HTML de manière asynchrone.

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

o

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

pour soumettre le formulaire immédiatement

Answer 3

C'est ce qui a fini par fonctionner.

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