jquery - 如何識別表單字段類型

我的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（「類型」），因爲它沒有爲文本區域和標籤的工作。

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

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

有沒有一種方法可以獲取表單中的所有元素，包括標籤，textarea和單選按鈕。

來源

2011-08-23 truthSeekr

你只想'輸入'，'標籤'和'textarea'元素，還是'form'元素的所有子元素（例如，在你的例子中包含'li'或'a'元素）？ –

'$（this）.type'沒有定義，你應該使用'this.type'。 – Paulpro

詹姆斯，我想獲得所有形式相關的元素，如標籤，輸入，textarea，廣播等，最好按照他們的形式 – truthSeekr

$(this).type是不確定的，你應該使用this.type訪問類型屬性。你並不需要使用map()來獲取元素。您可以使用它代替：

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

但由於內容將不包括labels你應該選擇你想要的元素與選擇。此外，由於<label>沒有type屬性，因此您可以訪問它們的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); 
    }); 
}

來源

2011-08-23 21:33:33 Paulpro

標籤沒有類型屬性，因此您需要針對該情況進行幾項更改。我將編輯我的帖子。 – Paulpro

完美。很棒。感謝您的幫助 – truthSeekr

嘗試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()); 
     } 
    }); 
}

來源

2011-08-23 21:32:45

爲什麼不簡單地抓住所有的表單元素？

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

這應該抓住所有輸入標籤和textarea標籤。

如果你需要更多的標籤，只是逗號分隔多個標籤名稱。

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

來源

2011-08-23 21:33:57 Tejs

它們顯示保存的順序是？我將不得不嘗試一下 – truthSeekr

我不能告訴你那個，但它會選擇所有的元素。 – Tejs

它確實保留了它們在窗體中出現的順序。謝謝 – truthSeekr

1）@Tejs點，你可以用$（ '輸入，文本區域'）

2），以獲得type屬性使用

$(this).attr('type')

來源

2011-08-23 21:37:06 Guard

jquery - 如何識別表單字段類型

回答

相關問題