function addToTable() {
const items1 = document.getElementById("items1");
const selectedOption1 = items1.value;
const selectedText = items1.options[items1.selectedIndex].text;
const selectedDate = document.getElementById("date").value;
const dateControl = document.querySelector('input[type="datetime-local"]');
const userAmount2 = document.getElementById("userAmount2").value;
const userAmount3 = document.getElementById("userAmount3").value;
const userAmount4 = document.getElementById("userAmount4").value;
const userAmount5 = document.getElementById("userAmount5").value;
const userAmount6 = document.getElementById("userAmount6").value;
const userAmount7 = document.getElementById("userAmount7").value;
const tableBody = document.getElementById("tableBody");
const newRow = tableBody.insertRow();
const cell1 = newRow.insertCell();
cell1.innerHTML = selectedText;
const cell2 = newRow.insertCell();
cell2.innerHTML = userAmount2;
const cell3 = newRow.insertCell();
cell3.innerHTML = userAmount3;
const cell4 = newRow.insertCell();
cell4.innerHTML = userAmount4;
const cell5 = newRow.insertCell();
cell5.innerHTML = userAmount5;
const cell6 = newRow.insertCell();
cell6.innerHTML = userAmount6;
const cell7 = newRow.insertCell();
cell7.innerHTML = userAmount7;
const cell8 = newRow.insertCell();
cell8.innerHTML = selectedDate;
const form = document.getElementById("MyForm")[0];
form.submit();
form.reset();
$('#myForm')[0].reset();
//form.addEventListener("submit", function (event) {
// event.preventDefault();
//});
// No need for event listener on this, will leave in for possible future thing?
}
function showSuccessCard(){
const successCard = document.createElement("div");
successCard.className = "sucess-card";
successCard.innerHTML = "<p>Record has been saved successfully!<p>";
setTimeout(function() {
document.body.removeChild(successCard);
}, 3000);
}
function saveToDatabase() {
var formData = $("#MyForm").serialize();
const tableData = [];
const rows = document.querySelectorAll("#tableBody tr");
rows.forEach((row) => {
const cells = row.querySelectorAll("td");
const rowData = {
option1: cells[0].innerText,
user_amount1: cells[1].innerText,
user_amount2: cells[2].innerText,
user_amount3: cells[3].innerText,
user_amount4: cells[4].innerText,
user_amount5: cells[5].innerText,
user_amount: cells[6].innerText,
date: cells[7].innerText,
};
tableData.push(rowData);
$.ajax({
type: "POST",
url: "dcop.inven.php",
data: tableData,
success: function(response) {
alert("Your information has been saved");
updateTable(response);
},
error: function(error) {
console.error("Error saving data:", error);
}
});
});
return false;
}
I am trying to save the table no the user inputs. I am new to programming and trying to teach myself but I am stuck on this problem. When I try to have my information to the sql server all it does it take what is in the input fields not the table. I will input multiple items in the table but I only save 1 thing, what is in the user input section. I am sure I am missing something but with me being new to this I am stumped.