按下提交按钮时，使用javascript获取特定表单的输入值

Question

我有一个包含许多类似表单的页面，当我按下提交按钮时，我想获取输入字段的值。 我在JSFiddle上试过这个，它似乎有效。 当我在我的网站上尝试此操作时，它返回“未定义”。

HTML：

<tr>
    <form action="editline.php" method="POST" class="editline">
        <input type="hidden" name="editID" class="form-control id" value="123456">
        <td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td>
        <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td>
        <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td>
        <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
    </form>
</tr>
<tr>
    <form action="editline.php" method="POST" class="editline">
        <input type="hidden" name="editID" class="form-control id" value="987654">
        <td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td>
        <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td>
        <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td>
        <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td>
    </form>
</tr>

JS：

$('.editline').submit(function(e) {
    e.preventDefault();

    var id = $(this).find('input.id').val();
    var name = $(this).find('textarea.name').val();
    var address = $(this).find('input.address').val();
    var colour = $(this).find('input.colour').val();

    alert(id + ' ' + name + ' ' + address + ' ' + colour);
});

表格在表格中是否有问题？ 有没有其他方法可以获取按下提交按钮的表单的输入值？

提前致谢。

Edit:// 好的，既然问题是由表格中的表格引起的，有没有解决方法？ 我想为此使用一张桌子。

Edit2:// 这个 JS 工作得很好，当表单在表格中时（ FSFiddle ）：

$('.editline').submit(function(e) {
    e.preventDefault();
    var tr = $(this).closest('tr');
    var id = tr.find('input.id').val();
    var name = tr.find('textarea.name').val();
    var address = tr.find('input.id').val();
    var colour = tr.find('input.colour').val();

    alert(id + ' ' + name + ' ' + address + ' ' + colour);
});

Answer 1

只需将整个表格包裹在表格中即可。 这将解决无效 HTML 的问题。

 $('.editline').submit(function(e) { e.preventDefault(); var id = $(this).find('input.id').val(); var name = $(this).find('textarea.name').val(); var address = $(this).find('input.address').val(); var colour = $(this).find('input.colour').val(); alert(id + ' ' + name + ' ' + address + ' ' + colour); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="editline.php" method="POST" class="editline"> <table> <tr> <td data-label="Name"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea></td> <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td> <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td> <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button> </td> </tr> </table> <input type="hidden" name="editID" class="form-control id" value="987654"> </form>

Answer 2

您只能使用一种形式，然后将操作设置为按钮并获取与其输入最接近的行。 然后，在单击功能中，您可以向表单调用 ajax 帖子。

 $('.editline button').click(function(e) { e.preventDefault(); var tr = $(this).closest('tr'); var id = tr.find('input.id').val(); var name = tr.find('textarea.name').val(); var address = tr.find('input.address').val(); var colour = tr.find('input.colour').val(); alert(id + ' ' + name + ' ' + address + ' ' + colour); });

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form action="editline.php" method="POST" class="editline"> <table> <tr> <td data-label="Name"><input type="hidden" name="editID" class="form-control id" value="123456"><textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name1</textarea></td> <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address1" autocomplete="off" required></td> <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour1" autocomplete="off" required></td> <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td> </tr> <tr> <td data-label="Name"> <input type="hidden" name="editID" class="form-control id" value="987654"> <textarea name="editName" class="form-control name" rows="1" autocomplete="off" required>Name2</textarea> </td> <td data-label="Address"><input type="text" name="editAddress" class="form-control address" value="Address2" autocomplete="off" required></td> <td data-label="Colour"><input type="text" name="editColour" class="form-control colour" value="Colour2" autocomplete="off" required></td> <td data-label="Edit"><button type="submit" class="btn btn-info btn-sm">Edit</button></td> </tr> </table> </form>

Answer 3

例如：

 function geti() { var i = document.getElementById('i').value; var iv = document.getElementById('iv'); iv.innerHTML = i; }

 <input type="text" id="i"> <button onclick="geti();">Click Me</button> <p id="iv"></p>