JQuery : 적어도 하나의 필드가 사용중인 경우 버튼을 비활성화하려고합니다.

Question

등록 양식을 만들고 있는데, 사용자가 양식을 제출하기 전에 사용자 이름과 이메일 사용 가능 여부를 확인하고 싶습니다. 오류를 알려주고 다시 시작하는 별도의 페이지가 필요하지 않습니다.

가용성을 확인하기위한 코드는 다음과 같습니다

이

function checkUsername() { 
$.post('php/availability.php',{username: $('#username').val()}, function(usernamedata){ 
if(usernamedata.exists){ 
    $("#username").css('background-image','url(images/in-use.png)'); 
    $("#username-use").val("inuse"); 
}else{ 
    $("#username").css('background-image','none'); 
    $("#username-use").val("free"); 
} }, 'JSON'); } 

이메일을 확인하는 코드 떨어져 명백한 차이에서 정확히 동일합니다. 일치하는 사용자 이름/전자 메일을 데이터베이스에서 확인하고 결과에 따라 숨겨진 필드 값을 설정합니다. 숨겨진 필드는 기본적으로 모두 "사용 가능"으로 설정됩니다.

사용자 이름이나 이메일이 '사용 안함'으로 설정된 경우 등록 버튼을 사용하지 않도록 설정하는 코드입니다. 그러나, 그것은 그것의 자신의 마음을 가지고있는 것처럼 보이고 나는 그것의 최종 결과를 얻는 방법을 이해할 수 없다.

function buttonCheck() { 
var username = $("#username-use").val(); 
var email = $("#email-use").val(); 
if(username == "free" && email == "free") { 
    $("#registration-send").attr('disabled','disabled'); 
} 
else { 
    $("#registration-send").removeAttr('disabled'); 
} } 

무언가가 사용 중일 때 버튼을 활성화하는 것은 효과가있는 것처럼 보이지 않습니다. 나는 물건을 바꿔 치기를 시도했지만 아무 것도 바뀌지 않습니다.

<input id="username" name="username" type="text" autocomplete="off" maxlength="100" class="req-string" onChange="checkUsername(); buttonCheck()"> 

Answer 1

무료 팁 : 포용 콜백 함수

function checkUsername() { 
$.post('php/availability.php',{username: $('#username').val()}, function(usernamedata){ 
if(usernamedata.exists){ 
    $("#username").css('background-image','url(images/in-use.png)'); 
    $("#registration-send").attr('disabled','disabled'); 
}else{ 
    $("#username").css('background-image','none'); 
    $("#registration-send").removeAttr('disabled'); 
} }, 'JSON'); } 

당신은하지

checkUsername()/위해 checkEmail()와 buttonCheck()는 모두 관련 입력 함께 onChange가 호출 일부 숨겨진 필드를 설정해야합니다. 가장 좋은 방법은 성공 콜백 자체에서이를 처리하는 것입니다.

이메일 주소 원 자성을 확인하기 위해 유사한 코드를 작성할 수도 있습니다.

UPDATE :

var correctUsername=0,correctEmail=0; 

function checkUsername() { 
$.post('php/availability.php',{username: $('#username').val()}, function(usernamedata){ 
if(usernamedata.exists){ 
    $("#username").css('background-image','url(images/in-use.png)'); 
    $("#registration-send").attr('disabled','disabled'); 
    correctUsername=0; 
}else{ 
    $("#username").css('background-image','none'); 
    correctUsername=1; 
    if(correctEmail==1){ 
     $("#registration-send").removeAttr('disabled'); 
    } 
} }, 'JSON'); } 

반복 나는이 $로 더 우아한 방식으로 구현 될 수 있다는 느낌이 correctEmail=1 및 removeAttr