Получить входное значение определенной формы с помощью 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);
});

Проблема в том, что формы находятся в таблицах?Есть ли другой способ просто получить входные значения формы, в которой была нажата кнопка отправки?

Заранее спасибо.

Редактировать: // Хорошо, поскольку проблема вызванаформа в таблице, есть ли обходной путь?Я хотел бы использовать таблицу для этого.

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

Вы можете использовать только одну форму, затем установить действие для кнопки и получить ближайшую строку с ее входами.Затем в функции 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>