성공하지 못한 양식에서 버튼 ID를 다시 제출하십시오.

Question

옵션 이미지 업로드 필드가 포함 된 다소 간단한 양식이 있습니다. 이미지 데이터를 업로드하는 데는 시간이 걸리기 때문에 양식 버튼 (css는 배경 이미지로 표시됨)을 사용하여 양식을 알리는 대체 이미지를 표시하고 싶습니다. 그러면 양식이 데이터를 제출하는 과정에 있음을 알 수 있습니다. 여러 번 클릭하지 못하도록 버튼을 비활성화하십시오.

<input name="formsubmit" type="submit" id="button" value="Submit!"> 

내가 jQuery를 다음과 같은 비트를 조각 같이 관리해야 :

jQuery('#formid').submit(function() { 
    jQuery('#button').attr('id', 'button-post'); 
    jQuery('#button').attr('disabled','disabled'); 
}); 

이 정확히 않습니다 내가 필요한

다음은 양식의 관련 부분이다. 문제는, jQuery 인라인 유효성 검사 플러그인 (Link)을 사용하고 있으며 양식을 작성하고 필드를 채우지 않고 양식을 제출하고 제출 단추를 클릭하면 단추 ID가 바뀌었기 때문에 플러그인 이후부터입니다. 필수 필드가 채워지지 않아 반환 오류를 사용하면 버튼 id 속성이 원래 ID로 다시 변경되지 않습니다.

이 방법이 있습니까? 아마도 폼이 실제로 성공적으로 제출되었는지 또는 다른 필수 필드 중 하나가 특정 길이를 초과하는지 확인하는 방법일까요?

도움 주셔서 감사합니다.

Answer 1

버튼의 ID를 변경하는 이유는 무엇입니까? CSS 클래스를 전환해야하는 이유는 무엇입니까?

난 당신이 검증이 성공하면 확인하고 있는지 확인하여 양식을 제출있을 것 같아요 :

$("#button").click(function() 
{ 
    if your validation is OK 
    { 
     jQuery('#button').attr('id', 'button-post');  
     jQuery('#button').attr('disabled','disabled'); 
     document.forms["myform"].submit(); 
    } 
}); 

Answer 2

그럼 제일 먼저, ID를 변경해야합니다, 즉 나쁜 방법입니다. 이것은 클래스가 사용되는 것입니다.

하지만 어쨌든 문제 해결 방법은 실제로 ajax 요청을 직접 처리하는 것입니다.

jQuery('#formid').submit(function() {  
    var options = 
    { 
     //Define ajax options 
     url : '' //your http request target 
     type: "post", 
     target: "#responsePanel", 
     beforeSend: function() 
     { 
      // button-disabled is a CSS class that would have your visual effects for the 
      // changed button. 
      jQuery('#button').addClass("button-disbaled").attr('disabled','disabled'); 
     },   
     success: function(response, statusString, xhr) 
     { 
      // process your response. 
     }, 
     error: function(response, status, err) 
     { 
      //Handle your error here. 
      jQuery('#button').removeClass("button-disbaled").attrRemove('disabled'); 
     } 
    } 
    $.ajax(options); 
}); 

참고로 코드 테스트를 거치지 않은 경우 오류 일 수 있습니다. 이것에

Answer 3

변경이 :

jQuery('#formid').submit(function() { 
    if ($("#formid").validationEngine('validate')) { 
    jQuery('#button').attr('id', 'button-post'); 
    jQuery('#button').attr('disabled','disabled'); 
    } 
}); 

이 유효성 검사 버튼의 상태를 변경하기 전에 통과하는 것을 보장한다.