JQuery $(this).find(Selector) returning this

Question

I have a form defined as this

<form name="NewForm">
    <td hidden>New</td>
    <td><input name="name" type="text"></td>
    <td><input name="url" type="url"></td>
    <td><input type="submit" value="New"></td>
    <td><input type="reset" value="Cancel"></td>
</form>

on submit i call

function submitForm(event,data)
{
    console.log($(this));


    var valid = true;
    var changed = false

    var input = $(this).find("input[name='name']");

    console.log("Name");
    console.log(input);
    console.log(input.val());
    console.log(input.prop( 'defaultValue' ));
}

the console then reports

Object { 0: <form>, context: <form>, length: 1 }
Name
Object { length: 0, prevObject: Object, context: <form>, selector: "input[name='name']" }
undefined
undefined

why am i not selecting the first input on the form called name?

EDIT: Entire code file

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div>
        <select id="SystemActive">
            <option value="Y">Active</option>
            <option value="N">Deleted</option>
        </select>
        <button id="SystemRefresh">Refresh</button><br>
        <table id="SystemTable" class="resultsGrid">
            <thead>
                <tr>
                    <th hidden>ID</th>
                    <th>Name</th>
                    <th>URL</th>
                </tr>
                <tr >
                    <form name="NewForm">
                        <td hidden>New</td>
                        <td><input name="name" type="text"></input></td>
                        <td><input name="url" type="url"></input></td>
                        <td><input type="submit" value="New"></input></td>
                        <td><input type="reset" value="Cancel"></input></td>
                    </form>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        $(function() {
            $("form").submit(submitForm)
        });

        function submitForm(event,data)
        {
            console.log($(event.target));


            var valid = true;
            var changed = false

            var input = $(this).find("input[name=name]");
            console.log("Name");
            console.log(input);
            console.log($(input).val());
            input = $(this).find("input[name='name']");
            console.log("Name2");
            console.log(input);
            console.log($(input).val());
            input = $(this).find("input[name='name']");
            console.log("Name3");
            console.log(input.attr('name'));

            event.preventDefault();
            return false;
        }

    </script>

</html>

Because `input[name='Name']` is not the same as `input[name='name']` — Adam Jenkins, Feb 06 '17 at 17:39
tried both form and selector uppercase and lower case, made no difference to result — MikeT, Feb 06 '17 at 17:39
case sensitivity makes a difference. The only other reason why you're code wouldn't be working is because `this` is not the form you believe it to be. How is `submitForm` being called? — Adam Jenkins, Feb 06 '17 at 17:42
Take a look - this fiddle (even using jQuery 1.7) works as you'd expect it to, again, provided you are binding the `submit` handler appropriately. https://jsfiddle.net/1kaguv3r/ — Adam Jenkins, Feb 06 '17 at 17:46
@Adam like this `$(function() {$("form").submit(submitForm)}` — MikeT, Feb 06 '17 at 17:48
MikeT we need to know how you are calling the submitForm function. If you did not use a JQuery hook such as `theForm.on('submit', function(e){ submitForm(e)})` then the $(this) is not a jquery object. This looks likely. So? — Vanquished Wombat, Feb 06 '17 at 17:50
MikeT - check out the updated fiddle that does **exactly** what you say you are doing (and it works): https://jsfiddle.net/1kaguv3r/1/ — Adam Jenkins, Feb 06 '17 at 17:51
well then please tell me why i'm doing exactly what i'm saying and its not? — MikeT, Feb 06 '17 at 17:53
Chances are, it's because you're not showing us exactly what you're doing, you just think you are. Please provide a minimum complete and verifiable example of how this doesn't work: http://stackoverflow.com/help/mcve Include the browser and version (and version of `jquery` you are using). — Adam Jenkins, Feb 06 '17 at 17:55
Though it sound weird but you should check the source html page generated for your php file in the browser to investigate or confirm that there is only one form element in your page. — Mohtisham Zubair, Feb 06 '17 at 18:22
@Mohtisham there is only 1 form but the final plan was to have several forms 1 for new items then one for each created item thats why i bound to the form element not a form ID is also why i'm using `this` to select the submitted form, — MikeT, Feb 06 '17 at 18:28
I m trying to put it on fiddle but post error is there. please try to close all input tags — Mohtisham Zubair, Feb 06 '17 at 18:38
@MikeT - using your **exact** code, I cannot reproduce this behaviour: https://jsfiddle.net/1kaguv3r/6/ (or https://jsfiddle.net/1kaguv3r/7/) What browser are you using? — Adam Jenkins, Feb 06 '17 at 18:45
@MikeT - your HTML is badly broken. Which may be the reason why this isn't working. `` doesn't have a closing tag. Also `form` is not a valid child of a `tr` tag. Only `th` or `td` is - the browser is trying to repair your HTML (and it does so incorrectly) which is why you are seeing this error. — Adam Jenkins, Feb 06 '17 at 18:49
its working when moving form out of table please check mine anser — Mohtisham Zubair, Feb 06 '17 at 18:51

