2010-12-09 11 views
1

html 양식로드 및 제출을 처리하는 클래스를 만들었습니다.mootools를 사용하여 양식 제출

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

아래 코드를 참조하십시오 그리고 내가 그들보다 더 많은 저장 버튼을 누르면 모든 것이 그 exept, 잘 작동 "this.panel.loadContent();" "submitForm : function (formId)"에서 버튼을 눌렀을 때와 동일한 x 시간이 발생합니다. 어떻게 막을 수 있습니까?

/마틴

답변

4

이 Mootools의 1.3에서 시작 "설정 ('보내기')"또 다른 추가 하나의 사건. 그래서 당신은 쓸 필요가 : 대신

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

을 :

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

당신은 양식을 처리 할 때 그런 요청을 한 번 할 때마다 전송됩니다.

4
Basically we need to do three things: 
  1. 제출 버튼의 '클릭'이벤트를 수신.
  2. 이벤트를 중지하고 양식을 제출하십시오.
  3. 다음과 같이 보일 수있는 형태로 사용하여 $ (formElement) .send()

솔루션을 보내기 :

$('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(); 
    }); 
+0

글쎄, 내 "this.panel.loadContent();" 나는 당신의 제안을 시도 할 때 여전히 여러 번 불을 뿜는다. 처음 버튼을 한 번로드하면 두 번로드됩니다. 두 번로드됩니다. –

+0

제출을 클릭하지 않고 양식을 제출하면 어떻게됩니까? 나는. 사용자가 텍스트 입력 안에 엔터를 누르면? –

0

나는 request.send() 메소드를 사용했지만 사용자가 폼 제출 버튼을 눌렀을 때의 액션을 복제하는 방법을 찾지는 않았지만 사전에 수행되는 일부 자바 스크립트 로직을 허용했다. 이 문제를 구체적으로 다루는 토론에서 나는 아무것도 찾지 못했습니다. 내가 찾은 대답은 form.submit() 메서드를 사용하는 것입니다.