从没有名称文本区域的网址获取所有值

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);
}

注意：我将定位表单的ID，否则将所有文本区域定位为目标。