Question

我的页面上有许多类似的表单，并且当我按下“提交”按钮时，我想获取输入字段的值。我在JSFiddle上进行了尝试，它似乎正在工作。当我在网站上尝试此操作时，它返回“ undefined”。

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：//，当表格位于表格（FSFiddle）中时，此JS效果很好：

$('.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

您只能使用一种形式，然后将操作设置为按钮并获得与其输入最接近的行。然后，在click函数中，您可以在表单中调用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>

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

3 个答案: