我试图从表单中保存提交的值并使用Js.将它们添加到表中。我也尝试将这些值保存在localStorage中但是localStorage会抛出" Undefined"错误,我不知道问题出在哪里,因为我很想尝试localStorage。
请看看我的代码给我一些建议。提前欣赏。
HTML
if (localStorage) {
document.getElementById('form2').addEventListener('click', function() {
//save the values in localStorage
localStorage.setItem('location', location);
localStorage.setItem('activity', activity);
localStorage.setItem('startTime', startTime);
localStorage.setItem('endTime', endTime);
localStorage.setItem('date', date);
localStorage.setItem('distance', distance);
//Retrive Workout History
var location = localStorage.getItem('location');
var activity = localStorage.getItem('activity');
var startTime = localStorage.getItem('startTime');
var endTime = localStorage.getItem('endTime');
var date = localStorage.getItem('date');
var distance = localStorage.getItem('distance');
if (location != "undefined" || location != "null" || activity != "undefined" || activity != "null" || startTime != "undefined" || startTime != "null" || endTime != "undefined" || endTime != "null" || date != "undefined" || date != "null" || distance != "undefined" || distance != "null") {
var table = document.getElementById('data');
var row = table.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
var cell6 = row.insertCell();
cell1.innerHTML = location;
cell2.innerHTML = activity;
cell3.innerHTML = startTime;
cell4.innerHTML = endTime;
cell5.innerHTML = date;
cell6.innerHTML = distance;
console.log(localStorage.getItem('location'));
}
});
}

<form name="form2" id="form2" action="#" method="post" onclick="return secondFormValidation();">
<div class="form-group row">
<label for="location" class="col-md-2 col-form-label">Location</label>
<div class="col-md-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Location">
</div>
</div>
<div class="form-group row">
<label for="activity" class="col-md-2 col-form-label"> Select Activity</label>
<div class=" col-md-10">
<select class="form-control" id="activity">
<option value="-1" selected required>Select Activity</option>
<option value="1">Cycling</option>
<option value="2">Nordic Walking</option>
<option value="3">Road Bike</option>
<option value="4">Running</option>
<option value="5">Swimming</option>
<option value="6">Walking</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="startTime" class="col-md-2 col-form-label">Start Time</label>
<div class="col-md-10">
<input type="time" class="form-control" id="startTime" name="startTime" placeholder="startTime">
</div>
</div>
<div class="form-group row">
<label for="endTime" class="col-md-2 col-form-label">End Time</label>
<div class="col-md-10">
<input type="time" class="form-control" id="endTime" name="endTime" placeholder="endTime">
</div>
</div>
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date</label>
<div class="col-md-10">
<input type="date" class="form-control" id="date" name="date" placeholder="Date ">
</div>
</div>
<div class="form-group row">
<label for="distance" class="col-md-2 col-form-label">Distance</label>
<div class="col-md-10">
<input type="distance" class="form-control" id="distance" name="distance" placeholder="Distance ">
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button id="saveWork" type="button" class="btn btn-warning" onclick=" insertWorkout()">
Save workout
</button>
</div>
</div>
</form>
&#13;
答案 0 :(得分:1)
您的代码尝试将值保存到localStorage,但您还没有从表单中检索它们,但是:
document.getElementById('form2').addEventListener('click' , function () {
localStorage.setItem('location' , location);
console.log(location); // <- undefined
...
}
您需要从输入中检索值。
var location = document.querySelector('input[name="location"]').value
localStorage.setItem('location' , location);
如果您在代码顶部添加'use strict';
,则会看到一些有用的ReferenceErrors。