Get value of nested form element on submit jQuery

Question

I'm trying to get the value of an form input, which is inside a table cell, but it is getting returned as undefined.

$('.js-form').submit(function(event) {
        alert($(this).children().has("input[name='points']").val());
});

My HTML is as follows:

<tr>
<form action='...' method='post' class='js-form'>
    <td><input type='text' name='points'/></td>
</form>
</tr>

There are multiple of these forms on the same page, I'm under the impression that using $(this) will restrict my DOM traversal to the selected form that the function is currently handling, but not sure why I don't get any value back? (there is a value in the field)

In the best case, you are trying to get the value from the `td` element. Have a look at the documentation: http://api.jquery.com/has/. However, your HTML is invalid and the browser might actually render a totally different DOM (e.g. move the form out of the row). — Felix Kling, Sep 07 '14 at 18:05
@johnSmith That line you posted will cause a syntax error, and it would just alert the literal string if it didn't. Also, there may be more than one `input[nqme='points']` which would explain why OP is seeking from the form itself. — Popnoodles, Sep 07 '14 at 18:16

Popnoodles · Accepted Answer · 2014-09-07T18:15:16.023

1

Use .find()

alert( $(this).find("input[name='points']").val() );

There is a problem with your HTML though; You can't nest a form between a tr and a td. http://www.w3.org/TR/html401/struct/tables.html#h-11.2.5

This could mean the browser renders your code differently to what you expect. These are both acceptable structures:

<form action='...' method='post' class='js-form'>
    <table>
        <tr>
            <td><input type='text' name='points'/></td>
        </tr>
    </table>
</form>

<table>
    <tr>
        <td>
            <form action='...' method='post' class='js-form'>
                <input type='text' name='points'/>
            </form>
        </td>
    </tr>
</table>

edited Sep 07 '14 at 18:15

answered Sep 07 '14 at 18:09

Popnoodles

28,090
2
45
53

1

@a7omiton: You also mentioned "nested form." One `
` should not be nested within another; that's also invalid HTML structure. See http://stackoverflow.com/questions/379610/can-you-nest-html-forms
– Cᴏʀʏ Sep 07 '14 at 18:20
Good observation. Have you nested a form inside a form @a7omiton ? – Popnoodles Sep 07 '14 at 18:20
oh no, i don't have a nested form, when i said that i was just referring to the form inside the table – a7omiton Sep 07 '14 at 18:22
@Popnoodles in the second acceptable structure you mentioned `
`, but that stores everything in one cell?
– a7omiton Sep 07 '14 at 18:26
Based on the code given, "everything" is one input field. You can't mix table structure with other elements. You need to work around that restriction. – Popnoodles Sep 07 '14 at 18:28
colspan ftw :p That was the issue. Thanks so much for pointing out this flaw! – a7omiton Sep 07 '14 at 19:07

Get value of nested form element on submit jQuery

1 Answers1