soumettre formulaire en utilisant mootools

Question

J'ai fait une classe qui gère la charge et soumettre un formulaire html. Voir ci-dessous le code

ND.Form = new Class({ 
    //--- Implements options og events. 
    Implements: [Options, Events], 

    //--- Options. 
    options: { 
     url: '', 
     injectTo: '' 
    }, 

    //--- Initialize the class. 
    initialize: function (panel, options) { 
     //--- Set options 
     this.setOptions(options); 
     this.panel = panel; 
     this.loadForm(); 
    }, 

    loadForm: function() { 
     var req = new Request.HTML({ 
      url: this.options.url, 
      method: 'get', 
      onSuccess: function (html) { 
       $(this.options.injectTo).empty(); 
       $(this.options.injectTo).adopt(html); 
       var formId = $(this.options.injectTo).getFirst('form').get('id'); 
       $(formId).addEvent('submit', function (e) { 
        e.stop(); 
        this.submitForm(formId); 
       } .bind(this)); 
      } .bind(this) 
     }).send(); 
    }, 

    submitForm: function (formId) { 
     $(formId).set('send', { 
      onSuccess: function (resp) { 
       this.panel.loadContent(); 
       if (resp != null) { 
        $('lbl_error').empty(); 
        $('lbl_error').setStyles({ 'display': 'block', 'color': 'red' }).set('html', resp); 
       } 
      }.bind(this), 

      onFailure: function (resp) { 
       if (resp != null) { 
        $('lbl_error').empty(); 
        $('lbl_error').setStyles({ 'display': 'block', 'color': 'red' }).set('html', resp); 
       } 
      } 
     }); 
     $(formId).send(); 
    } 
}); 

Et tout fonctionne très bien, exepté que quand je pousse le bouton d'économiser plus de ceux de la « this.panel.loadContent(); » dans le "submitForm: function (formId)" tire le même nombre de fois que j'ai poussé le bouton, comment puis-je l'empêcher?

/Martin

Answer 1

A partir de Mootools 1.3 "set ('envoyer')" ajoute une autre un événement. Vous devez donc écrire:

$('myForm').set('send', { 
    onSuccess: function (html) {}, 
    onFailure: function(xhr){} 
}).addEvent('submit', function(e){ 
    e.stop(); 
    this.send(); 
}); 

au lieu de:

$('myForm').addEvent('submit', function(e){ 
    e.stop(); 
    this.set('send', { 
     onSuccess: function (html) {}, 
     onFailure: function(xhr){} 
    }); 
}).send(); 

Alors demande sera envoyée une seule fois à chaque fois que vous manipulez formulaire.

Answer 2

Basically we need to do three things: 

1. Ecoutez l'événement clic sur le bouton Envoyer.
2. Arrêtez l'événement de soumettre le formulaire.
3. Envoyer le formulaire en utilisant $ (formElement) .send()

Une solution pourrait ressembler à ceci:

$('submit').addEvent('click', function(evt){ 
    // Stops the submission of the form. 
    new Event(evt).stop(); 

    // Sends the form to the action path, 
    // which is 'script.php' 
    $('myForm').send(); 
    }); 

Answer 3

J'ai utilisé la méthode request.send() mais googlé en essayant de trouver un moyen de simplement répliquer l'action d'un utilisateur qui appuie sur un bouton d'envoi de formulaire, mais en permettant également une certaine logique javascript préalablement effectuée. Je n'ai rien trouvé dans les discussions traitant spécifiquement de cela. La réponse que j'ai trouvée est d'utiliser la méthode form.submit().