jQuery AJAX soumettre le formulaire

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 vous aidera.

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>

, Il ya quelques choses que vous devez garder à l'esprit.

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

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

Nous devrions donc nous lier à l'événement form submit , pas à l'événement button click. Cela garantira que notre code fonctionne sur tous les appareils et technologies d'assistance maintenant et dans l'avenir.

2. Hijax

JavaScript N'est peut-être pas activé pour L'utilisateur. Un modèle hijax est bon ici, où nous prenons doucement le contrôle du formulaire en utilisant JavaScript, mais le laissons submittable 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

En utilisant l'événement .preventDefault () au lieu de retour false est une bonne pratique car elle permet à l'événement de gonfler. Cela permet à d'Autres scripts de se lier à l'événement, par exemple des 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 cela dans la section head de la page en utilisant une balise de script, ou un lien vers elle au bas de la page pour la vitesse. Le script devrait tranquillement améliorer l'expérience utilisateur, pas vous façon.

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 quand 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, faites ceci:

HTML

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

JS

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

Vous pouvez également utiliser FormData (mais non 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)

<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 sur une page

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

• cela fonctionnera avec jQuery > = 1.3.2
• Vous pouvez l'exécuter avant que le document ne soit prêt
• Vous pouvez supprimer et ajouter à nouveau le formulaire et cela fonctionnera toujours
• Il affichera au même emplacement que le formulaire normal, spécifié dans le formulaire "action" attribut

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 j'en ai trop dévié, alors j'ai décidé de poster ceci comme une réponse séparée.

N'envoie pas de fichiers, ne prend pas en charge les boutons, par exemple en cliquant sur un bouton (y compris un bouton de soumission) envoie sa valeur en tant que 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 de bouton réel au lieu du 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);
            }
        });
    }
});

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
}

Ce code fonctionne même avec l'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 par superluminary et surtout la façon dont il est enveloppé solution dans un jQuery plugin. Merci donc à superluminary pour une réponse très utile. Dans mon cas, je voulais un plugin qui me permettrait de définir les succès et erreur gestionnaires d'événements par le biais des options lorsque le plugin est initialisé.

Voici donc ce que je suis venu avec:

;(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 " ajaxify" les formulaires html sur la page et fournir onsubmit, la réussite et erreur gestionnaires d'événements pour la mise en œuvre de la rétroaction à l'utilisateur de l'état du formulaire de soumission. 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
      }
 });

Remarque que le succès et erreur gestionnaires d'événement reçoivent les mêmes arguments que vous recevrez les événements correspondants de la jQuery ajax méthode.

J'ai eu ce qui suit pour moi:

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

Où

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 post to ' 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 ce morceau de code.

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

JQuery AJAX submit form , n'est rien d'autre que de soumettre un formulaire en utilisant l'ID de formulaire lorsque vous cliquez sur un bouton

, Veuillez suivre les étapes

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

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

Bouton sur lequel vous allez cliquer

<button>Save</button>

Étape 2 - submit l'événement est dans jQuery qui aide à soumettre un formulaire. dans le code ci-dessous, nous préparons la requête JSON de L'élément HTML name.

$("#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.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

Pour la démo en direct, cliquez sur le lien ci-dessous

Comment soumettre un formulaire en utilisant jQuery AJAX?

Pour éviter les envois multiples de formdata:

N'oubliez pas de dissocier l'événement submit, avant que le formulaire ne soit soumis à nouveau, 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) {
  ....

Si vous utilisez forme.serialize() - vous devez donner à chaque élément de formulaire un nom comme ceci:

<input id="firstName" name="firstName" ...

Et le formulaire est sérialisé comme ceci:

firstName=Chris&lastName=Halcrow ...

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

Formulaire HTML

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

Fonction JQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Pour plus de détails et visite d'échantillon: 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").soumettre(). Vous utiliseriez cette méthode si le formulaire est déjà bien représenté en HTML. Vous venez de lire dans la page, remplir les entrées de formulaire avec des choses, puis appeler .soumettre(). 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