CODEWITHSUNDEEP
jqueryselector
MikeT
MikeT

Reputation: 5500

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

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>

Upvotes: 0

Views: 1273

Answers (4)

Suthan Bala
Suthan Bala

Reputation: 3299

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/

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55623

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.

Upvotes: 1

Mohtisham Zubair
Mohtisham Zubair

Reputation: 723

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>

Upvotes: 1

VHS
VHS

Reputation: 10184

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>

Upvotes: 0

Related Questions