SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Append Instead Of Replacing

    Hi,

    I got a javascript code that displays new text boxes when someone clicks on a button. Here is the code that goes into the header:

    Code:
    <script type="text/javascript">
    	boxct=0;
    	function dispMoreFiles() {
    		var upbox = "<INPUT name='numbers[]' TYPE='text' size='30'><br>";
    		var updiv = document.getElementById("morefiles");
    		if (boxct<9) {
    			var addhtml = updiv.innerHTML+upbox;
    			updiv.innerHTML = addhtml;
    			boxct++;
    		} else {
    			alert('Message');
    		}
    	}
    </script>
    I use this simple code in the body to make use of it:

    Code:
    <input type="text" name="numbers[]" size="30">
    <div id="morefiles">
    <input name="add" type="button" onClick="javascript:dispMoreFiles()" value="Click To Add Another Box">
    Now, if I add another box, then type some text into it, then add another box, the box I just typed into is replaced with a new box, and a new box is added. How do I just make it add a new text box instead of replacing a current one?

    Thanks a lot.

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    boxct=0;
    function dispMoreFiles(){
    if(boxct<9){
    document.getElementById('morefiles').innerHTML+='<input name=\"numbers[]\" type=\"text\" size=\"30\"><br>';
    boxct++;
    }
    else{alert('Message');}
    }
    </script>
    <div id="morefiles">
    <input type="text" name="numbers[]" size="30"><br>
    </div>
    <input name="add" type="button" onclick="dispMoreFiles()" value="Click To Add Another Box">

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <br>eaks and innerHTML trickery look ugly, I'd use DOM and CSS instead.

    Code:
    <style>
    #files input { display: block; }
    </style>
    
    <div id="files"><input type="text" name="numbers[]" size="30">
    </div>
    
    <input name="add" 
    	type="button" 
    	onclick="appendInput()" 
    	value="Click To Add Another Box">
    
    <script>
    function appendInput() {
    	var files = document.getElementById("files");
    	files.appendChild(
    		files.firstChild.
    			cloneNode(false)
    	);
    }
    </script>
    Last edited by stereofrog; Jan 30, 2007 at 07:58. Reason: minor bug corrected

  4. #4
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for the replies. Unfortunately, none of these two codes worked for me

    Mirek Kom&#225;rek, your code did the same thing: it replaced the boxes, so the text inside the boxes disappeared again.

    stereofrog, it didn't seem to work at all. I pressed the "add" button and nothing happened. What am I doing wrong?

    Thanks.

  5. #5
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for the replies. Unfortunately, none of these two codes worked for me

    Mirek Kom&#225;rek, your code did the same thing: it replaced the boxes, so the text inside the boxes disappeared again.

    stereofrog, it didn't seem to work at all. I pressed the "add" button and nothing happened. What am I doing wrong?

    Thanks.

  6. #6
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW I did NOT post that many times...

  7. #7
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I corrected the code above, try again.

  8. #8
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check again stereofrogs solution, it works well and has very clear and nice code. (He was not so lazy as me ;-))

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd modify the appendInput function a bit, otherwise you'll clone what the user typed in:
    Code:
    function appendInput() {
    	var files = document.getElementById("files");
    	var input = files.firstChild.cloneNode(false);
    	input.value = "";
    	files.appendChild(input);
    }

  10. #10
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, that works beautifully! Actually, jimfraser, in my specific case, duplicating the text isn't a problem, but thank you anyway!

    Well, I added the code to my script, and I tried playing around with it and toying with it. I don't mean to be a bother, but I'm trying to get something else done, but due to my lack of skills in JS and not-so-great-skills of CSS, I need some help.

    All I want is now add a dropdown along with the code. So, it would be like this:

    Code:
    <div id="files"><input type="text" name="numbers[]" size="30"><select name="select[]"><option value="1">1</option></select><br></div>
    However, when I press the add button, still only the text box shows up, and not another select box next to it. How to I add that functionality? I also tried doing this:

    Code:
    <style>
    #files input,select { display: block; }
    </style>
    But that didn't work either.

    What am I doing wrong? Also, in my actual code the select is a php function (<?php func(); ?>) but I don't think that should make a difference, as the function is just the dropdown code.

    Ah yes, and one more very important thing: how do I add a limit of the number of times the code is appended? It MUST have a max of, say, 10 boxes.

    Thank you!

  11. #11
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function appendInput() {
         var files = document.getElementById("files");
         var input = files.firstChild.cloneNode(false);
         var select = files.firstChild.nextSibling.cloneNode(true);
         var br = document.createElement("br");
         input.value = "";
         files.appendChild(input);
         files.appendChild(select);
         files.appendChild(br);
    }
    </script>
    <div id="files"><input type="text" name="numbers[]" size="30"><select name="select[]"><option value="1">1</option></select>
    <input type="button" onclick="appendInput()" value="Add"><br>
    </div>

  12. #12
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mirek Kom&#225;rek, that works amazingly. There's no reputation points on this forum?

    Still one question left unanswered: how do I set a limit of the amount of times the code can be appended? I.E, only 10 more times can the button be clicked.

    Thanks.

  13. #13
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is stereofrogs code with some changes of jimfraser and some other change after you explained us a specific case. One recomendation, keep this code in one line or it will not works in Firefox, because if firstChild.nodeType==3 (empty space) firefox take it as firstchild and it will stop works.
    Code:
    <div id="files"><input type="text" name="numbers[]" size="30"><select name="select[]"><option value="1">1</option></select>

  14. #14
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mirek Komárek View Post
    It is stereofrogs code with some changes of jimfraser and some other change after you explained us a specific case. One recomendation, keep this code in one line or it will not works in Firefox, because if firstChild.nodeType==3 (empty space) firefox take it as firstchild and it will stop works.
    Code:
    <div id="files"><input type="text" name="numbers[]" size="30"><select name="select[]"><option value="1">1</option></select>
    Thanks a lot, I did figure it out myself.

    Also, the <br> there works in firefox and IE for me. If I take that <br> out, then the boxes added all end up on the same line, so it becomes ugly (without the block style).

    Thanks.

  15. #15
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I haven't been in this thread in a while, but I have an additional question.

    Instead of:
    <div id="files"><input type="text" name="numbers[]" size="30"><select name="select[]"><option value="1">1</option></select>

    I want to add a <br>:
    <div id="files"><input type="text" name="numbers[]" size="30"><br><select name="select[]"><option value="1">1</option></select>

    I tried playing around with the code, but nothing is working for me. I've tried this, and other small variants:

    Code:
    function appendInput() {
    	 if(ct<9){
    	     var files = document.getElementById("files");
    	     var input = files.firstChild.cloneNode(false);
    	     var select = files.firstChild.nextSibling.cloneNode(true);
    	     var br = document.createElement("br");
    	     input.value = "";
    	     files.appendChild(input);
    	     files.appendChild(br);
    	     files.appendChild(select);
    	     files.appendChild(br);
    	     ct++;
         }
         else{alert('You may only send messages up to 10 people at once.\n\nTo lift this limit, send us an email for a cheap monthly quote!');}
    }
    </script>
    However, this only makes another text box come up, and no select box.

    Thanks.

    EDIT: nevermind, figured it out
    Last edited by thetzfreak; Mar 1, 2007 at 17:14.


Bookmarks

Posting Permissions

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