Cannot Find Error in JQuery

roher4 · 05-14-2011, 02:53 AM

Could someone help me? I need to find my error. I'm nearly about to pull every hair out of my body. I'm trying to make a todo list web app with Javascript and not PHP. It nearly works, but I can't get this for loop to work. Could someone also help me get it working because I'm so close. Here's the source:

Javascript/JQuery

Code:

$(document).ready(function() {

	// Variable to get ids for the checkboxes
	var idCounter=1;
	$("#addButton").click(function(){
		if(idCounter>5){
			alert("Please add only five items at a time");
			return false;
		}

		var $textBoxArray =(idCounter);
		
		for (var i=1; i<idCounter; i++) {
			$textBoxArray[i]=$('<input/>').attr({ type: 'text', name:'text', value:'', id:"addTextBox"});
			$("#newTextBoxes").append$(textBoxArray[i]);
			idCounter++;
		}
		

	});

	$("#submit").click(function(){

				$("#addedItemsText").remove();

				
				for (var j=1; j<idCounter; j++) {
					var textEntered = $(textBoxArray[j]).val();
					
					var newTask = $('<p/>').text(textEntered).addClass("listitems");
					$("#addedItems").append(textBoxArray[j]);
				}

	});
	
	    });

HTML

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>
	<link rel="stylesheet" href="style.css">

	</head>

	<body>
		<p id="header">To Do List</p>

		<div id="list" class="list">
			<form id="todoListForm" method="get">
				<div id="item" class="item">
					<input type="text" name="add" id="addTextBox" />
					<input type="button" value="+" id="addButton" />
					<!--New text boxes will appear here. -->
					<div id="newTextBoxes"></div>
					<input type="button" value="Add Items" id="submit">
					<div class="listitems">
						<p id="addedItemsTitle">Added Items</p>
						<hr>
						<p id="addedItemsText"> Items added above will be displayed here.</p>
						<div id="addedItems"></div>
					</div>

				</div>
			</form>
		</div>

		<div class="footer" id="footer">
			
		</div>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="scripts.js"></script>

	</body>

	</html>

bullant · 05-14-2011, 04:09 AM

Another option without using jquery.

When you click the "Add items" button, the textboxes that you added with the "+" button are moved to the addedItems div.

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(){
                var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                while(txtBoxesO.length > 0){
                    document.getElementById('addedItems').appendChild(txtBoxesO[0].parentNode.removeChild(txtBoxesO[0]));
                    txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                }
            }
            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>

SB65 · 05-14-2011, 08:51 AM

Code:

var idCounter=1;
	$("#addButton").click(function(){
          ......
		
		for (var i=1; i<idCounter; i++) {
.....
		}

If you're initialising idCounter to 1, then the end condition in your for loop is already met, so it won't loop...is that the problem?

bullant · 05-14-2011, 08:57 AM

Quote:

If you're initialising idCounter to 1, then the end condition in your for loop is already met, so it won't loop...is that the problem?

I think the op has an infinite loop because idCounter is being incremented as well on each loop iteration and so i will always be < idCounter.

But imo for something relatively basic, it's easier without jquery.

SB65 · 05-14-2011, 09:47 AM

Am I missing something then - how is idCounter anything other than 1 within $("#addButton").click function?

bullant · 05-14-2011, 10:32 AM

yep, I think you're right. I didn't notice where it was being initialised and so assumed it was initially 0.

roher4 · 05-15-2011, 12:08 AM

Quote:

Originally Posted by bullant

Another option without using jquery.

When you click the "Add items" button, the textboxes that you added with the "+" button are moved to the addedItems div.

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(){
                var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                while(txtBoxesO.length > 0){
                    document.getElementById('addedItems').appendChild(txtBoxesO[0].parentNode.removeChild(txtBoxesO[0]));
                    txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
                }
            }
            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 almost works except when the Add Items button is clicked, the textfield itself is moved but I want the data to be moved on its own.

AndrewGSW · 05-15-2011, 12:34 AM

Try this

Code:

function addItemsToForm(){
    var txtBoxesO = document.getElementById('newTextBoxes').getElementsByTagName('input');
    for (var i=0, j=txtBoxesO.length; i < j;  i++){
        var newTxt = txtBoxesO[i].cloneNode(true);
        newTxt.id = '';                     // ids must be unique, so delete it
        newTxt.className = 'dispBlock';     // cloning loses the class name
        document.getElementById('addedItems').appendChild(newTxt);
    }
}

bullant · 05-15-2011, 12:40 AM

Quote:

Originally Posted by roher4

This almost works except when the Add Items button is clicked, the textfield itself is moved but I want the data to be moved on its own.

It works as intended in that the original inputs are moved and not copied to the form.

If you want to copy them, then all you need to do is clone the original inputs and append them to the appropriate element in the form. In this case the while loop would need to be a for loop and you'll need a couple of other minor tweaks as well.

If you want to copy just the values of the original inputs you can get them from the inputs value property.

You will also need to delete any existing contents in 'addedItems' before appending any new items otherwise you will get duplicate data if you create new items after already adding some.

bullant · 05-15-2011, 01:34 AM

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>

AndrewGSW · 05-15-2011, 03:39 AM

I quite like

Code:

var addedBefore = document.getElementById('addedItems');
while (addedBefore.firstChild) {
    addedBefore.removeChild(addedBefore.firstChild);
    
}

but there are a few ways to do this

bullant · 05-15-2011, 03:52 AM

yep, that's even more efficient

If I remembered firstChild I would have used it myself

roher4 · 05-15-2011, 07:01 PM

See below.

roher4 · 05-15-2011, 07:18 PM

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.

AndrewGSW · 05-15-2011, 08:33 PM

Use createElement() to create new inputs and set the 'value' of these inputs to the 'value' of the ones whose text you want to copy.