javascript - exemple - jquery formulaire dynamique




jQuery AJAX soumettre le formulaire (10)

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>

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

C'est une version modifiée de réponse d'

  • Cela fonctionnera avec jQuery> = 1.3.2
  • Vous pouvez l'exécuter avant que le document ne soit prêt
  • Vous pouvez supprimer et rajouter le formulaire et cela fonctionnera toujours
  • Il sera envoyé au même emplacement que le formulaire normal, spécifié dans 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 éditer la réponse d'Alfrekjv, mais en ai trop dévié. J'ai donc décidé de publier cette réponse séparément.

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

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

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

J'ai un formulaire avec le nom 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 appelle une page à travers Ajax, et envoyer le long de toutes les entrées du formulaire orderproductForm .

Je suppose que l'one-way 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. Y a-t-il une fonctionnalité, une fonction ou quelque chose qui enverrait TOUTES les entrées de formulaire?


C'est une référence simple:

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

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").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.


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é en HTML. Vous venez de lire dans la page, remplissez les entrées de formulaire avec des trucs, 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.

examples


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

1. Il y a plusieurs façons de soumettre un formulaire

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

Nous devrions donc nous lier à l' événement submit du formulaire , pas à l'événement click button. Cela permettra à notre code de fonctionner sur tous les appareils et technologies d'assistance, maintenant et dans le futur.

2. Hijax

L'utilisateur n'a peut-être pas activé JavaScript. Un motif hijax est bon ici, où nous prenons gentiment le contrôle de la forme en utilisant JavaScript, mais nous pouvons le soumettre si JavaScript échoue.

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

3. JavaScript discret

L'utilisation de event.preventDefault () au lieu de return false est une bonne pratique car elle permet à l'événement d'augmenter. Cela permet à d'autres scripts de se lier à l'événement, par exemple des scripts d'analyse qui peuvent surveiller les interactions de l'utilisateur.

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 head de la page en utilisant un tag de script, ou un lien vers celui-ci au bas de la page pour plus de rapidité. Le script devrait tranquillement améliorer l'expérience de l'utilisateur, ne pas 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 gérer via AJAX (un motif hijax), vous pouvez 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').trigger('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 attribut data-autosubmit à votre balise de formulaire et vous pouvez ensuite:

HTML

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

JS

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

J'ai vraiment aimé cette réponse de et surtout la façon dont il a enveloppé est la solution dans un plugin jQuery . Donc, merci à pour une réponse très utile. Dans mon cas, cependant, je voulais un plugin qui me permettrait de définir les gestionnaires d'événements de succès et d' erreur au moyen d'options lorsque le plugin est initialisé.

Alors voici ce que j'ai trouvé:

;(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 facilement "ajaxifier" les formulaires html sur la page et de fournir des gestionnaires d'événements onsubmit , success et error pour implémenter des retours à l'utilisateur sur l'état de soumission du formulaire. Cela a permis au plugin d'être utilisé 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 succès et d' erreur reçoivent les mêmes arguments que ceux que vous recevriez des événements correspondants de la méthode ajax jQuery .


Pour éviter plusieurs envois de données de formulaire:

N'oubliez pas de déconnecter l'événement de soumission, avant que le formulaire ne soit à nouveau envoyé, l'utilisateur peut appeler la fonction sumbit plus d'une fois, peut-être qu'il a oublié quelque chose, ou était une erreur de validation.

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

Une autre solution similaire utilisant des 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>

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

C'est comme ça que vous utilisez FormData .


Vous pouvez utiliser les fonctions ajaxForm / ajaxSubmit d' Ajax Form Plugin ou la fonction sérialiser jQuery.

AjaxForm :

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

ou

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

ajaxForm envoie lorsque le bouton de soumission est appuyé. ajaxSubmit envoie immédiatement.

Sérialiser :

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

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

La documentation de sérialisation AJAX est ici .


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




html-form