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);
});

Answer 2

更改

<button id="submitButton" type="submit" onclick='taskInformation();'>Submit</button>

到

<input type="button" id="clickButton" value="Submit" onClick='taskInformation();'></input>

和taskInformation函数到以下

function taskInformation() {
    var subject = document.getElementById("subject").value;
    var datepicker = document.getElementById("datepicker").value;
    var inputBox = document.getElementById("inputBox").value;
    if (document.checkIt[0].checked) {
            document.getElementById("inProgress").innerHTML = "Subject: " + subject + "\n" + "Due Date: " + datepicker + "\n" + "Description: " +inputBox;
    } else {
            document.getElementById("completed").innerHTML = "Subject: " + subject + "\n" + "Due Date: " + datepicker + "\n" + "Description: " +inputBox;
    }

}

从输入写入div

2 个答案: