javascript - 从输入写入 div

Question

我正在尝试编写一个待办事项列表，并且正在努力将信息从我的输入中提取出来并放入预定义的模板(以 HTML 编写)中。我已附上帮助代码...

<h1>To-Do List</h1>

    <div class="boxes" id="todo">
        <h3>Create Task</h3>
        <form name="myForm" id="taskInformation">   
            <input id="subject" type="text" name="subject" placeholder="Task Name"><br/>
            <input id="datepicker" type="text" name="datepicker" placeholder="Date Due ##/##/####"><br/>
            <textarea name ="inputBox" id="inputBox"></textarea>
            <button id="submitButton" type="submit" onclick='taskInformation();'>Submit</button>
        </form>
        <div id="deleteBox">Drag your task here to delete it.</div>
    </div>
    <div class="boxes" id="tasks">
        <h3>Tasks</h3>
        <div id="draggable">
            <p>Subject<br>
            Due Date</p>
            <p>Description</p>
            <input type="radio" name="checkIt" value="In Progress">In Progress
            <input type="radio" name="checkIt" value="Completed">Completed

        </div>
    </div>
    <div class="boxes" id="inProgress">
        <h3>In Progress</h3>
    </div>
    <div class="boxes" id="completed">
        <h3>Completed</h3>
    </div>



<script>

    $(function() {
        $("#datepicker").datepicker();
    });

    $("#draggable").draggable();
    $("#deleteBox").droppable( {
        drop: function(ui, event) {
            var deleted = confirm("Confirm delete.");
            if (deleted == true) {
                $("#draggable").remove();
            }
        }

    })

    function taskInformation() {
        var subject = document.getElementById("subject").value;
        var datepicker = document.getElementById("datepicker").value;
        var inputBox = document.getElementById("inputBox").value;
        alert("Subject: " + subject + "\n" + "Due Date: " + datepicker + "\n" + "Description: " +inputBox);

    }; 

/**    function runTask() {
        var informationHeld = new taskInformation;
        informationHeld.subject = document.getElementById("subject").value;
        informationHeld.datepicker = document.getElementById("datepicker").value;
        informationHeld.inputBox = document.getElementById("inputBox").value;
        console.log(this.subject + this.date + this.inputBox);
    };
**/

</script>

Answer 1

所以我不太确定你在寻找什么，但这应该可以帮助你开始:http://jsfiddle.net/swm53ran/23/

<form name="myForm" id="taskInformation">   
    <input id="subject" type="text" name="subject" placeholder="Task Name"/><br/>
    <input id="datepicker" type="text" name="datepicker" placeholder="Date Due ##/##/####"/><br/>
    <textarea name ="inputBox" id="inputBox"></textarea>
</form>

$('#submitButton').on('click', function() {
    var subject = $('#subject').val();
    var datepicker = $('#datepicker').val();
    var description = $('#inputBox').val();

    $('.taskSubject').text(subject);
    $('.taskDate').text(datepicker);
    $('.taskDescription').text(description);
});