SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: onclick error

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2002
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onclick error

    I am using the following code to change the value of a text input named "postVar[name]" but the brackets seem to confuse javascript.

    PHP Code:
    onchange="postVar[name].value=this.value;" 
    I can't change the name of the text field due to php. How do I make this work?

    Thanks in advance,
    Dave

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all, you shouldn't be trying to access element names as JSObjects - that's IE-only syntax and a no-no.

    Secondly - you're right. The brackets are like operators in JS, so you must assert the value as a string and not as a literal property.

    onchange="this.form.elements['postVar[name]'].value = this.value;"
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Zealot
    Join Date
    Sep 2002
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    First of all, you shouldn't be trying to access element names as JSObjects - that's IE-only syntax and a no-no.
    I don't understand, what's the alternative? Should I use the ID rather than the name?

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    let me paint you a picture. take this HTML
    Code:
    <form id="myForm">
       <input type="text" name="Name"/>
    </form>
    Okay - we have several ways of accessing this form input Name (that is, to retrieve a reference to it in javascript so that we can manipulate it's properties, etc)

    1) document.forms[0].Name
    2) document.forms['myForm'].Name
    3) document.forms[0].elements['Name']
    4) document.forms['myForm'].elemenst['Name']
    5) document.getElementById( 'myForm' ).Name
    6) document.getElementById( 'myForm' ).elements['Name']

    those are the only methods I'd recommend. Microsoft had the <sarcasm>brilliant idea</sarcasm> to expose every named/id'd form and image into the global scope of the DOM. That means instead of using any of the methods above, you could simply access it by form name|id + element name

    myForm.Name

    Seems to be good, because it saves us typing, right? Okay - it is shorter to type, but it is terrible to pollute the global scope - which we as javascript programmers should by trying to keep as clean as possible. If we had this in our page
    Code:
    <html>
    <head>
     <script type="text/javascript">
      var myForm = 'hello world';
      function init()
      {
       myForm.Name.value = 'bye bye';
      }
     </script>
    </head>
    <body onload="init()">
     <form id="myForm">
      <input type="text" name="Name"/>
     </form>
    </body>
    </html>
    There would be an error, even in IE -- because the form's ID conflicts with the javascript variable - which should never happen because they should never reside in the same scope. The mere existence of the variable disallows IE to expose that form as a global object - so any script that relied on this method could break of a variable of the same name was used elsewhere.

    THAT is why
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •