Formulaire de soumission AJAX jQuery

Question

J'ai un formulaire dont le nom est 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 appellerait une page par Ajax, et enverrait 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 du formulaire. Existe-t-il une fonctionnalité, une fonction ou quelque chose qui permettrait d'envoyer TOUTES les entrées du formulaire ?

Answer 1

Il s'agit d'une référence simple :

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    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.
           }
         });

});

Answer 2

Vous pouvez utiliser les fonctions ajaxForm/ajaxSubmit à partir de Plugin pour formulaire Ajax ou la fonction jQuery serialize.

AjaxForm :

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

ou

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

ajaxForm envoie lorsque le bouton submit est pressé. ajaxSubmit envoie immédiatement.

Sérialiser :

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

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

La documentation sur la sérialisation AJAX est ici .

Answer 3

Une autre solution similaire utilise les attributs définis sur l'élément de formulaire :

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

Answer 4

Il y a quelques éléments à prendre en compte.

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

• en utilisant le bouton d'envoi
• en appuyant sur la touche Entrée
• en déclenchant un événement de soumission en JavaScript
• éventuellement plus en fonction de l'appareil ou du futur appareil.

Nous devons donc nous lier à la événement de soumission du formulaire et non l'événement de clic du bouton. Cela garantira que notre code fonctionne sur tous les appareils et toutes les technologies d'assistance, maintenant et à l'avenir.

2. Hijax

L'utilisateur n'a peut-être pas activé JavaScript. A hijax est un bon modèle ici, où nous prenons doucement le contrôle du formulaire à l'aide de JavaScript, mais le laissons soumis si JavaScript échoue.

Nous devons tirer l'URL et la méthode du formulaire, de sorte que si le HTML change, nous n'avons pas besoin de mettre à jour le JavaScript.

3. JavaScript discret

Utilisation de event.preventDefault() au lieu de retournez à la case départ est une bonne pratique car elle permet à l'événement de se développer. Cela permet à d'autres scripts de se connecter à l'événement, par exemple les scripts d'analyse qui peuvent surveiller les interactions des utilisateurs.

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 celui-ci dans la section head de la page à l'aide d'une balise script, ou le lier au bas de la page pour plus de rapidité. Le script doit améliorer discrètement l'expérience de l'utilisateur, et non pas le gêner.

Code

En supposant que vous êtes d'accord avec tout ce qui précède, et que vous voulez attraper l'événement submit, et le traiter via AJAX (un modèle 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 la soumission d'un formulaire quand vous le souhaitez via JavaScript en utilisant quelque chose comme :

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

Edit :

J'ai récemment eu à 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 attribut data-autosubmit à votre balise de formulaire et vous pourrez alors faire ceci :

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

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

Answer 5

Version simple (n'envoie pas d'images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Copier et coller l'ajaxification d'un formulaire ou de tous les formulaires d'une page

Il s'agit d'une version modifiée de Alfrekjv's réponse

• Il fonctionnera avec jQuery >= 1.3.2
• Vous pouvez l'exécuter avant que le document ne soit prêt
• Vous pouvez supprimer et réintroduire le formulaire et il fonctionnera toujours.
• Il sera posté au même endroit que le formulaire normal, spécifié dans la section l'attribut "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 éloigné et j'ai décidé de poster cette réponse séparément.

N'envoie pas de fichiers, ne prend pas en charge les boutons, par exemple, le fait de cliquer sur un bouton (y compris un bouton d'envoi) envoie sa valeur sous forme de données de formulaire, mais comme il s'agit d'une requête ajax, le clic sur le bouton ne sera pas envoyé.

Pour prendre en charge les boutons, vous pouvez capturer le clic réel sur le bouton au lieu de l'envoi.

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 met HTTP_X_REQUESTED_WITH pour php

PHP

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