클릭 한 후 양식 제출 이미지를 비활성화하는 방법?

Question

중복 된 항목을 방지하기 위해 클릭 한 후 이미지 인 양식 제출 버튼을 비활성화하려고합니다. 이 양식은 ERP/CRM 인 Netsuite로 이동하기 때문에 느린 속도로 진행되므로 사용자가 여러 번 클릭하면 여러 항목이 표시되므로 사용자가 여러 항목을 클릭하게되므로 사용자가 여러 항목을 클릭 한 후에 사용할 수 없습니다. 나는 주위를 검색하고 대부분의 onclick 지역이을 추가하는 말과 함께 몇 가지 제안을 읽고

<INPUT TYPE="hidden" NAME="payment" VALUE="check" ##check## checked> 
<br> 
<INPUT type="image" onMouseOver="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" 
onMouseOut="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" 
src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" VALUE="order" 
NAME="order" id="order" class="button" onclick="this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';return true;"> 

:

this.disabled=true 

그러나 그 코드를 추가

이

우리가 현재 사용하고있는 코드입니다 onclick에 작동하지 않는 것 같습니다. netsuite 부분을 제출하기 전후에 추가하려고 시도했지만 차이를 만드는 것처럼 보이지 않습니다.

누구나 내가 어떻게 작동하는지 알 수 있습니까?

Answer 1

this.disabled = true는 입력 [type = image]에서 작동하지 않습니다. 이것은 자바 스크립트에서 처리해야합니다.

<input type="image" onclick="return submitForm(this)"/> 
<scritp> 
var submitted = 0; 
function submitForm(input){ 
    input.src = "new image path"; 
    if (submitted == 0) { 
     submitted = 1; 
     return true; 
    } 
    return false 
} 
</script> 

Answer 2

사실 disabled=trueonclick 이벤트를 트리거의 요소를 방지하지 않습니다. 제출 지침을 수행하고 첫 번째 실행 후 변수로 잠그는 자바 스크립트 함수를 대신 사용할 수 있습니다. 이 같은

뭔가 :

var submitEnabled = true; 

function Submit() { 
    if(submitEnabled) { 
     submitEnabled = false; 

     this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx'; 
     //Or any submitting code you have 
    } 
} 

그리고, 이미지 요소 :

나는 빠른 테스트를했고, 버튼 onclick을 비활성화하면 양식이 제출되지 얻을 않을 것 같습니다

<INPUT type="image" onclick="Submit()" ... 

Answer 3

. 난 당신이 <form> 태그를 변경하는 기능이있는 경우 잘 모르겠지만, 당신이 경우에 당신이 양식을 제출 한 후 제출 버튼을 비활성화 onsubmit 이벤트를 추가 할 수 있습니다 : 당신이있는 경우

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="document.getElementById('order').disabled=true;"> 
    <input type="hidden" name="payment" value="check" checked> 
    <br> 
    <input type="image" onmouseover="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" onmouseout="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" value="order"name="order" id="order" class="button"> 
</form> 

을 자신 만의 CSS와 자바 스크립트를 추가 할 수있는 기능을 추가로 정리할 수 있습니다.

1. 롤오버 이미지가 더 나은 CSS
2. 그리고 단순히 반드시 양식을 제출할 수 없습니다 의미하지 않는다 제출 '버튼을 비활성화하여 처리 할 것입니다. 예를 들어 키보드에서 Enter 키를 눌러 양식을 제출할 수 있습니다. 사용하지 않을 수도있는 버튼을 비활성화하는 대신 제출 이벤트 자체를 방지하는 것이 좋습니다.

예 : 나는 양식이 결코 제출되지 가져옵니다 this.disabled = true 또는 다른 방법을 추가하는 경우

<style> 
    #order { 
     background: url('http://www.domain.com/pb/tpl/img/emailquote2.jpg') no-repeat; 
     width: 300px; /* sizing for example only */ 
     height: 100px; 
     border: none; 
    } 
    #order:hover { 
     background: url('http://www.domain.com/pb/tpl/img/emailquote3.jpg') no-repeat; 
    } 
</style> 

<script> 
    var formSubmitted = false; 

    function handleSubmit() { 
     if (!formSubmitted) { 
      formSubmitted = true; 
      return false; 
     } 
     return false; 
    } 
</script> 

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="return handleSubmit();"> 
    <input type="hidden" name="payment" value="check" checked> 
    <br> 
    <input type="submit" name="order" id="order" class="button"> 
</form>