Is there a way to display the form values on the table once it has been submitted?

Question

Is there a way to display the form values on the table once it has been submitted?

I'm struggling with my form input not showing up under the table headings after submission. I've reviewed the code multiple times, but can't figure out what's causing the issue.

If you have any suggestions on how to write the code more efficiently and correctly, please share your insights.

After entering values and submitting, the table remains unchanged with no updates or modifications.

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

form.addEventListener("submit", addItem);

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

    var customerName = document.getElementById("customerName").value;

    var itemPurchased = document.getElementById("itemPurchased").value;

    var quantity = document.getElementById("quantity").value;

    var date = document.getElementById("date").value;

    var row = table.insertRow(2);
    
    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">
    <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>
    <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>

javascript html jquery css

Answer 1

Answer №1

Issue resolved, feel free to test it out

//UPDATED JAVASCRIPT CODE
var form = document.getElementById("form");
var table = document.getElementById("table");
//add event listener to the 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 new rows for data entry
  var row = table.insertRow(2);
  //assign values to respective cells in the row
  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>";

}

<!-- Main content section -->
<div class="container">
  <!-- Form section for data input -->
  <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 displaying records -->
  <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>

Answer 2

Issue resolved, feel free to test it out

//UPDATED JAVASCRIPT CODE
var form = document.getElementById("form");
var table = document.getElementById("table");
//add event listener to the 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 new rows for data entry
  var row = table.insertRow(2);
  //assign values to respective cells in the row
  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>";

}

<!-- Main content section -->
<div class="container">
  <!-- Form section for data input -->
  <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 displaying records -->
  <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>

Answer 3

Answer №2

<!-- This portion is written in HTML -->

    <!-- Primary section -->
         <div class="container">
            <!-- Form segment -->
            <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 segment -->
            <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;
  });

}

Answer 4

<!-- This portion is written in HTML -->

    <!-- Primary section -->
         <div class="container">
            <!-- Form segment -->
            <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 segment -->
            <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;
  });

}

Is there a way to display the form values on the table once it has been submitted?

Answer №1

Answer №2

Similar questions

Generate a new object from the contents of a div

The appearance of Bootstrap React Nextjs doesn't quite match what's shown in the documentation

Assigning a value using HTML code causes the input to malfunction

How can material-ui useScrollTrigger be utilized in combination with a child's target ref?

Moving images displayed on a webpage

Using a percentage in CSS translate can result in an image appearing blurry

Displaying text on an image when hovering over it

JavaScript - Ensure all special characters are maintained when using JSON.parse

Troubleshooting Image Map Failure on Internet Explorer 10

Incorporating a unique font into your SAPUI5 application

What is the best way to utilize the forEach method in React to manipulate a navigation element containing multiple links?

Creating unique CSS div designs based on the nth-child selector

There are errors occurring in the getter I created within the vuex store.js file

HTML Navigator encountering Javascript Anomaly

How to Develop Screen-Reader-Friendly Ordered Lists using HTML5 and CSS?

I need help transferring a Java Ajax response to my foreach loop

Ways to invoke a controller function from a window listener function

Add up the duplicate elements in two arrays

Unveiling the Secrets of Encoding and Decoding JSON within a Concealed HTML

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular