[jQuery] Forms, Tables and jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
I'll repost it from a russian forum (from here:
<a class="moz-txt-link-freetext" href="http://rsdn.ru/Forum/Message.aspx?mid=2469963">http://rsdn.ru/Forum/Message.aspx?mid=2469963</a>)
Firefox/Opera won;t find form elements if the form tag is placed
between <table> and <tr> tags:
<font size="2">
<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>input type query tests</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Traditional iteration over elements (works always in every browser)
var fElements = document.forms['form1'].elements;
for (var i = 0; i < fElements.length; i++) {
alert(fElements[i].name + "=" + fElements[i].value);
}
// Can we find the form itself? (Yes)
alert($("form[@name=form1]")[0].name);
// Traditional method (Opera/Firefox can't find anything)
$("form[@name=form1] input").each(function() {
alert(this.name + "=" + this.value);
});
// Advanced (Opera/Firefox can't find anything)
$("#form1 :checkbox").each(function() {
alert(this.name + "=" + this.value);
});
});
</script>
</head>
<body>
<table>
<b><form name="form1" action="?" method="POST"></b>
<tr>
<td>
<input type="checkbox" name="chbx1" value="1">chbx1<br/>
<input type="text" name="txt1" value="2"><br/>
<input type="radio" name="radio1" value="3">chbx[]<br/>
<input type="hidden" name="hid1" value="4"><br/>
</td>
</tr>
</form>
</table>
</body>
</html></pre>
</font>
A small discussion started. "Correct" browsers probably remove the form
tag and place it outside the table element. The original poster
suggested out that jQuery should iterate over form.elements if special
form selectors are used because a lot of legacy code uses incorrectly
placed form tags.
So the question is: How can we find form elements when the form tag is
incorrectly placed in the table tag? Using jQuery of course :)