score 1 · Answer 1 · answered Feb 06 '17 at 18:48

It got working when I moved your form tag out side of table.

     <form name="NewForm">
        <table id="SystemTable" class="resultsGrid">
            <thead>
                <tr>
                    <th hidden>ID</th>
                    <th>Name</th>
                    <th>URL</th>
                </tr>
                <tr >

                        <td hidden>New</td>
                        <td><input name="name" type="text" /></td>
                        <td><input name="url" type="url" /></td>
                        <td><input type="submit" value="New" /></td>
                        <td><input type="reset" value="Cancel" /></td>

                </tr>
            </thead>
           </table>
        </form>

and the last opening which is having an extra space it should be — Mohtisham Zubair, Feb 06 '17 at 19:02

score 1 · Accepted Answer · answered Feb 06 '17 at 18:52

The problem is because form is not a valid child of a tr tag. Only td or th can be a child of a tr tag. The browser tries to repair your broken HTML and does so incorrectly (as to what you originally intended), which is why the code isn't working as expected.

Either move your form tag outside the table element, or nest it inside a td

Just right click and inspect your submit element and you'll see the browser has repaired your form tag to be an element with no children.

1

Good catch @Adam. – Vanquished Wombat Feb 06 '17 at 18:58

VHS · Answer 3 · 2017-02-06T18:24:37.057

0

You are indeed selecting the first input element named 'name' with the statement var input = $(this).find("input[name='name']");. It is working as expected. See the following where I am able to select the first input element with the name 'name' and print its attributes.

$('[name="NewForm"]').submit(function( event ) {
   var input = $(this).find("input[name='name']");
  console.log(input.attr('name'));
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="NewForm">
    <td hidden>New</td>
    <td><input name="name" type="text"></td>
    <td><input name="url" type="url"></td>
    <td><input type="submit" value="New"></td>
    <td><input type="reset" value="Cancel"></td>
</form>

edited Feb 06 '17 at 18:24

answered Feb 06 '17 at 17:50

VHS

9,534
3
19
43

To give the OP a working snippet. How else otherwise I would show a working demo. – VHS Feb 06 '17 at 17:51
Don't use `onclick` to bind a submit handler to a form - use the `submit` event. And if you use the `submit` event, you can access `this` to be the `form` element (which the OP already has demonstrated). – Adam Jenkins Feb 06 '17 at 17:52
@Adam, sorry, I didn't pay attention to it earlier. I updated my answer. – VHS Feb 06 '17 at 18:14
@VHS **It's working as expected** isn't an answer, it's a comment. – Adam Jenkins Feb 06 '17 at 18:14
i added `console.log(input.attr('name'));` to my submit function result = "undefined" so unless you can point me at the part of your example that is correcting the issue then it isn't working – MikeT Feb 06 '17 at 18:37
@MikeT, I see your full code now. You should have given it earlier to save time. As the other answer states, it is because your form and table nesting is invalid. – VHS Feb 06 '17 at 19:03

score 0 · Answer 4 · answered Feb 06 '17 at 18:52

0

It is actually the markup that's wrong. You are putting the form inside the tr. Move the form before the table and close it after and the code should work fine.

The Updated code which works is at this JSFiddle: https://jsfiddle.net/xq940hf1/

answered Feb 06 '17 at 18:52

Suthan Bala

3,209
5
34
59

can you explain why that is a problem? – MikeT Feb 06 '17 at 18:55
@MikeT see http://stackoverflow.com/questions/12634715/which-dom-elements-can-be-child-of-tr. Browsers tend to do their best to assist but often they dont achieve what one might hope for. – Vanquished Wombat Feb 06 '17 at 19:12

JQuery $(this).find(Selector) returning this

4 Answers4