jQuery AJAX formulaire de soumission

J’ai un formulaire avec name orderproductForm et un nombre indéfini d’entrées.

Je veux faire une sorte de jQuery.get ou ajax ou quelque chose comme ça qui pourrait appeler une page via Ajax, et envoyer toutes les entrées du formulaire orderproductForm .

Je suppose qu’un moyen serait de faire quelque chose comme

 jQuery.get("myurl", {action : document.orderproductForm.action.value, cartproductid : document.orderproductForm.cartproductid.value, productid : document.orderproductForm.productid.value, ... 

Cependant, je ne connais pas exactement toutes les entrées de formulaire. Existe-t-il une fonctionnalité, une fonction ou quelque chose qui enverrait simplement TOUTES les entrées du formulaire?

Vous pouvez utiliser les fonctions ajaxForm / ajaxSubmit d’ Ajax Form Plugin ou de la fonction sérialisation jQuery.

AjaxForm :

 $("#theForm").ajaxForm({url: 'server.php', type: 'post'}) 

ou

 $("#theForm").ajaxSubmit({url: 'server.php', type: 'post'}) 

ajaxForm enverra quand le bouton de soumission est pressé. ajaxSubmit envoie immédiatement.

Sérialiser :

 $.get('server.php?' + $('#theForm').serialize()) $.post('server.php', $('#theForm').serialize()) 

La documentation de sérialisation AJAX est ici .

Ceci est une référence simple:

 // this is the id of the form $("#idForm").submit(function(e) { var form = $(this); var url = form.attr('action'); $.ajax({ type: "POST", url: url, data: form.serialize(), // serializes the form's elements. success: function(data) { alert(data); // show response from the php script. } }); e.preventDefault(); // avoid to execute the actual submit of the form. }); 

J’espère que ça t’aide.

Une autre solution similaire utilisant des atsortingbuts définis sur l’élément de formulaire:

 

Il y a quelques choses que vous devez garder à l’esprit.

1. Il existe plusieurs façons de soumettre un formulaire

  • en utilisant le bouton de soumission
  • en appuyant sur Entrée
  • en déclenchant un événement de soumission en JavaScript
  • peut-être plus en fonction de l’appareil ou du futur appareil.

Nous devrions donc nous lier à l’ événement de soumission de formulaire , pas à l’événement de clic de bouton. Cela garantira que notre code fonctionne sur tous les appareils et technologies d’assistance maintenant et à l’avenir.

2. Hijax

Il est possible que JavaScript ne soit pas activé pour l’utilisateur. Un modèle de hijax est bon ici, où nous prenons doucement le contrôle de la forme en utilisant JavaScript, mais laissez-le soumis si JavaScript échoue.

Nous devons extraire l’URL et la méthode du formulaire, donc si le code HTML change, nous n’avons pas besoin de mettre à jour le JavaScript.

3. JavaScript discret

Utiliser event.preventDefault () au lieu de retourner false est une bonne pratique car cela permet à l’événement de se développer. Cela permet aux autres scripts de se lier à l’événement, par exemple des scripts d’parsing qui peuvent surveiller les interactions des utilisateurs.

La vitesse

Nous devrions idéalement utiliser un script externe, plutôt que d’insérer notre script en ligne. Nous pouvons créer un lien vers ceci dans la section principale de la page en utilisant une balise de script ou en la liant au bas de la page pour la vitesse. Le script devrait discrètement améliorer l’expérience utilisateur, et ne pas faire obstacle.

Code

En supposant que vous êtes d’accord avec tout ce qui précède, et que vous souhaitiez attraper l’événement submit et le gérer via AJAX (un modèle de hijax), vous pourriez faire quelque chose comme ceci:

 $(function() { $('form.my_form').submit(function(event) { event.preventDefault(); // Prevent the form from submitting via the browser var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function(data) { // Optionally alert the user of success here... }).fail(function(data) { // Optionally alert the user of an error here... }); }); }); 

Vous pouvez déclencher manuellement une soumission de formulaire lorsque vous le souhaitez via JavaScript en utilisant quelque chose comme:

 $(function() { $('form.my_form').sortinggger('submit'); }); 

Modifier:

J’ai récemment dû le faire et j’ai fini par écrire un plugin.

 (function($) { $.fn.autosubmit = function() { this.submit(function(event) { event.preventDefault(); var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function(data) { // Optionally alert the user of success here... }).fail(function(data) { // Optionally alert the user of an error here... }); }); return this; } })(jQuery) 

Ajoutez un atsortingbut data-autosubmit à votre balise de formulaire et vous pourrez alors le faire:

HTML

 

JS

 $(function() { $('form[data-autosubmit]').autosubmit(); }); 

Vous pouvez également utiliser FormData (mais pas disponible dans IE):

 var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector $.ajax({ type: "POST", url: "yourURL",// where you wanna post data: formData, processData: false, contentType: false, error: function(jqXHR, textStatus, errorMessage) { console.log(errorMessage); // Optional }, success: function(data) {console.log(data)} }); 

Voici comment vous utilisez FormData .

Version simple (n’envoie pas d’images)

 
...

Copiez et collez l’ajaxification d’un formulaire ou de tous les formulaires sur une page

C’est une version modifiée de la réponse d’ Alfrekjv

  • Cela fonctionnera avec jQuery> = 1.3.2
  • Vous pouvez l’exécuter avant que le document ne soit prêt
  • Vous pouvez supprimer et rappend le formulaire et cela fonctionnera toujours
  • Il affichera au même endroit que le formulaire normal, spécifié dans l’atsortingbut “action” du formulaire

JavaScript

 jQuery(document).submit(function(e){ var form = jQuery(e.target); if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms) e.preventDefault(); jQuery.ajax({ type: "POST", url: form.attr("action"), data: form.serialize(), // serializes the form's elements. success: function(data) { console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console) } }); } }); 

Je voulais modifier la réponse d’Alfrekjv, mais je m’en suis trop écarté, alors j’ai décidé de publier cette réponse séparément.

N’envoie pas de fichiers, ne prend pas en charge les boutons, par exemple, cliquer sur un bouton (y compris un bouton d’envoi) envoie sa valeur en tant que données de formulaire, mais comme il s’agit d’une demande ajax, le bouton clic ne sera pas envoyé.

Pour prendre en charge les boutons, vous pouvez capturer le clic sur le bouton au lieu de le soumettre.

 jQuery(document).click(function(e){ var self = jQuery(e.target); if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){ e.preventDefault(); var form = self.closest('form'), formdata = form.serialize(); //add the clicked button to the form data if(self.attr('name')){ formdata += (formdata!=='')? '&':''; formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val()); } jQuery.ajax({ type: "POST", url: form.attr("action"), data: formdata, success: function(data) { console.log(data); } }); } }); 

Du côté du serveur, vous pouvez détecter une requête ajax avec cet en-tête que jquery définit HTTP_X_REQUESTED_WITH pour php

PHP

 if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { //is ajax } 

Ce code fonctionne même avec une entrée de fichier

 $(document).on("submit", "form", function(event) { event.preventDefault(); $.ajax({ url: $(this).attr("action"), type: $(this).attr("method"), dataType: "JSON", data: new FormData(this), processData: false, contentType: false, success: function (data, status) { }, error: function (xhr, desc, err) { } }); }); 

J’ai vraiment aimé cette réponse de superluminary et surtout la façon dont il a été emballé est la solution dans un plugin jQuery . Donc, grâce à superluminary pour une réponse très utile. Dans mon cas, cependant, je voulais un plug-in qui me permettrait de définir les gestionnaires d’événements de réussite et d’ erreur au moyen d’options lorsque le plug-in est initialisé.

Alors voici ce que j’ai imaginé:

 ;(function(defaults, $, undefined) { var getSubmitHandler = function(onsubmit, success, error) { return function(event) { if (typeof onsubmit === 'function') { onsubmit.call(this, event); } var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function() { if (typeof success === 'function') { success.apply(this, arguments); } }).fail(function() { if (typeof error === 'function') { error.apply(this, arguments); } }); event.preventDefault(); }; }; $.fn.extend({ // Usage: // jQuery(selector).ajaxForm({ // onsubmit:function() {}, // success:function() {}, // error: function() {} // }); ajaxForm : function(options) { options = $.extend({}, defaults, options); return $(this).each(function() { $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error'])); }); } }); })({}, jQuery); 

Ce plugin me permet de très facilement “ajaxifier” les formulaires HTML sur la page et de fournir des gestionnaires d’événements onsubmit , success et error pour implémenter le feedback à l’utilisateur du statut du formulaire submit. Cela a permis d’utiliser le plugin comme suit:

  $('form').ajaxForm({ onsubmit: function(event) { // User submitted the form }, success: function(data, textStatus, jqXHR) { // The form was successfully submitted }, error: function(jqXHR, textStatus, errorThrown) { // The submit action failed } }); 

Notez que les gestionnaires d’événements de réussite et d’ erreur reçoivent les mêmes arguments que ceux que vous recevriez des événements correspondants de la méthode jQuery ajax .

J’ai ce qui suit pour moi:

 formSubmit('#login-form', '/api/user/login', '/members/'); 

 function formSubmit(form, url, target) { $(form).submit(function(event) { $.post(url, $(form).serialize()) .done(function(res) { if (res.success) { window.location = target; } else { alert(res.error); } }) .fail(function(res) { alert("Server Error: " + res.status + " " + res.statusText); }) event.preventDefault(); }); } 

Cela suppose que le message à ‘url’ renvoie un ajax sous la forme de {success: false, error:'my Error to display'}

Vous pouvez varier cela comme vous le souhaitez. N’hésitez pas à utiliser cet extrait.

envisager d’utiliser le closest

 $('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) { frm = $(ev.target).closest('form'); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert(data); } }) ev.preventDefault(); }); 

Pour éviter les envois de plusieurs formulaires:

N’oubliez pas de dissocier l’événement de soumission, avant que le formulaire ne soit à nouveau soumis. L’utilisateur peut appeler la fonction sumbit plus d’une fois, peut-être at-il oublié quelque chose ou une erreur de validation.

  $("#idForm").unbind().submit( function(e) { .... 

Si vous utilisez le formulaire .serialize () – vous devez atsortingbuer un nom à chaque élément de formulaire:

  

Et le formulaire est sérialisé comme ceci:

 firstName=Chris&lastName=Halcrow ... 

jQuery AJAX submit form , n’est rien d’autre que de soumettre un formulaire en utilisant l’identifiant du formulaire lorsque vous cliquez sur un bouton

Veuillez suivre les étapes

Étape 1 – La balise de formulaire doit avoir un champ ID

 
.....

Bouton sur lequel vous allez cliquer

  

Etape 2 – L’événement de soumission est dans jQuery qui permet de soumettre un formulaire. Dans le code ci-dessous, nous préparons une requête JSON à partir du nom de l’ élément HTML.

 $("#submitForm").submit(function(e) { e.preventDefault(); var frm = $("#submitForm"); var data = {}; $.each(this, function(i, v){ var input = $(v); data[input.attr("name")] = input.val(); delete data["undefined"]; }); $.ajax({ contentType:"application/json; charset=utf-8", type:frm.attr("method"), url:frm.attr("action"), dataType:'json', data:JSON.ssortingngify(data), success:function(data) { alert(data.message); } }); }); 

pour une démonstration en direct, cliquez sur le lien ci-dessous

Comment soumettre un formulaire en utilisant jQuery AJAX?

Vous pouvez l’utiliser sur la fonction de soumission comme ci-dessous.

Formulaire HTML

 

Fonction jQuery:

  

Pour plus de détails et des exemples de visite: http://www.spiderscode.com/simple-ajax-contact-form/

Il y a aussi l’événement submit, qui peut être déclenché comme ceci $ (“# form_id”). Submit (). Vous utiliseriez cette méthode si le formulaire est déjà bien représenté dans HTML. Vous venez de lire la page, remplissez les entrées du formulaire avec des éléments, puis appelez .submit (). Il utilisera la méthode et l’action définies dans la déclaration du formulaire, vous n’avez donc pas besoin de le copier dans votre javascript.

exemples