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

时间:2018-08-20 19:06:42

标签: javascript html json

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

1 个答案:

答案 0 :(得分:0)

提交表单时,您只需要调用addTaskaddDescription函数。 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>