Why this jquery selector does not work?

Question

I have a task from a client to correct a page and I found that jQuery descendant selector does not behave as expected.

Here is an excrept of the HTML:

<form action="http://submit.url/subscribe.php" method="post" enctype="multipart/form-data" id="mssysform8217" class="mssysform" >
<div id="mssys-formcontainer">
    <div class="formfields">
        <table style="width: 100%">
        <div class="formfield-item" id="formfield-item-email">
            <tr>
            <td class="style1"><label >E-mail címe</label></td>
            <td>
                <input type="text" name="email" value="">
                <div class="error-container">Please fill in this field!</div>
                <div style="clear: both;"></div>
            </td>
            </tr>
        </div>
        </table>
    </div>
</div>
</form>

I tried to debug it with FireFox:

• this worked:

  console.debug($("#mssysform8217 :input[name='email']").val());
  

  [email protected]

• this did not worked:

  console.debug($("#mssysform8217 #formfield-item-email :input[name='email']").val());
  

  undefined

• but:

  console.debug($("#mssysform8217 #formfield-item-email"));
  

  [div#formfield-item-email.formfield-item]

The problem is that the submit script is generated by a third party app and it wants to use the 3 level descendant selector.

Answer 1

The jQuery selector you are trying to use will not work because the HTML is invalid.

<table style="width: 100%">
        <div class="formfield-item" id="formfield-item-email">
            <tr>

This is not valid HTML. It is not valid to place a div (or any element other than <thead>, <tfoot>, <tbody>, <tr>) in the middle of a table outside of a cell.

This is valid:

<div>
  <table>
    <tr><td></td></tr>
  </table>
</div>

Or this is valid:

<table>
  <tr><td><div></div></td></tr>
</table>

---

On a side note: You are using the table to format your form. Tables are meant for tabular data. Using tables for layout is a bad idea in my book. Use proper semantics for HTML elements (tables = tabular data, li=lists, div=page divisions, etc...).