Question

The following situation works fine (JSP file):

<p class="FormInputElement">
        <label for="description">Description</label>
        <input type="text" class="description" id="description"/><br />
</p>
<button class="Button75" type="submit" id= "editWidget" alt="Edit widget">
        <img src="/tis/img/icons/tick.png">
                Save
</button>

In my Servlet, a .JS file, the description value can be read like this:

$(function() {
    $("#editWidget").click(function(e){
        var description = $(this).parent().find('.description').val();

However, if I put <fieldset> tags around the button, the description is always “”. The servlet can’t read the value anymore. How is this possible? What changes when using a fieldset?

Thanks in advance!

Answer 1

Your original markup structure is this

• DIV (or any other container)
  • P
    • LABEL
    • INPUT#description
  • BUTTON#editWidget

Here $(this).parent() would go to the DIV, and .find() would work from there, finding the expected element.

With <fieldset>, the markup structure changes to

• DIV
  • P
    • LABEL
    • INPUT#description
  • FIELDSET
    • BUTTON#editWidget

Here $(this).parent() would go to the FIELDSET, and .find() would find nothing.

Solution: Don’t use .parent(), use .closest("div").