3 replies to this topic

[gon1387]

this snippet should add another text input form for Item Name and Item Quantity. But everytime I add another one, when it appended the previous added text form entries or values are deleted or cleaned. How come it happen? How can i prevent it?

document.getElementById("itemList").innerHTML += "<div id=\"itemNo"+itemNumber+"\"><span><label>ITEM NAME: </label><input type=\"text\" size=\"10\" name=\"itemName"+itemNumber+"\" /><label>ITEM QUANTITY: </label><input type=\"text\" size=\"2\" name=\"itemQuantity"+itemNumber+"\" /></span></div>";

[wim DC]

What you type in the textboxes isn't part of the innerhtml code.
so when it goes retrieve the html code from the itemList, then adds the new code, then places it back into the itemList. The value of the textboxes isn't there.
You'll have to store the values of those textboxes first. Then add the new items. Then put the values back.

This is how i would do it, notice how i gave the 2 textboxes IDs:

<script type="text/javascript"> 

      var itemNumber = 0;

      function klik(){ 

	var itemNames = new Array(itemNumber);

	var itemQuantities = new Array(itemNumber);


	for(var i=0 ; i<itemNumber ; i++){

	  itemNames[i] = document.getElementById('itemName'+i).value;

	  itemQuantities[i] = document.getElementById('itemQuantity'+i).value;

	}

   

        document.getElementById("itemList").innerHTML += "<div id=\"itemNo"+itemNumber+"\"><span><label>ITEM NAME: </label><input type=\"text\" size=\"10\" [COLOR="red"][B]id=\"itemName"+itemNumber[/B][/COLOR]+"\" name=\"itemName"+itemNumber+"\" /><label>ITEM QUANTITY: </label><input type=\"text\" size=\"2\" [COLOR="red"][B]id=\"itemQuantity"+itemNumber+"\"[/B][/COLOR] name=\"itemQuantity"+itemNumber+"\" /></span></div>";

        itemNumber += 1; 


	for(var i=0 ; i<itemNumber-1 ; i++){

	  document.getElementById('itemName'+i).value = itemNames[i];

	  document.getElementById('itemQuantity'+i).value = itemQuantities[i];

	}

      }

</script>

[gon1387]

Thanks a lot Oxano. It helps a lot in my study with javascript. :)

I also learned this lately while i was researching. They call it Dynamic Form and it also does the way i wanted it to be. Here's the code I wrote, for those who had the same problem that I had.

<script type="text/javascript">


window.onLoad = initAll;


customerItemNames = new Array();

customerItemQuantity = new Array();


function initAll(){

	document.getElementById("addItem").onclick = addItem;	

}



var itemNumber=0;


function addItem() {

	newItemDiv = document.createElement("div");

	newItemDiv.setAttribute("class","itemList");

	newItemDiv.innerHTML = "<span><label>ITEM NAME: </label><select name=\"itemName[]\"><option value=\"tabo\">TABO</option><option value=\"shampoo\">SHAMPOO</option><option value=\"sabon\">SABON</option></select><label>ITEM QUANTITY: </label><select name=\"itemQuantity[]\"><option value=\"1\">1</option><option value=\"2\">2</option><option value=\"3\">3</option></select></span>";

	document.getElementById("itemList").appendChild(newItemDiv);

}




</script>

[gokuajmes]

helping out people with same problems is the spirit of Forums. I should appreciate you for putting out your code for the needy(someone else)