Envoyer le formulaire en utilisant AJAX et jQuery

Il semble que ce soit quelque chose de construit dans jQuery sans avoir besoin de plus de quelques lignes de code, mais je ne trouve pas la solution “simple”. Dites, j’ai un formulaire HTML:

Good Bad

Lorsque quelqu’un modifie le champ de sélection, je souhaite soumettre le formulaire en utilisant ajax pour mettre à jour la firebase database. Je pensais qu’il serait possible de faire ce qui suit sans créer manuellement les valeurs / atsortingbuts, il suffit de les envoyer tous, comme:

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

Qu’est-ce que je rate?

Commencez par donner à votre formulaire un atsortingbut 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 ); } } ); } ); } ); 

Donc, ce code utilise .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 référence future, les documents jQuery sont très, très bons.

Il y a un plugin de formulaire sympa 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

C’est ce qui a fini par fonctionner.

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