Получить все значения из URL без имени textarea

Question

Я хочу получить данные всех полей отдельно от таблицы. Так как таблица создается динамически, то основная проблема - вновь созданная.

Пожалуйста, проверьте:

Я пытался получить все поля, используя Javascript, но я все еще не могу получить значения вновь созданных строк. Пожалуйста, проверьте скриншот результата метода Javascript:

Я хочу получить все поля табличных значений, включая вновь созданные значения ... чтобы я мог публиковать данные и получать доступ к данным с помощью URL-адреса и публиковать их в базе данных

Вот мой HTML:

        <table id="items">


  <tr>
   <th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>


 </tr>

  <tr class="item-row">
    <td class="item-name">
      <div class="delete-wpr"><textarea name="invoice_item[]">Web Updates</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div>
    </td>
    <td class="description"><textarea name="description[]">Monthly web updates for http://widgetcorp.com (Nov. 1 - Nov. 30, 2009)</textarea></td>
    <td><textarea class="cost" name="unit_cost[]">$650.00</textarea></td>
    <td><textarea class="qty" name="quantity[]">1</textarea></td>
    <td><span class="price">$650.00</span></td>
  </tr>

  <tr class="item-row">
    <td class="item-name">
      <div class="delete-wpr"><textarea name="invoice_item[]">SSL Renewals</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div>
    </td>
    <td class="description"><textarea name="description[]">Yearly renewals of SSL certificates on main domain and several subdomains</textarea></td>
    <td><textarea class="cost" name="unit_cost[]">$75.00</textarea></td>
    <td><textarea class="qty" name="quantity[]">3</textarea></td>
    <td><span class="price">$225.00</span></td>
  </tr>

  <tr id="hiderow">
    <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
  </tr>

  <tr>
    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line">Subtotal</td>
    <td class="total-value">
      <div id="subtotal">$875.00</div>
    </td>
  </tr>
  <tr>

    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line">Total</td>
    <td class="total-value">
      <div id="total">$875.00</div>
    </td>
  </tr>
  <tr>
    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line">Amount Paid</td>

    <td class="total-value"><textarea id="paid">$0.00</textarea></td>
  </tr>
  <tr>
    <td colspan="2" class="blank"> </td>
    <td colspan="2" class="total-line balance">Balance Due</td>
    <td class="total-value balance">
      <div class="due">$875.00</div>
    </td>
  </tr>

</table>

Мой код Javascript:

function myFunction() {
  let QueryString = '';
  var formFields = document.querySelectorAll('textarea');

  formFields.forEach(function(textarea) {

    //creates querystring for the form inputs
    QueryString += textarea.name + '=' + textarea.value + '&';

    //show the value of the textarea
    console.log(textarea.value);
  });

  //remove the extra "&" from the end of the querystring
  QueryString = QueryString.substr(0, QueryString.length - 1);

  console.log("==FOR USING AS QUERY STRING FOR====");
   // window.location.href = "index.php?name=" + QueryString; 

  alert(QueryString);


}

Answer 1

Под вновь созданными строками вы подразумеваете строки, созданные после загрузки страницы?

Если так, почему бы вам не поиграть с

const formFields = [].slice.call(document.querySelectorAll('textarea'));
let AllValues = "";

formFields.forEach(formField => formField.addEventListener("input", yourFunction, false));

function yourFunction() {
  AllValues += `${event.target.name}=${event.target.value}&`;
  console.log(AllValues);
}

примечание: я бы настроил таргетинг на идентификатор формы, в противном случае все текстовые поля будут выбраны ...