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

django problem with bootstrap modal

Error! React is unable to find the window object

The modals equipped with data-dismiss="modal" and data-target="#id" do not navigate to their intended destination

Is it possible to compile a TypeScript file with webpack independently of a Vue application?

Leveraging JQuery's parseJSON() function

What is the method for accessing cookies using JSONP?

Bootstrap 5 and Vue 3 team up to create a stunning masonry layout

Vue.js axios method returns undefined; v-for directive fails to iterate - Issue on Wordpress site

Javascript - Editing specific markers with varying titles from the url

The website is not displaying CSS styles as intended

Having trouble getting the video to load on your Mozilla Firefox browser?

What is the method for applying background color to text within a textbox?

The logical OR operator in JavaScript (denoted as ||)

Are you familiar with manipulating the JSON data array retrieved from an Ajax response?

The functionality of the Bootstrap tabbed pane is not functioning correctly

What is the reason behind the issue where max-height disrupts border-radius?

Change all lowercase characters to uppercase in the font file

Sending data between Node.js middleware components

PHP Implementing real-time dynamic categories

I encountered a SyntaxError indicating a missing ")" right before utilizing jQuery in my code