<!-- 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;
});
}
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>
as long as Jquery is Case-sensitive language, so you have to call element by the exact name, the element DATE was written in capital letters , and you were calling it in small letters, that’s the 1st typo, also u were calling a variable called x in cell delete, while there’s no such defined variable called x, i fixed it all and added a snippet, give it a try, and dun forget to mark the answer as right if it is what exactly you need, goodluck
I thought the value of the table.insertRow(2) should be 1 and not 2 or is there a reason for that?
