How to save input in an array then add to saved input

Question

I am creating a form with two text boxes: Task and Description. What I want to do is be able to console.log in both boxes and save the input through a submit button. i.e: task: do laundry
Description: do a buttload of laundry(idk lol) Alright, I got that down(I think). But what I want to do after is that once I backspace and clear it, I want to add another task and description, but I also want to add that AFTER the saved input.

ie: task: do laundry, study Description, do a buttload of laundry, study a lot

Can someone check my code and see what's wrong? It's just showing the console.log input, which is nice, but I want to be able to use the push method to add to the end of my arrays and SAVE it.

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>

All tasks and description has to be in array form and packaged in JSON.

You got an extra `` `` `` near your `body` closing tag. Do you need them? — u-ways, Aug 20 '18 at 19:33
Also your HTML comments syntax are incorrect. Here is a comment with the correct syntax `` — u-ways, Aug 20 '18 at 19:37

score 0 · Answer 1 · answered Aug 20 '18 at 19:36

You just need to call your addTask and addDescription functions when the form submits. JSFiddle: http://jsfiddle.net/wcrg804z/

Some errors with your code:

You have two addTask functions when you only need one.

Your addDescription function is trying to push task (which is undefined) to descriptionArray.

There are extra closing </div> </p> </form> tags after your form which are unnecessary.

<!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>

Thank you! and just wondering how do I parse it in JSON like this: https://stackoverflow.com/questions/18884840/adding-a-new-array-element-to-a-json-object/35910065 ? — Jess Y., Aug 24 '18 at 18:01

How to save input in an array then add to saved input

1 Answers1