JQuery는 버튼 클릭으로 이벤트를 시작합니다.

Question

두 번 클릭이나 작업을 방지하기 위해 버튼을 클릭 한 후 Disabelling 버튼 작업을하고 있습니다. 두 종류의 버튼이 있습니다. 제출하고 페이지를 다시로드하는 PHP 버튼 (또는 양식 버튼). 나는 그것에 대한 아무런 증거도 얻지 못했다. 왜냐하면 난 그냥 버튼을 영원히 사용할 수 없게되고 다시로드 할 수있게되면 다시 밀어 넣을 수 있기 때문입니다. 예 :

$(document).on('click', 'button', function() { 
    var $this = $(this); 
     htmls = $(this).html(); 
     $(this).prop("disabled", true); 
     setTimeout(function(){ 
      $this.prop("disabled", false); 
     }, 2000); 
}); 

이제 2 초가 걸리지 만 setTimeout 부분이 제거됩니다. 더 큰 문제는 Javascript 단추입니다.이 단추는 페이지를 다시로드하지 않습니다. 사용자가 버튼을 누르면 버튼으로 시작된 프로세스가 종료 될 때까지 버튼을 비활성화하고 다시 활성화해야합니다. 버튼이 제출을하는지 확인하거나 양식의 모든 입력란을 지울 수 있습니다. 나는 버튼 푸시로 시작된 프로세스를 얻을 수 있다고 생각하고 있었고, 작업이 끝나면 끝낼 수 있습니다. 이것은 가능한가? 아니면 다른 해결 방법이 있습니까?

Answer 1

당신은 당신은 서버와 때 서버의 응답을 반환 한 후 동일한 형태로 또는 뭔가 다른 작업을 계속 요청을 만들기 위해 jQuery.ajax를 사용하여이

<input type='button' value='Javascript button' id="btn" /> 
    <script> 
     $(document).ready(function() { 

      $("#btn").click(function() { 
       $(this).prop("disabled", true); 
       // long processing 
       $(this).prop("disabled", false); 
      }); 

      //OR with a jquery request 

      $("#btn").click(function() { 
       $(this).prop("disabled", true); 

       $.ajax({ 
        type: "POST", 
        url: "some url", 
        data: JSON.stringify(data), 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        sucess: function (data) { alert(data); } 
       }).always(function() { 
        $(this).prop("disabled", false); 
       }); 

      }); 


     }); 
    </script> 

Answer 2

처럼 그것을 할 수 있습니다. 당신이해야 할 일은 폼에서 모든 데이터를 수집하여 json 객체로 서버에 보내야한다는 것입니다. 당신의 코드를 기반으로

작은 예 : 다른 질문 그냥 알려 경우

$(document).on('click', 'button', function() { 
    var $this = $(this); 
     htmls = $(this).html(); 
     $(this).prop("disabled", true); 
     $.ajax({ 
      type: "POST", 
      url: "some.php", //url to make post to 
      data: JSON.stringify(formdata), //data collected from your form 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      }).done(function(result) { 
       //put here the code to process the result from server 
      }).fail(function() { 
       alert("error"); // if something went wrong on server 
      }) 
      .always(function() { 
       $(this).prop("disabled", false); //back enabling your button and maybe some other logic 
      });; 
}); 

은 jQuery.ajax 여기 http://api.jquery.com/jQuery.ajax/

에 대한 자세한 내용; 내가이 조금 도움이 될 희망)