I would like to know the different elements and their types in a form.
My HTML looks like this:
<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>
I came up with the function below but this.type does not return any value (undefined) even though firebug console shows the correct value.
I cannot use attr('type') since it does not work for textarea and labels.
test = $('#newform').map(function(){ return $.makeArray(this.elements); });
if (test.length != 0) {
test.each(function(){
console.log($(this).type);
});
}
Is there a way in which I can get all elements in a form, including label, textarea and radio buttons.
$(this).type
is undefined, you should be using this.type
to access the type property. You don't really need to use map()
either to get the elements. You can use this instead:
var $test = $($newform.get(0).elements);
But since elements won't include labels
you should just select the elements you want with a selector. Also since <label>
's don't have a type property you can access their nodeName instead which will be 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);
});
}
1) as @Tejs points, you can use $('input,textarea')
2) to get the type
attribute use
$(this).attr('type')
Try this.nodeName
and $(this).attr('type')
(or 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());
}
});
}
Why not simply grab all the form elements?
$('#myForm').find('input,textarea')
That should grab all input tags and textarea tags.
If you need more tags, simply comma delimit more tag names.
$('#myForm').find(('input,textarea,li'); // etc
精彩评论