양식 필드가 수정되지 않은 경우 jQuery에서 제출 버튼을 비활성화하는 방법은 무엇입니까?
-
22-08-2019 - |
문제
텍스트 필드, 확인란, 라디오 부트 턴 및 제출 버튼이 포함 된 HTML 양식이 있습니다.
해당 제출 버튼이 필드의 내용이 수정 된 경우에만 활성화됩니다. 이제 여기에 캐치가 있습니다. 사용자가 필드 내용을 원래 값으로 다시 수정하면 양식 버튼을 다시 비활성화해야합니다.
- 원래 필드 값 "foo"=> 제출 버튼이 비활성화되었습니다.
- 사용자를 필드 값으로 변경하면 "bar"=> 제출 버튼이 활성화됩니다.
- 사용자가 필드 값을 "foo"=> 제출 버튼으로 다시 비활성화합니다.
이것을 달성하는 방법 jQuery? 어떤 형태로든 사용할 수있는 일반적인 솔루션이나 스크립트가 있습니까?
편집 : 간단한 더러운 상태 추적으로 제가 요구하는 것은 할 수 없습니다.
해결책
더러운 상태 추적을 사용하십시오. 모든 입력 제어에 부울 값 (예 : isdirty)을 부착하고 값이 변경 될 때마다이를 전환하십시오. 양식을 제출하는 동안 적어도 하나 이상의 값이 변경되었는지 확인한 다음 양식을 제출하십시오. 그렇지 않으면 사용자에게 경고를 표시합니다.
또 다른 해결책은 컨트롤 값이 변경 될 때마다 공통 기능을 호출하는 것입니다. 이 기능에서는 무언가가 변경된 경우 글로벌 변수 (isdirty)를 True로 설정하고 제출 버튼을 활성화/비활성화 할 수 있습니다.
var isDirty = false;
function SomethingChanged(){
if( !isDirty ) isDirty = true;
btnSubmit.disabled = !isDirty;
}
모든 컨트롤을위한 일반적인 기능
가정 : 각 컨트롤의 초기 값을 속성 "initval"에 추가합니다.
function SomethingChanged(control){
if( control.value != control.InitVal )
control.IsDirty = true;
else
control.IsDirty = false;
}
위의 기능에서 일반적인 기능에서는 TextBoxChanged 및 DropdownChanged와 같은 각 유형의 컨트롤에 대해 별도의 기능을 가질 수 있지만 각 컨트롤에 다음 두 가지 속성이 있습니다.
- initValue- 제어의 초기 값
- ISDIRTY- 통제의 가치가 변경되었음을 나타내는 부울 가치
다른 팁
단지 두 단계 :
- JavaScript 변수에 모든 초기 값의 해시를 저장
- 모든 입력을 해시로 재 계산하고 저장된 내용으로 검증합니다. 동일한 경우 제출 버튼을 비활성화하십시오. 그렇지 않은 경우 활성화하십시오.
살펴보십시오 유효성 검사 플러그인.
이것은 더 나은 대답처럼 보입니다.
나는 아래에서 무엇을 테스트하지 않았다 :-) 그러나 그것이 당신이 의미 하는가?
$(document).ready(function() {
$("#myform :input").attr("init",$(this).val()).bind("change.dirty", function(evt) {
if ($(this).val()!=$(this).attr("init")) $(this).addClass("dirty");
else $(this).removeClass("dirty");
$('#thebutton').attr("disabled",!$("#myform .dirty").size());
});
});
*-단창
전체 양식 객체를 저장하고 (그대로 또는 .Each ()와 반복하고 맵에 데이터를 저장 함)를 저장 한 다음 동일한 onsubmit을 수행하고 두 값을 비교할 수 있어야합니다.
당신이 사용할 수있는 더티 필드 대신 플러그인 및 set anotedirtyform : true. 이제 양식에 "DirtyForm"클래스가있는 경우 구원이없는 변경 사항이 있음을 의미합니다.
할 수있는 것은 페이지로드의 페이지를 스캔하기 위해 jQuery 스크립트를 설정하고 양식을 확인하고, 필드 및 해당 값을 목록에 확인한 다음 입력이 업데이트 될 때마다 해당 입력 참조 배열을 확인하는 것입니다.