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虽然没有返回任何值（undefined） firebug控制台显示正确的值。

我不能使用attr（'type'），因为它不适用于textarea和标签。

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

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

有没有办法可以获取表单中的所有元素，包括标签，文本区域和单选按钮。

Answer 1

尝试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 2

$(this).type未定义，您应该使用this.type来访问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 3

为什么不简单地抓住所有表单元素？

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

那应该抓住所有输入标签和textarea标签。

如果您需要更多标签，只需逗号分隔更多标签名称即可。

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

Answer 4

1）当@Tejs指向时，你可以使用$（'input，textarea'）

2）获取type 属性使用

$(this).attr('type')

jquery - 如何识别表单字段类型

4 个答案: