Quote:
Originally Posted by bullant
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>To-do List</title>
<style type="text/css">
.dispBlock {
display: block;
}
#newTextBoxes {
width: 200px;
float: left;
}
#addBtnContainer {
width: 50px;
float: left;
}
#list {
clear: both;
}
</style>
<script type="text/javascript">
function addTextbox(){
var newTxtbox = document.createElement('input');
newTxtbox.setAttribute('type','text');
newTxtbox.setAttribute('name','add[]');
newTxtbox.className = 'dispBlock';
document.getElementById('newTextBoxes').appendChild(newTxtbox);
}
function addItemsToForm(){
deleteAddedItems();
var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
for(i=0; i < txtBoxesO.length; i++){
document.getElementById('addedItems').appendChild(txtBoxesO[i].cloneNode(true));
}
}
function deleteAddedItems(){
var addedItemsO = document.getElementById('addedItems').childNodes;
for(i=addedItemsO.length-1; i >= 0; i--){
addedItemsO[i].parentNode.removeChild(addedItemsO[i]);
}
}
window.onload=function(){
document.getElementById('addButton').onclick=addTextbox;
document.getElementById('btnSubmit').onclick=addItemsToForm;
}
</script>
</head>
<body>
<p id="header">To Do List</p>
<div id="inputBoxes">
<div id="newTextBoxes">
<input type="text" name="add[]" id="addTextBox" />
</div>
<div id="addBtnContainer">
<input type="button" value="+" id="addButton" />
</div>
</div>
<div id="list" class="list">
<form id="todoListForm" action="#" method="get">
<div id="item" class="item">
<input type="button" value="Add Items" id="btnSubmit">
<div class="listitems">
<p id="addedItemsTitle">Added Items</p>
<hr />
<div id="addedItems"></div>
</div>
</div>
</form>
</div>
</body>
</html>
|
This helps a lot, but I don't want to clone the text box but rather the text itself. I think I'm close. Thanks anyways.