SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    982
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessing Poorly Named Form Elements

    So I have forms that are created by my shopping cart that I am having a hard time accessing using JavaScript. Before anyone asks, it would be impossible for me to change the structure of these forms or to rename the form elements.

    These forms are on the product pages, where each product can have X number of "attributes". Each attribute will have two form elements:
    Product_Attributes[n]:code and Product_Attributes[n]:value

    I have a script that needs to make duplicates of these elements, and I would prefer to access them through the DOM like so:
    Code JavaScript:
    for (var i=1; i<=attribute_count; i++) {
    	new_form.appendChild(document.productForm.Product_Attributes['+i+']:code.cloneNode(true));
    	new_form.appendChild(document.productForm.Product_Attributes['+i+']:value.cloneNode(true));
    }
    However, that code will give me an error that firebug displays as "invalid label"

    If I use document.getElementById(), I can access the form elements with no problems, but once I make a duplicate, I have no way to make any changes to those fields.

    And just to clarify some more, I can access other fields in the productForm form, but I believe that the semi-colon is causing problems. I have tried escaping the semi-colon, but it was really just a shot in the dark. Does anyone know any tricks to get this to work? I relaly don't like how the fields are labeled, but I am afraid that is beyond my control.

    Thanks,

    Brandon
    MySQL v5.1.58
    PHP v5.3.6

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, this is most likely to do with the colon (a semi-colon is the thing at the end of the line). Classes and IDs are certainly not allowed to contain colons, name attributes probably aren't either.

    Unless I'm going mad, I don't see why you need to do '+i+' instead of just i:
    Code:
    for (var i=1; i<=attribute_count; i++) {
        new_form.appendChild(document.productForm.Product_Attributes[i]:code.cloneNode(true));
        new_form.appendChild(document.productForm.Product_Attributes[i]:value.cloneNode(true));
    }
    If that doesn't work, try to use array notation:

    Code:
    for (var i=1; i<=attribute_count; i++) {
    new_form.appendChild(document.productForm['Product_Attributes['+i+']:code'].cloneNode(true));
    new_form.appendChild(document.productForm['Product_Attributes['+i+']:value'].cloneNode(true));
    }
    In that case, doing '+i+' would be necessary.


Bookmarks

Posting Permissions

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