Question

我正在创建一个带有两个文本框的表单：“任务”和“描述”。我想要做的是能够在两个框中都进行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打包。

Answer 1

提交表单时，您只需要调用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>

如何将输入保存在数组中然后添加到保存的输入

1 个答案: