Take the 2-minute tour ×

I think this should be a simple one -- someone tell me what obvious mistake I'm making!

I have a simple html form:

<form action="/api/userattributes" method=get>
<select name=action>
Attrib Name: <input name=name type=text size=20 value="">
Attrib Value: <input name=value type=text size=50 value="">
<br />
<input type=submit name="Go!">

And a simple jquery function that wants to touch some of the input fields in the form before they get submitted:

            function() {
        return true; // ensure form still submits

So that works fine. But if I format the form with a table, my function no longer does anything. Well, I thought, maybe the problem is that the children of the form are table elements (though that seems very weird), so I tried .find() instead of .children(), which again works with the vanilla version but not with the table version.

So how do I find the form fields if my form is in a table?

share|improve this question
Can you show the markup for the version that doesn't work? –  T.J. Crowder May 6 '11 at 4:57
"format a form with a table"..can you please clarify on this.? –  Misam May 6 '11 at 4:59
The table formatting turned out to be slightly bad: <form><table>...</table></form> worked fine, but <table><form></table></form> failed. Live and learn. –  Dave Orr May 6 '11 at 5:22
add comment

1 Answer

up vote 3 down vote accepted

Can you post your table code, as I made a guess at some table layout you would have used and had a working example pretty quickly: http://jsfiddle.net/3wCk9/

Note I found two errors:

  1. Your selector was ':input[value=""]' and I changed that to 'input[value=""]'
  2. Need to use find rather than children as you suspected:

Given a jQuery object that represents a set of DOM elements, the .children() method allows us to search through the immediate children of these elements in the DOM tree

Source: http://api.jquery.com/children/


It sounds like you discovered your own solution, and I thought I'd better include it here for reference.

You were using:


Whereas you should have switched the <form> and <table> around (as you did) so that the <table> was nested inside the form.

As you discovered, you can't have elements freely inside a <table> (everything must be in rows and columns). As a result, while it appears as though the rows and columns are sitting inside the form, it turns out they aren't actually nested inside it at all, and so aren't within the descendants that the find method searches.

share|improve this answer
Both HTML4 and HTML5 allow quotes around attributes to be omitted if the attribute value doesn't have spaces. XHTML would requires quotes, but he hasn't said he's using XHTML and from the format of the input tags, he isn't. (Although the br tags point the other way.) –  T.J. Crowder May 6 '11 at 5:05
I tried wrapping the attributes in quotes, no change. There was a close form tag in my code which I inadvertently left out here, edited to fix it. –  Dave Orr May 6 '11 at 5:06
@T.J. Crowder, well there you go, things you learn. –  Matt Mitchell May 6 '11 at 5:07
+1 for your edit, find instead of children is very likely the solution. –  T.J. Crowder May 6 '11 at 5:07
Aha. If you aren't careful about the order of the form tag and the table tag it fails. Thanks, great answer. –  Dave Orr May 6 '11 at 5:20
show 2 more comments

Your Answer


