How can I get the form values to appear in the table after submitting?

user_14688900 0
Viewed 509

I am having a problem with my form input not appearing under my table headings after submitting. Even after I have gone through the code a number of times. What can be the problem of my code?

or do have any suggestions in writing the code correctly and easier, please help.

When I enter the values and submit, the table still remains the same with no changes or alteration.

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>

css html jquery javascript
2 Answers

fixed, give it a try

//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>

user_81340140 
<!-- language: lang-html -->

    <!-- 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>

//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 delete button
  var deleteBtn = "<button>x</button>"

  var rowContent = [customerName, itemPurchased, quantity, date, deleteBtn]

  //create rows
  var row = table.insertRow(2);
  //create row cells
  rowContent.map((value, index)=>{
      var rowCell = row.insertCell(index);
      rowCell.innerHTML = value;
  });

}
user_119704140
Related