jquery - 양식 필드 유형을 식별하는 방법

Question

양식의 다양한 요소와 유형을 알고 싶습니다.

내 HTML은 다음과 같습니다

<form action="save_form" method="post" id="newform" name="newform"> 
      <div class="form_description"> 
      <h2 class="editable">Form title. Click here to edit</h2> 
      <p class="editable">This is your form description. Click here to edit.</p> 
      </div> 
      <ul id="form_body" class="ui-sortable"> 
      <li id="field1" class=""> 
      <a href="#" onclick="return false;" class="hover"> 
      <label class="editable" for="field1">Text1</label> 
      <input type="text" name="field1" value=""> 
      </a> 
      </li> 
      <li id="field2" class=""> 
      <a href="#" onclick="return false;" class="hover"> 
      <label class="editable" for="field2">Paragraph2</label> 
      <div><textarea cols="" rows="" class="textarea" name="field2"></textarea></div> 
      </a> 
      </li> 
      <li id="radiogroup3" class=""> 
      <a href="#" onclick="return false;" class="hover"> 
      <label class="editable" for="radiogroup3">Label3</label> 
      <input type="radio" id="radiogroup31" name="radiogroup3" value="1" class="element radio"> 
      <label class="choice editable" for="radiogroup31">option1</label> 
      <input type="radio" id="radiogroup32" name="radiogroup3" value="2" class="element radio"> 
      <label class="choice editable" for="radiogroup32">option2</label> 
      <input type="radio" id="radiogroup33" name="radiogroup3" value="3" class="element radio"> 
      <label class="choice editable" for="radiogroup33">option3</label> 
      </a> 
      </li></ul> 
     </form> 

나는 아래의 기능을 함께했다하지만 불을 지르고 콘솔이 올바른 값을 보여줍니다에도 불구하고 (정의되지 않은) 값을 this.type 반환하지 않습니다.

attr ('type')은 텍스트 영역과 레이블에서 작동하지 않으므로 사용할 수 없습니다.

test = $('#newform').map(function(){ return $.makeArray(this.elements); }); 

if (test.length != 0) { 
    test.each(function(){ 
     console.log($(this).type); 
    }); 
} 

레이블, 텍스트 영역 및 라디오 버튼을 포함하여 양식의 모든 요소를 ​​가져올 수있는 방법이 있습니까?

Answer 1

$(this).type가 정의되지 않은, 당신은 유형의 속성에 액세스 this.type를 사용한다. 요소를 가져 오는 데 실제로 map()을 사용할 필요는 없습니다. 대신이를 사용할 수 있습니다

var $test = $($newform.get(0).elements); 

그러나 요소 이후

은 포함되지 않습니다 그냥 셀렉터 원하는 요소를 선택해야합니다 labels. 또한 <label>의 유형 등록 정보가 없으므로 대신 nodeName에 액세스 할 수 있습니다 ( label).

var $test= $('#newform').find('input,label,textarea'); 

if ($test.length != 0) { 
    $test.each(function(){ 
     var type = this.type ? this.type : this.nodeName.toLowerCase(); 
     console.log(type); 
    }); 
} 

Answer 2

this.nodeName 및 $(this).attr('type') (또는 this.type)를보십시오 :

test = $('#newform').map(function(){ return $.makeArray(this.elements); }); 

if (test.length != 0) { 
    test.each(function(){ 
     if(this.nodeName.toLowerCase() == "input") { 
      console.log($(this).attr('type')); 
     } else { 
      console.log(this.nodeName.toLowerCase()); 
     } 
    }); 
} 

Answer 3

단순히 모든 양식 요소를 가져 오지 않는 이유는 무엇입니까?

$('#myForm').find('input,textarea') 

모든 입력 태그와 텍스트 태그를 가져와야합니다.

태그가 더 필요한 경우 태그 이름을 쉼표로 구분하십시오. @Tejs 지점으로

$('#myForm').find(('input,textarea,li'); // etc 

Answer 4

1), 당신은

$(this).attr('type')