Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2010
    Location
    Canada
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Cannot Find Error in JQuery

    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>
    Last edited by roher4; 05-14-2011 at 03:02 AM. Reason: Adding tags.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>
    Last edited by bullant; 05-14-2011 at 04:20 AM.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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?

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Am I missing something then - how is idCounter anything other than 1 within $("#addButton").click function?

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    yep, I think you're right. I didn't notice where it was being initialised and so assumed it was initially 0.

  • #7
    New Coder
    Join Date
    Jul 2010
    Location
    Canada
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    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.

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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);
        }
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by roher4 View Post
    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.
    Last edited by bullant; 05-15-2011 at 12:43 AM.

  • #10
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>
    Last edited by bullant; 05-15-2011 at 01:42 AM.

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    yep, that's even more efficient

    If I remembered firstChild I would have used it myself

  • #13
    New Coder
    Join Date
    Jul 2010
    Location
    Canada
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    See below.
    Last edited by roher4; 05-15-2011 at 07:18 PM.

  • #14
    New Coder
    Join Date
    Jul 2010
    Location
    Canada
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    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.

  • #15
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •