마우스를 클릭하고 입력 버튼을 누르십시오.

Question

MOUSE CLICK 및 ENTER를 통해 양식을 제출 중입니다. 아약스 전화를 확인하고 있습니다

는 사용자가 양식을 제출하지 않으면 이미 데이터베이스에 .. 그렇지 않으면 버튼을 제출 한 지정이 비활성화 것입니다

JQUERY

function check_designation(e){ 

    text = $('#req1').val(); 
    data = "data=" + text;   
    text_length = text.length   

    if(text_length == 0) 
    { 
     $('#result_span').html(''); 
    }  

    if(text_length > 3){ 
     $.ajax({ 
      url: "designation_ajax.php", 
      type: "POST", 
      data: data,  
      cache: false, 
      success: function (response) { 
       if ($.trim(response) == "access") { 
        $("#result_span").html('<div class="green">' + text + ' is available '+'</div>'); 
        $('#create_desg').removeAttr('disabled'); 
       } 
       else if ($.trim(response) == "no access") {               
        $("#result_span").html('<div class="red">' + text + ' is already in use'+'</div>'); 
        $('#create_desg').attr('disabled','disabled');              
       } 

       else { 

        alert('Sorry, unexpected error. Please try again later.'); 

       } 
      }  
     }); 
    } 
    else{ 
     $("#result_span").html('');  

    } 

    return true;   
} 

HTML 양식

<form id="formID" class="formular" method="POST" action="" onsubmit="formSubmit()" > 
    <fieldset> 
    <legend>Create Desination</legend> 
    <label> Designation<br clear="all" /> 
     <input autocomplete="off" onkeyup="check_designation(event)" value="" class="validate[required,minSize[4]] text-input float_left" type="text" name="name" id="req1" /> 
     <span id="result_span"></span> 
    </label> 
    <br clear="all" /> 
    <input id="create_desg" value="Submit" type="button" /> 
    </fieldset> 
</form> 

문제 :::

이제 DISABLE 버튼이 어떻게됩니까? 해결책이 아닙니다 ... 이미 표에 표식이있는 경우 제출 버튼이 사용 중지되지만 Enter 키를 누르면 제출되고 페이지를 새로 고침하지 않아도됩니다. AJAX가 작동하지 않습니다.

Answer 1

onsubmit 핸들러에서 false를 반환해야 기본 동작을 취소 할 수 있습니다. 하지만 아마 당신의 코드를 조금 청소하고 겸손 제출 이벤트를 구독 할 것이다 :

<form id="formID" class="formular" method="POST" action=""> 
    <fieldset> 
     <legend>Create Desination</legend> 
     <label> 
      Designation<br clear="all" /> 
      <input autocomplete="off" value="" class="validate[required,minSize[4]] text-input float_left" type="text" name="name" id="req1" /> 
      <span id="result_span"></span> 
     </label> 
     <br clear="all" /> 
     <input id="create_desg" value="Submit" type="button" /> 
    </fieldset> 
</form> 

당신은 내가 의도적으로 입력 필드에서 onkeyup 이벤트를 제거했는지 알 수 있습니다. 이 필드 안에 누군가가 키를 친 때마다 AJAX 요청으로 서버를 망치는 것은 서버에 아무런 도움이되지 않습니다. 이것을 구현하려면 AJAX 요청을 보내기 전에 일부 입력이 누적되고 스로틀되기를 기다리는 것이 좋습니다.

한 다음 :

$(function() { 
    $('#formID').submit(function() { 
     var text = $('#req1').val(); 
     if(text.length == 0) { 
      $('#result_span').html(''); 
     }  

     if(text.length > 3) { 
      $.ajax({ 
       url: 'designation_ajax.php', 
       type: 'POST', 
       data: { data: text }, 
       cache: false, 
       success: function (response) { 
        if ($.trim(response) == 'access') { 
         $('#result_span').html('<div class="green">' + text + ' is available '+'</div>'); 
         $('#create_desg').removeAttr('disabled'); 
        } 
        else if ($.trim(response) == 'no access') { 
         $("#result_span").html('<div class="red">' + text + ' is already in use'+'</div>'); 
         $('#create_desg').attr('disabled', 'disabled'); 
        } else { 
         alert('Sorry, unexpected error. Please try again later.'); 
        } 
       }  
      }); 
     } else { 
      $('#result_span').html('');  
     } 

     // return false to prevent the default action 
     return false; 
    }); 
}); 

또한 내가 대신 구문 분석하고 success 콜백 트리밍 일부 access 및 no access 문자열의 designation_ajax.php 스크립트 반환 JSON있을 것입니다.