Отправить форму, используя AJAX `onKeyUp` в каждой <tr>строке таблицы в ванили JavaScript - PullRequest
Новая
       14

Отправить форму, используя AJAX `onKeyUp` в каждой <tr>строке таблицы в ванили JavaScript

0 голосов
/ 14 апреля 2020

У меня есть таблица, полная строк, в которых есть тег <form> и теги <input> внутри ячеек, как показано в разметке ниже. 

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th> 
  </tr>
  <tr>
   <form>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Firstname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Lastname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="number" name="Age"/></td>
   </form>      
  </tr>
  <tr>
   <form>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Firstname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Lastname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="number" name="Age"/></td>
   </form>      
  </tr>
........
</table>

Теперь я хочу отправить каждую строку Форма с использованием чистой функции Vanilla JavaScript Ajax всякий раз, когда кто-либо вводит теги ввода в соответствующую форму. Моя Ajax функция проста: она заставляет объект формы выбирать значение всех элементов формы всякий раз, когда набирается любой элемент. 

function searchGet(incomingForm) {
    var FD = new FormData(incomingForm);    
    var ajx = new XMLHttpRequest();
    ajx.onreadystatechange = function () {
        if (ajx.readyState == 4 && ajx.status == 200) {
            console.log(ajx.responseText);
        }
    };
    ajx.open("POST", "submit.php", true);
    ajx.send(FD);
    return false;
}

Теперь проблема в том, что this.parentNode.parentNode не выбирает элемент <FORM> но он напрямую выбирает элемент <TR>. Так как я могу заставить его работать идеально?

Примечание: Я пробовал много других способов, но не смог сделать это как ...

  • this.parentElement.parentElement
  • this.parentNode.parentNode
  • this.closest(form)

1 Ответ

1 голос
/ 14 апреля 2020

Как видите здесь , вы не можете размещать формы между tr элементами. Решение рестайлинг, чтобы напоминать таблицу. Кроме того, используйте addEventListener, чтобы получить более элегантный код. 

document.body.addEventListener("keyup", function(ev) {
  if (ev.target.tagName == "INPUT") {
    console.log(ev.target.closest("form").id);
  }
});
div { display: inline-block; width: 100px; }
input {width: 95px; }
<div>Firstname</div>
<div>Lastname</div>
<div>Age</div>
<form id="first">
  <div><input type="text" name="Firstname" /></div>
  <div><input type="text" name="Lastname" /></div>
  <div><input type="number" name="Age" /></div>
</form>
<form id="second">
  <div><input type="text" name="Firstname" /></div>
  <div><input type="text" name="Lastname" /></div>
  <div><input type="number" name="Age" /></div>
</form>
...