时间戳

首页 > 解决方案 > 提交后如何让表单值出现在表格中？

javascript - 提交后如何让表单值出现在表格中？

问题描述

我的表单输入在提交后没有出现在我的表格标题下时遇到问题。即使在我多次阅读代码之后。我的代码可能有什么问题？

或者在正确和更容易地编写代码方面有任何建议，请帮助。

当我输入值并提交时，表格仍然保持不变，没有更改或更改。

var form = document.getElementById("form");
var table = document.getElementById("table");

//add event listener to form 
form.addEventListener("submit", addItem);

function addItem(e) {
    e.preventDefault();

    // get customer name input value
    var customerName = document.getElementById("customerName").value;

    //get item purchased input value
    var itemPurchased = document.getElementById("itemPurchased").value;

    //get quantity input value
    var quantity = document.getElementById("quantity").value;

    // get date input value
    var date = document.getElementById("date").value;

    //create rows
    var row = table.insertRow(2);
    //create row cells
    var customerCell = row.insertCell(0);
    customerCell.innerHTML = customerName;

    var ItemCell = row.insertCell(1);
    ItemCell.innerHTML = itemPurchased;

    var quantityCell = row.insertCell(2);
    quantityCell.innerHTML = quantity;

    var dateCell = row.insertCell(3);
    dateCell.innerHTML = date;

    var DeleteCell = row.insertCell(4);
    DeleteCell.innerHTML = x;
}
<div class="container">
    <!-- Form section -->
    <div class="Form-container">
        <form id="form">
            <label for="customerName" class="input-title">CUSTOMER NAME</label><br>
            <input type="text" class="record-input" id="customerName" required><br><br><br>

            <label for="itemPurchased" class="input-title">ITEM PURCHASED</label><br>
            <input type="text" class="record-input" id="itemPurchased" required><br><br><br>

            <label for="quantity" class="input-title">QUANTITY</label><br>
            <input type="text" class="record-input" id="quantity" required><br><br><br>

            <label for="date" class="input-title">Date</label><br>
            <input type="date" class="record-input" id="DATE" required><br><br>

            <input type="submit" value="Submit" class="record-submit">

        </form>

    </div>
    <!-- Table section -->
    <div class="record-container" id="container">
        <table id="table">
            <tr>
                <th>CUSTOMER NAME</th>
                <th>ITEM PURCHASED</th>
                <th>QUANTITY</th>
                <th>DATE</th>
            </tr>

            <tr>
                <td>EBUBE ODINAKA</td>
                <td>iPhone 11 pro max</td>
                <td>1</td>
                <td>07/01/2021</td>
                <td class="deleteTable"><button>x</button></td>
            </tr>
        </table>
    </div>
</div>

标签： javascripthtmljquerycss

解决方案

修好了，试试

//MY JAVASCRIPT CODE
var form = document.getElementById("form");
var table = document.getElementById("table");
//add event listener to form 
form.addEventListener("submit", addItem);

function addItem(e) {
  e.preventDefault();

  // get customer name input value
  var customerName = document.getElementById("customerName").value;

  //get item purchased input value
  var itemPurchased = document.getElementById("itemPurchased").value;

  //get quantity input value
  var quantity = document.getElementById("quantity").value;

  // get date input value
  var date = document.getElementById("DATE").value;

  //create rows
  var row = table.insertRow(2);
  //create row cells
  var customerCell = row.insertCell(0);
  customerCell.innerHTML = customerName;

  var ItemCell = row.insertCell(1);
  ItemCell.innerHTML = itemPurchased;

  var quantityCell = row.insertCell(2);
  quantityCell.innerHTML = quantity;

  var dateCell = row.insertCell(3);
  dateCell.innerHTML = date;

  var DeleteCell = row.insertCell(4);
  DeleteCell.innerHTML = "<button>x</button>";

}
<!-- The main section -->
<div class="container">
  <!-- Form section -->
  <div class="Form-container">
    <form id="form">
      <label for="customerName" class="input-title">CUSTOMER NAME</label><br>
      <input type="text" class="record-input" id="customerName" required><br><br><br>

      <label for="itemPurchased" class="input-title">ITEM PURCHASED</label><br>
      <input type="text" class="record-input" id="itemPurchased" required><br><br><br>

      <label for="quantity" class="input-title">QUANTITY</label><br>
      <input type="text" class="record-input" id="quantity" required><br><br><br>

      <label for="date" class="input-title">Date</label><br>
      <input type="date" class="record-input" id="DATE" required><br><br>

      <input type="submit" value="Submit" class="record-submit">

    </form>

  </div>
  <!-- Table section -->
  <div class="record-container" id="container">
    <table id="table">
      <tr>
        <th>CUSTOMER NAME</th>
        <th>ITEM PURCHASED</th>
        <th>QUANTITY</th>
        <th>DATE</th>
      </tr>

      <tr>
        <td>EBUBE ODINAKA</td>
        <td>iPhone 11 pro max</td>
        <td>1</td>
        <td>07/01/2021</td>
        <td class="deleteTable"><button>x</button></td>
      </tr>
    </table>


  </div>

</div>

推荐阅读