web-dev-qa-db-fra.com

Soumettez le formulaire en utilisant AJAX et jQuery

Il semble que cela devrait être quelque chose de construit dans jQuery sans avoir besoin de plus de quelques lignes de code, mais je ne trouve pas la solution "simple". Dis, 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 souhaite soumettre le formulaire en utilisant ajax pour mettre à jour la base de données. Je pensais qu'il y aurait moyen de faire ce qui suit sans créer manuellement les valeurs/attributs, il suffit de les envoyer tous, comme:

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

Qu'est-ce que je rate?

jqueryajaxserialization
58
Chris Bartow

C'est ce qui a fini par fonctionner.

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

Commencez par attribuer à votre formulaire l'attribut id, puis utilisez le code suivant:

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

} );

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

Pour référence future, les jQuery docs sont très, très bons.

145
rfunduk

Il existe un Nice formulaire plugin qui vous permet d’envoyer un formulaire HTML de manière asynchrone.

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

ou

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

soumettre le formulaire immédiatement

30
Darin Dimitrov