jQuery : 완료 할 각 입력 섹션을 어떻게 확인합니까?

Question

입력이 대부분 텍스트와 선택을 혼합하는 양식을 작성하려고합니다. x 번호 입력이 완료되면 아약스를 시작하고 싶습니다. .change() 함수를 사용해 보았지만 IE에서 문제가 발생했습니다.

예 :

<div id='section'> 
    <input type=text> 
    <input type=text> 
    <select> 
     <option></option> 
     <option></option> 
    </select> 
    <select> 
     <option></option> 
     <option></option> 
    </select> 
</div> 

나는 4 개 입력이 완료 뭔가를 할 때 난 그냥 원하는 버튼을 제출하지 않습니다. 전에 내가 말했듯이 .change()는 IE를 사용할 때 선택 문제를 처리 할 때 문제가있었습니다.

흐림/대한 focusOut 모든 입력을 결합하고 모든 입력 작업을하거나 더 나은 방법이에 완료를 확인하기 위해 묶는시겠습니까?

나는

$('#section input').bind($.browser.msie ? 'focusout' : 'blur', function(e) { 
// blur also has issues with IE so look for focusout in IE 
console.log($(this)); 
} 

가 난 그냥 빨리 4 내 경우 아약스에서 작업을 트리거를 작성하는대로 원하는 작성되는 입력의 순서에 대한 상관 없어 지금이 이러한 입력 값으로 호출하십시오.

일부 브라우저 및 jQuery 정보. IE 6+ 및 각 주요 브라우저를 3 가지 버전으로 지원해야합니다. jQuery를 1.6.2

Answer 1

보다 쉽고 일관성있는 접근 방법은 해당 이벤트는 폼 요소의 유형에 대한 편견이 될 것이기 때문 change 이벤트에 바인딩하는 것입니다.

HTML :

<form id="myform"> 
    <div id="section"> 
     <input name="baz" type="text" /> 
     <input name="bat" type="text" /> 
     <select name="foo"> 
      <option value=""></option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
     <select name="bar"> 
      <option value=""></option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </div> 
</form> 

JQuery와 :

$('select,input').change(function() { 
    var allgood = true; 
    $('#section').children().map(function() { 
     if (this.value.length.length < 1) { 
      allgood = false; 
     } 
    }); 
    if(allgood){ 
     $('#myform').submit(); 
    } 
}); 

DEMO :http://jsfiddle.net/AlienWebguy/5bcgW/

뭔가 고려해야 할 :이 코드는 양식 필드가 직접 자식 노드가 될 것입니다 가정 <div id="section"> parent. 구조체를 변경하면 JQuery 선택기가 map() 함수의 양식 필드를 잡는 방법을 기록해 두십시오.

Answer 2

Alien's answer 나를 올바른 방향으로 인도하십시오.

이 모든 AJAX에 의해 조작과 DOM 구조가 다소 복잡해진다되는 세 가지 섹션이 등록 양식입니다.

두 가지 방향에서 접근해야했습니다.

는 우선 이것은 내가 jQuery.UI을위한 달력 조회에있는 버튼을 제외하고 필요한 입력의 수를 준 부분

var firstinputs = $('#firstFieldCollection input[type="text"], select).length; 

당 입력의 수를 알고 있었다. 나는 특정 입력이 IE6 +에서 작동하는지 파악으로 내가 한

두 번째는 .change 이벤트였다.그래서 다음과 같습니다 :이 날 입력의 첫 번째 섹션 만 필드가 작성된다 일단 AJAX가 발광 할 수 있도록 캡처 할 수 있습니다 다음 작업에 다음 AJAX는 다음 섹션의 데이터를 반환

$('#firstFieldCollection input,select).change(function() { 
    var itemcount = 0; 
    $('#personalFieldsCollection input[type="text"], select').each(function(i,v) { 
     if(v.value.length > 0) { 
      itemcount++; 
     } 
    )}; 
    if(itemcount===firstinputs) { 
     //Do something once all inputs are filled in. 
    } 
}); 

.