Question

我有一个定义为此

的表单

<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>

提交我致电

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' ));
}

然后控制台报告

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

为什么我没有在名为name的表单上选择第一个输入？

编辑：整个代码文件

<!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>

Answer 1

当我将表格标签移到桌子旁边时，它正常工作。

     <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>

Answer 2

问题是因为form不是tr代码的有效子代。只有td或th可以是tr代码的子代。浏览器会尝试修复损坏的HTML，并且不正确地进行修复（至于您最初的意图），这就是代码未按预期运行的原因。

将表单标记移到table元素之外，或将其嵌套在td

中

只需右键点击并inspect您的提交元素，您就会看到浏览器已修复您的form标记是一个没有孩子的元素。

Answer 3

您确实选择了名为＆＃39; name＆＃39;的第一个输入元素。声明var input = $(this).find("input[name='name']");。它按预期工作。请参阅以下内容，我可以选择名称为＆＃39; name＆＃39;的第一个输入元素。并打印其属性。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

实际上标记错了。您将form放在tr内。在form之前移动table并在之后关闭它，代码应该可以正常工作。

更新的代码在这个JSFiddle：https://jsfiddle.net/xq940hf1/

JQuery $（this）.find（Selector）返回此

4 个答案: