사용자가 Prototype을 사용하여 양식을 제출하는 동안 양식을 비활성화하는 방법은 무엇입니까?

Question

사용자가 HTML 양식을 제출할 때 서버가 처리하는 동안 양식을 사용하지 않으려합니다. 사용자가 추가 텍스트를 입력하는 것을 원하지 않으며 여러 요청을 보내기 위해 제출 버튼을 빠르게 탭하지 않아도됩니다.

$('formId').observe(
    'submit', 
    function(event) { 
     Event.element(event).disable(); 
    } 
); 

양식이 제대로 비활성화됩니다,하지만 서버 측에서, 나는 $_POST을 error_log가 완전히 비어있는 것을 발견 : 나는 프로토 타입 JS와 함께이 일을 시도. 제출할 때 양식을 사용할 수없는 경우에만이 문제가 발생합니다.

Answer 1

양식을 사용하지 않으면, 나는 때문에, 그것은 당신의 필드를 작성/제출하지 생각 그것은 비활성화 될 것입니다. 그 경우에는 전체 양식이 아닌 제출 버튼을 비활성화해야합니다.

$('formId').observe(
    'submit', 
    function(event) { 
     $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
    } 
); 

이 How can I unobtrusively disable submit buttons with Javascript and Prototype?

UPDATE를 살펴 보자 :

하지만이 제출 '버튼을 비활성화하는 것만으로는 충분하지 않습니다. 사람들은 텍스트 입력에 키를 입력하여 양식을 제출할 수 있습니다. 양식을 제출 버튼 을 제출하는 유일한 방법은되지 사용

은 그럼 당신은 https://stackoverflow.com/a/9693667/1078487

var already_submitted = false; 

$('formId').observe(
    'submit', 
    function(e) { 
     // disable input 
     $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
     if (already_submitted) { 
      new Event(e).stop(); 
      return false; 
     } else { 
      already_submitted = true; 
     } 
    } 
); 

Answer 2

양식을 사용하지 않도록 설정하는 대신 onsubmit 이벤트를 입력 단추에 바인딩해야합니다. 이 함수에서는 제출 이벤트를 중지하고 양식이 이미 제출 된 경우 false를 반환합니다. 나는 프로토 타입하지만 위의 구문을 사용하여 너무 익숙하지 않다

는,이 같은 것입니다 :

var already_submitted = false; 

$('formId').observe(
    'submit', 
    function(e) { 
     if (already_submitted) { 
      new Event(e).stop(); 
      return false; 
     } else { 
      already_submitted = true; 
     } 
    } 
); 

Answer 3

는 사용자가 클릭의 방법으로 전체 페이지 요소를 만들고이 대답 조합을 만들 수 있습니다 :

$('formId').observe(
    'submit', 
    function() { 
     // create DIV with an id for possible later use 
     var blocker = new Element('div', {id: 'blocker'}); 
     // expand to fill parent element 
     blocker.setStyle({ 
      position: 'absolute', 
      left: 0, 
      top: 0, 
      width: '100%', 
      height: '100%', 
      zIndex: 1000 // overlay everything 
     }); 
     // set whole body as parent 
     document.body.insert(blocker); 
     // prevent keyboard interaction too 
     this.blur(); 
    } 
); 

양식을 제출하기 위해 짧은 시간 동안 아무도 필드를 변경할 수 없습니다 (스크립트 실행 제외). 원하는 경우 DIV에 대기중인 메시지를 추가 할 수도 있습니다. 그렇지 않으면 사용자가 볼 수 없습니다. 경우

당신이 AJAX하여 양식을 제출하고 또한 그렇게 AJAX가 완료 될 때 $('blocker').remove();