我正在创建一个带有两个文本框的表单:“任务”和“描述”。我想要做的是能够在两个框中都进行console.log并通过提交按钮保存输入。
即:
任务:洗衣服
说明:洗一堆衣服(idk哈哈)
好吧,我记下来了(我认为)。但是,我要做的是一旦退格并清除它,我想添加另一个任务和说明,但是我也想在保存的输入之后添加它。
即: 任务:洗衣服,学习 描述,洗衣服很多,学习很多
有人可以检查我的代码,看看有什么问题吗?它只是显示console.log输入,这很好,但是我希望能够使用push方法添加到数组的末尾并保存它。
function submitForm() {
var FormData = {
task: myForm.task.value,
description: myForm.description.value
};
myJSON = JSON.stringify(FormData);
localStorage.setItem("formJSON", myJSON);
text = localStorage.getItem("formJSON");
obj = JSON.parse(text);
console.log(FormData);
return false;
};
newArray = [task, description];
var taskArray = [];
var descriptionArray = [];
var task = document.getElementById("task").value;
var description = document.getElementById("description").value;
function addTask(task) {
taskArray.push(task);
console.log(" " + taskArray.join(", "));
}
function addTask(task) {
taskArray.push(task);
console.log(" " + taskArray.join(", "));
}
function addDescription(description) {
descriptionArray.push(task);
console.log(" " + descriptionArray.join(", "));
}
<!DOCTYPE html>
<html>
<title>Task Form</title>
<body>
<form class="form-inline" name="myForm" onsubmit=" return submitForm()">
<label class="required">*Task and Description* </label>
<!first text box>
<div class="form-group">
<input type="text" id="task" placeholder="Task">
</div>
<!second comment box>
<div class="form-group">
<input type="text" id="description" placeholder="Description">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
<script type="text/javascript " src="json.js "></script>
</div>
</p>
</form>
</body>
</html>
所有任务和描述必须采用数组形式,并以JSON打包。
答案 0 :(得分:0)
提交表单时,您只需要调用addTask
和addDescription
函数。 JSFiddle:http://jsfiddle.net/wcrg804z/
您的代码有些错误:
当您只需要两个addTask
函数时。
您的addDescription
函数试图将task
(未定义)推送到descriptionArray
。
在</div> </p> </form>
之后还有多余的form
标签,这是不必要的。
<!DOCTYPE html>
<html>
<title>Task Form</title>
<body>
<form class="form-inline" name="myForm" onsubmit="return submitForm()">
<label class="required">*Task and Description* </label>
<!--first text box-->
<div class="form-group">
<input type="text" id="task" placeholder="Task">
</div>
<!--second comment box-->
<div class="form-group">
<input type="text" id="description" placeholder="Description">
</div>
<button type="submit" class="btn btn-default submit">Submit</button>
</form>
<script>
function submitForm() {
var task = myForm.task.value;
var desc = myForm.description.value;
var FormData = {
task: task,
description: desc
};
//myJSON = JSON.stringify(FormData);
//localStorage.setItem("formJSON", myJSON);
//text = localStorage.getItem("formJSON");
//obj = JSON.parse(text);
addTask(task);
addDescription(desc);
console.log(FormData);
return false;
};
newArray = [task, description];
var taskArray = [];
var descriptionArray = [];
var task = document.getElementById("task").value;
var description = document.getElementById("description").value;
function addTask(task) {
taskArray.push(task);
console.log(" " + taskArray.join(", "));
}
function addDescription(description) {
descriptionArray.push(description);
console.log(" " + descriptionArray.join(", "));
}
</script>
</body>
</html>