Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

can anyone help me?

innerHTML

  • Please log in to reply
3 replies to this topic

#1 gon1387

gon1387

    CC Regular

  • Member
  • PipPipPip
  • 30 posts
  • Programming Language:C, C++, PHP, JavaScript, Others
  • Learning:C, Java, C++, PHP, Python, JavaScript, Others

Posted 04 September 2010 - 02:44 AM

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>";
  • 0

#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 04 September 2010 - 03:43 AM

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>

  • 0

#3 gon1387

gon1387

    CC Regular

  • Member
  • PipPipPip
  • 30 posts
  • Programming Language:C, C++, PHP, JavaScript, Others
  • Learning:C, Java, C++, PHP, Python, JavaScript, Others

Posted 14 September 2010 - 05:25 PM

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>

  • 0

#4 gokuajmes

gokuajmes

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 20 September 2010 - 01:18 AM

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)
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download