View Full Version : Get value from text field.. made from javascript innerHTML ???

06-24-2009, 12:19 AM
Hey guys,

I'm having some problems getting this to work. I have a decent knowledge of javascript, but am by no means an expert.

Basically, I need to get the value of an input text field that was created using javascript and .innerHTML

Here's my code that won't work:

This creates the text field. (Array so that multiple fields can be added)

// Global Variables
var allItems = new Array();
var itemCount = 1;
allItems[0] = "<input id='item_quantity_0' type='text' size=1 value='1'/><select id='item_gender_0'><option>Mens</option><option>Womens</option></select><select id='item_size_0'><option>S</option><option>M</option><option>L</option><option>XL</option></select><select id='item_color_0'><option>Grey</option><option>White</option></select><a href='javascript:addItem();'><img src='images/add.png' /></a><br />";
// Add Item
function addItem() {
allItems[itemCount] = "<input id='item_quantity_"+itemCount+"' type='text' size=1 value='1'/><select id='item_gender_"+itemCount+"'><option>Mens</option><option>Womens</option></select><select id='item_size_"+itemCount+"'><option>S</option><option>M</option><option>L</option><option>XL</option></select><select id='item_color_"+itemCount+"'><option>Grey</option><option>White</option></select><a href='javascript:deleteItem("+itemCount+");'><img src='images/cross.png' /></a><br />";
var items = allItems.join("");
itemCount = itemCount + 1;
document.getElementById('contain_right_items').innerHTML = items;

And this needs to be able to get the value of the field:

// Update Buy Button
function buyButton() {
buy = "<form action='https://www.paypal.com/cgi-bin/webscr' method='post'>\
<input type='hidden' name='cmd' value='_cart'>\
<input type='hidden' name='upload' value='1'>\
<input type='hidden' name='business' value='"+Business+"'>\
<input type='hidden' name='item_name' value='"+itemName+"'>\
<input type='hidden' name='amount' value=''>\
<input type='hidden' name='cancel_return' value='"+Cancel+"'>\
<input type='hidden' name='return' value=''>\
<input type='hidden' name='no_note' value='1'>\
<input type='hidden' name='currency_code' value='USD'>\
<input type='image' class='download' src='"+ButtonImage+"'>";
var i=0;
for (i=0;i<itemCount;i++) {
var j = i + 1;
buy = buy + "<input type='hidden' name='item_name_"+j+"' value='Name "+j+"'>\
<input type='hidden' name='amount_"+j+"' value='"+Price+"'>\
<input type='hidden' name='quantity_"+j+"' value='"+document.getElementById['item_quantity_'+i].value+"'>";
buy = buy + "</form>";
document.getElementById('contain_right_buy').innerHTML = buy;

As you can see it is a paypal button that I am trying to add functionality to add multiple items with javascript.

It also doesn't work when I manually insert the id as 'item_quantity_0'

By doesn't work I mean the document.getElementById('contain_right_buy').innerHTML = buy; never actually occurs.

Hope somebody can help =)


06-24-2009, 09:57 AM
By doesn't work I mean the document.getElementById('contain_right_buy').innerHTML = buy; never actually occurs. innerHTML is not a proper DOM technique, and so never use it to add your html tags. Use document.createElement() and document.appendChild() methods instead.