#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Question Multiple dynamic textboxes


    All,
    I have been trying to create the following. Every example I see so far only shows how to create one box dynamically and delete one dynamically


    Textbox 1 name = materials[1]
    Textbox 2 name = quantity[1]
    Textbox 3 name = Price[1]
    Then and Add button

    Upon clicking the add button it creates another set as shown below.
    Textbox 1 name = materials[2]
    Textbox 2 name = quantity[2]
    Textbox 3 name = Price[2]


    Next I need a remove button where it removes all three boxes at once for each array.

    I can post the code I have so far, but I am a php programmer so its probably quicker for someone to post something from scratch??? I worked about 2 days on this so far
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Question My Code anyway


    Here is my code so anyway..... I can't get the delete to work for the life of me.

    Code:
    <HTML>
     <HEAD>
    <form method="POST" action="/testing/test.php"> 
     <SCRIPT LANGUAGE="JavaScript">
     <!--Hide from old browsers
     var i=0,j=0;
     var t1= new Array();
     var t2= new Array();
      var t3= new Array();
      var t4= new Array();
    var mainContainer = document.getElementById('price'); 
     function createtext(){
     i++;
     t1[i]=document.createElement('input');
     t1[i].type='text';
     t1[i].name='materials[]';//+i;
     t1[i].value = "hello";
     t1[i].size = 10;
     document.forms[0].appendChild(t1[i]);
     var mybr=document.createElement('<br>');
     document.appendChild(mybr);
     ///////////////////
     t2[i]=document.createElement('input');
     t2[i].type='text';
     t2[i].name='quantity[]';//+i;
     t2[i].value = "hello";
     t2[i].size = 10;
     document.forms[0].appendChild(t2[i]);
     var mybr=document.createElement('<br>');
     document.appendChild(mybr);
     ///////////////////
     
     t3[i]=document.createElement('input');
     t3[i].type='text';
     t3[i].name='price[]';//+i;
     t3[i].value = "hello";
     t3[i].size = 10;
     document.forms[0].appendChild(t3[i]);
     var mybr=document.createElement('<br>');
     document.appendChild(mybr);
     ///////////////////
    ////////////Add Subtract Button/////////////
    
    //var newDelButton = document.createElement('input');     
    //newDelButton.type = "button";    
    //newDelButton.value = "-";     
    
     t4=document.createElement('input');
     t4.type='button';
     //t4[i].name='delete';//+i;
     t4.value = "-";
     //t4[i].size = 10;
     document.forms[0].appendChild(t4);
     var mybr=document.createElement('<br>');
     document.appendChild(mybr);
    
    t4.onclick = function() { 
    price.removeNode(true);
    
    
     //intTextBox = intTextBox-1;
     //counter3--;   
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
     }
    
    
     </SCRIPT>
     
    
    
    
    
    <SCRIPT>
    function fnRemove(){
        // 'true' possible value specifies removal of childNodes also
       oTable.removeNode(true);
    }
    </SCRIPT>
    
    
    
    
     </HEAD>
     <BODY >
    
    
    <input type="submit" name="submit" value="Submit"/> 
    
     <form action="" method="get" name="f1">
     <input name="b1" type="button" onClick="createtext()" value="new text">
    
     </form>
     </BODY>
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    Welcome to DevShed, mrcastrovinci.

    Does this explain the syntax a little better? I am assuming that you just want to remove the last set of inputs and not a specific set.
    JavaScript Code:
    var setCount = 0, box;
     
    function createSet() {
    	var materials = document.createElement('input');
    	materials.type = 'text';
    	materials.name = 'materials[' + setCount + ']';
    	materials.id = 'm' + setCount;
    	materials.value = 'Materials ' + setCount;
    	materials.size = 10;
     
    	var quantity = document.createElement('input');
    	quantity.type = 'text';
    	quantity.name = 'quantity[' + setCount + ']';
    	quantity.id = 'q' + setCount;
    	quantity.value = 'Quantity ' + setCount;
    	quantity.size = 10;
     
    	var price = document.createElement('input');
    	price.type = 'text';
    	price.name = 'materials[' + setCount + ']';
    	price.id = 'p' + setCount;
    	price.value = 'Price ' + setCount;
    	price.size = 10;
     
    	box.appendChild(materials);
    	box.appendChild(quantity);
    	box.appendChild(price);
    	setCount++;
    }
     
    function deleteSet() {
    	if (setCount > 0) {
    		setCount--;
    		box.removeChild(document.getElementById('m'+setCount));
    		box.removeChild(document.getElementById('q'+setCount));
    		box.removeChild(document.getElementById('p'+setCount));
    	}
    }
     
    onload = function() {
    	document.getElementById('create').onclick = createSet;
    	document.getElementById('delete').onclick = deleteSet;
    	box = document.getElementById('setContainer');
    }
    HTML4Strict Code:
    <div id="setContainer"></div>
    <input type="button" value="Create Input Set" id="create">
    <input type="button" value="Delete Input Set" id="delete">
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Solved




    This is exactly the help I was looking for. Thank you for setting it up the way you did, it helps me to learn and understand it!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Next Line


    after the three boxes are created at once, I want the next set to go to a new line (<br>). How do I do this?
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Question Part 2


    Originally Posted by Winters
    Welcome to DevShed, mrcastrovinci.

    Does this explain the syntax a little better? I am assuming that you just want to remove the last set of inputs and not a specific set.
    JavaScript Code:
    var setCount = 0, box;
     
    function createSet() {
    	var materials = document.createElement('input');
    	materials.type = 'text';
    	materials.name = 'materials[' + setCount + ']';
    	materials.id = 'm' + setCount;
    	materials.value = 'Materials ' + setCount;
    	materials.size = 10;
     
    	var quantity = document.createElement('input');
    	quantity.type = 'text';
    	quantity.name = 'quantity[' + setCount + ']';
    	quantity.id = 'q' + setCount;
    	quantity.value = 'Quantity ' + setCount;
    	quantity.size = 10;
     
    	var price = document.createElement('input');
    	price.type = 'text';
    	price.name = 'materials[' + setCount + ']';
    	price.id = 'p' + setCount;
    	price.value = 'Price ' + setCount;
    	price.size = 10;
     
    	box.appendChild(materials);
    	box.appendChild(quantity);
    	box.appendChild(price);
    	setCount++;
    }
     
    function deleteSet() {
    	if (setCount > 0) {
    		setCount--;
    		box.removeChild(document.getElementById('m'+setCount));
    		box.removeChild(document.getElementById('q'+setCount));
    		box.removeChild(document.getElementById('p'+setCount));
    	}
    }
     
    onload = function() {
    	document.getElementById('create').onclick = createSet;
    	document.getElementById('delete').onclick = deleteSet;
    	box = document.getElementById('setContainer');
    }
    HTML4Strict Code:
    <div id="setContainer"></div>
    <input type="button" value="Create Input Set" id="create">
    <input type="button" value="Delete Input Set" id="delete">

    Any idea on making the set of 3 go to a new line each time the button is pressed.......3 boxes, new line.....Button pressed.....3 boxes, new line?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    Originally Posted by mrcastrovinci
    Any idea on making the set of 3 go to a new line each time the button is pressed.......3 boxes, new line.....Button pressed.....3 boxes, new line?

    Nevermind Found it


    document.createElement("P");

IMN logo majestic logo threadwatch logo seochat tools logo