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: 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
– Felix Kling, Commented Sep 7, 2014 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
– Popnoodles, Commented Sep 7, 2014 at 18:16

Popnoodles · Accepted Answer · 2014-09-07 18:15:16Z

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 7, 2014 at 18:15

answered Sep 7, 2014 at 18:09

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Cᴏʀʏ Over a year ago

@a7omiton: You also mentioned "nested form." One <form> should not be nested within another; that's also invalid HTML structure. See stackoverflow.com/questions/379610/can-you-nest-html-forms

Popnoodles Over a year ago

Good observation. Have you nested a form inside a form @a7omiton ?

a7omiton Over a year ago

oh no, i don't have a nested form, when i said that i was just referring to the form inside the table

a7omiton Over a year ago

@Popnoodles in the second acceptable structure you mentioned <tr> <td> <form> <input>, but that stores everything in one cell?

Popnoodles Over a year ago

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.

|

Collectives™ on Stack Overflow

Get value of nested form element on submit jQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related