Я пытаюсь получить пользовательский ввод (долги), сохранить в локальном хранилище и отобразить пользовательский ввод в div (результаты) для результатов. Когда я нажимаю кнопку отправки ничего не происходит. То, что я хотел бы сделать, это вставить входные долги в массив, а затем отправить его в div результатов.
HTML:
<form id="myForm">
Это где начинается ввод, есть 3 различных вида; наименование, сумма и срок оплаты
<!-- entering debt name -->
<div class="name" id="name">
<label>Debt Name: </label>
<input type="text" class="debtname" id="debtname">
</div>
<!-- entering debt amount -->
<div class="amount" id="amount">
<label>Amount: </label>
<input type="number" class="debtamount" id="debtamount">
</div>
<!-- entering debt due date -->
<div class="due" id="due">
<label>Due Date: </label>
<input type="number" class="debtdue" id="debtdue" min="1" max="31">
</div>
<!-- sumbitting debt information -->
<input type="button" class="submitdebt" id="submitdebt" onclick="insert()" value="Submit"/>
</form>
Это div, где я хотел бы, чтобы результаты были опубликованы
<!-- input results -->
<div class="results" id="results"></div>
</div>
</div>
JavaScript:
document.getElementById('myForm').addEventListener('submit', saveDebt);
// Save Debt
function saveDebt(e) {
// Get form values
var debtName = document.getElementById('debtname').value;
var debtAmount = document.getElementById('debtamount').value;
var debtDue = document.getElementById('debtdue').value;
if(!validateForm(debtName, debtAmount, debtDue)) {
return false;
}
Я хочу, чтобы все входные данные были помещены как объект, который будет передан в массив
var debtObject = {
name: debtName,
amount: debtAmount,
due: debtDue
}
Здесь я думаю, что главная проблема в том, что я не думаю, что входные данные помещаются в массив
// Test if debts is null
if(localStorage.getItem('debts') === null) {
// Init array
var debts = [];
// Add to array
debts.push(debtObject);
// Set to localStorage
localStorage.setItem('debts', JSON.stringify(debts));
} else {
// Get debts from localStorage
var debts = JSON.parse(localStorage.getItem('debts'));
// Add debt to array
debts.push(debtObject);
// Re-set back to localStorage
localStorage.setItem('debts', JSON.stringify(debts));
}
// Clear form
document.getElementById('myForm').reset();
// Re-fetch debts
fetchDebts();
// Prevent form from submitting
e.preventDefault();
}
Это функция для печати результатов в результаты div
// Fetch debts
function fetchDebts() {
// Get debts from localStorage
var debts = JSON.parse(localStorage.getItem('debts'));
// Get output id
var results = document.getElementById('results');
// Build output
results.innerHTML = '';
for( var i = 0; i < debts.length; i++) {
var name = debts[i].name;
var amount = debts[i].amount;
var due = debts[i].due;
results.innerHTML += '<div class="well">'+
'<p>' + 'Name: ' + name +
'Amount: ' + amount +
'Due: ' + due +
'</h3>'+
'</div>';
}
}
// Validate Form
function validateForm(debtName, debtAmount, debtDue) {
if(!debtName || !debtAmount || !debtDue) {
alert('Please fill in the form');
return false;
}
return true;
}
// modal end