Невозможно использовать .find (), чтобы получить значение из таблицы / формы

Question

Пытаюсь сейчас обернуть это вокруг себя. Некоторый гуру должен помочь мне, это было бы очень признательно. Я не знаю, почему это не работает.

$(".form").on('submit', function(event) {
  event.preventDefault(); //prevent the forms default action
  var surname = $(this).find(".surname");
  console.log(surname);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <form class="form" method="post" action="nextpage.php">
    <tr>
      <td class="name">john</td>
      <td class="surname">smith</td>
      <td>british</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>

  </form>

  <form class="form" method="post" action="nextpage.php">
    <tr>
      <td class="name">bob</td>
      <td class="surname">doe</td>
      <td>american</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>
  </form>
</table>

Так что, если я нажму на первую кнопку отправки, я должен увидеть Джона, а второй, Боб.

Answer 1

Как указано в комментариях, ваша HTML семантика неверна. Это первая причина, почему это не работает. Во-вторых, вы можете использовать jQuerys .text () , чтобы получить «значение» HTML элемента.

Чтобы заставить его работать, см. Пример <table> элемент теперь перемещен внутри элемента <form>. В зависимости от ваших потребностей это одно из возможных решений.

$(".form").on('submit', function(event) {
  event.preventDefault(); //prevent the forms default action
  var surname = $(this).find(".surname");
  console.log(surname.text()); // here .text() is the only change in your js code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <form class="form" method="post" action="nextpage.php">
  <table>
    <tr>
      <td class="name">john</td>
      <td class="surname">smith</td>
      <td>british</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>
</table>
  </form>

  <form class="form" method="post" action="nextpage.php">
  <table>
    <tr>
      <td class="name">bob</td>
      <td class="surname">doe</td>
      <td>american</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>
    </table>
  </form>

Подробнее о разрешенных элементах внутри элемента <table>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Подробнее о разрешенных элементах элементы внутри <form> теги здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Answer 2

Я исправил ваш код:

1. <form> обертывает вокруг <table>
2. Поймайте клики по <buttons> и получите фамилию относительно строки, по которой щелкнули (<tr>)

$("button[type=submit]").on('click', function(event) {
  event.preventDefault(); //prevent the forms default action
  var surname = $(this).closest('tr').find(".surname");
  console.log(surname.text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" method="post" action="nextpage.php">
  <table>
    <tr>
      <td class="name">john</td>
      <td class="surname">smith</td>
      <td>british</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>

    <tr>
      <td class="name">bob</td>
      <td class="surname">doe</td>
      <td>american</td>
      <td><button type="submit" class="btn btn-info btn-sm">Submit</button></td>
    </tr>
  </table>
</form>

JSFiddle: https://jsfiddle.net/v9k3sL1f/

Answer 3

просто поместите class = "form" и action внутри тега tr, и все заработает.