Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Thanked 0 Times in 0 Posts

    Get value from text field.. made from javascript innerHTML ???

    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 =)


  2. #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Thanked 2,250 Times in 2,237 Posts
    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.


Posting Permissions

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