www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Accessing array named form fields

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Posts
    14

    Accessing array named form fields

    I only manage to access non array named form fields.

    Code:
    <form method="post">
    <input type=checkbox name=check[]>
    <input type=text name=justinput value=testing>
    <hr>
    <input type=checkbox name=check[]>
    <input type=text name=input[] value=foo>
    <hr>
    <input type=checkbox name=check[] onclick="getthis(form, this)">
    <input type=text name=input[] value=bar>
    </form>
    
    <script>
    function getthis(form, test) {
    form.justinput.value="foobar" // works
    document.getElementById('justinput').value="foobar" // works
    //form.input[0].value="foobar" // fails
    //document.getElementById('input[0]').value="foobar" // fails
    }
    </script>
    Is there a way to at least get the index out of the clicked checkbox, and thus being able to access its matching input[]?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    form.elements['input[]'][0].value="foobar";
    document.getElementsByName('input[]')[0].value="foobar";
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2010
    Posts
    14
    Thanks! But as for the second part, how do you change the name that has a matching index to the checkbox? In this case, it would be 1.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Remove the input and replace it with one created using DOM methods
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2010
    Posts
    14
    No, what I meant was how do I tell the second checkbox to change the second input field, simply because both of them are second?

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    You have 2 errors in your code if I understand what you are trying to do correctlly

    1) When a web page has multiple elemenst of the same type, like multiple input elements, they will be stored in the dom as arrays named the element.

    Therefore your DOM will have input[0] for the first input element, input[1] for the second and so on.

    Your code has names assigned to the input elements with a value of 'input' as well. So there is a conflict in the DOM there. I wouldn't assign names to elements with the value the same as the element type.

    2) for javascript execution you don't need the [] in element names even if they are the same in multiple elements. The DOM will automatically put element names into an array if it detects the same name in multiple elements.

    I have changed your input element names from input[] to input1 in the code below and your javascript now works as I think you want it to.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    
    <script type="text/javascript">
    
    
    function getthis(form, test) {
    //form.justinput.value="foobar" // works
    //document.getElementById('justinput').value="foobar" // works
    
    form.input1[0].value="foobar" // original fails  *****NOW THIS WORKS  ********
    
    //document.getElementById('input[0]').value="foobar" // fails
    }
    
    
    
    </script>
    
    
    </head>
    <body>
    
    <form method="post">
    <input type=checkbox name=check>
    <input type=text name=justinput value=testing>
    <hr>
    <input type=checkbox name=check>
    <input type=text name=input1 value=foo>
    <hr>
    <input type=checkbox name=check onclick="getthis(form, this)">
    <input type=text name=input1 value=bar>
    </form>
    
    
    
    </body>
    </html>
    Last edited by tirna; 03-15-2010 at 10:19 PM.

  7. #7
    Join Date
    Mar 2010
    Posts
    14
    I think you confused "justinput" with "input". I never had two different types of "input". Nevertheless, thanks for the discovery about the lack of need of "[]". I never imagined it wasn't even needed. But like you admitted yourself, now document.getElementByName doesn't work. Isn't there a way to make it support your way too?

    Also, the question still remains, how do I, say, automatically make the first checkmark control the first input field, and the second checkmark to control the second input field (and the hundredth checkmark to control the hundredth input field, etc.)? In other words, control the matching input field of the same index.
    Last edited by lwc; 03-16-2010 at 02:32 AM.

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by lwc View Post
    I think you confused "justinput" with "input". I never had two different types of "input". Nevertheless, thanks for the discovery about the lack of need of "[]". .
    I didn't say you had 2 types of inputs.

    What I said was you had an array of input names called input which was possibly conflicting with the DOM's array called input which stores all the input elements in a web page.

    In your original code
    Code:
     
    <input type=text name=input[] value=bar>
    I wouldn't name the elements 'input' because of the potential conflict I mentioned above.

    In your original code, the line that you commented 'failed' now works and is highlighted in green. All I did was change the name of the element to input1
    Last edited by tirna; 03-16-2010 at 03:06 AM.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    If you place the inputs inline, so avoiding the problem of whitespace in the DOM, the referencing is easier:
    Code:
    <input type="checkbox" name="check[]" onclick="getthis(form, this)"><input type="text" name="input[]" value="bar">
    Code:
    test.nextSibling.value='foobar';
    The brackets are required to send array data to server programs. This solution will work with or without brackets.
    Last edited by Fang; 03-16-2010 at 02:43 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    Mar 2010
    Posts
    14
    Quote Originally Posted by Fang View Post
    The brackets are required to send array data to server programs.
    Oh yeah, now I remembered why I used brackets in the first place!

    Thanks tirna for the clarification about input vs. input1. Though I just used "input" for this example, I'll remember from now on it may cause problems.

    Okay, I assume the nextSibling method is not meant for document.getElementByName. With that said, here's how to get over the whitespace issue:

    Code:
    <form method="post">
    <input type=checkbox name=check[] onclick="bla(this, true)">
    <input type=text name=input1[] value=bla>
    <hr>
    <input type=checkbox name=check[] onclick="bla(this, true)">
    <input type=text name=input1[] value=bla>
    <hr>
    <input type=text name=input1[] value=bla>
    <input type=checkbox name=check[] onclick="bla(this, false)">
    <hr>
    <input type=text name=input1[] value=bla>
    <input type=checkbox name=check[] onclick="bla(this, false)">
    </form>
    
    <script>
    function bla(n, thenextsibling) {
      if (thenextsibling)
        x=n.nextSibling;
      else
        x=n.previousSibling;
      while (x.nodeType!=1) {
        if (thenextsibling)
          x=x.nextSibling;
        else
          x=x.previousSibling;
      }
      x.value='foobar';
    }
    </script>
    But how do I go to the "next" nextSibling, etc. if there is one sibling (or more) in the way between the checkbox and the relevant input field?

  11. #11
    Join Date
    Mar 2010
    Posts
    14
    Please allow more edit time, as the previous post could have been replaced by the following. I've programmed a way to control the amount of next/previous in next/previousSibling:

    Code:
    <form method="post">
    <input type=checkbox name=check[] onclick="bla(this)">
    <input type=text name=input1[] value=bla1>
    <hr>
    <input type=checkbox name=check[] onclick="bla(this, true, 2)">
    <input type=text name=input1[] value=bla2>
    <hr>
    <input type=text name=input1[] value=bla3>
    <input type=checkbox name=check[] onclick="bla(this, false, 2)">
    <hr>
    <input type=text name=input1[] value=bla4>
    <input type=checkbox name=check[] onclick="bla(this, false, 2)">
    </form>
    
    <script>
    function bla(n, thenextsibling, skip) {
      if (thenextsibling == undefined)
        thenextsibling = true
      if (thenextsibling) {
        x=n.nextSibling
        if (skip == undefined)
          skip=0
      } else {
        x=n.previousSibling
        if (skip == undefined)
          skip=0
      }
      while (x.nodeType!=1) {
        if (thenextsibling) {
           i=0
           while (i<=skip) {
             x=x.nextSibling
             if (x.name == undefined)
               continue
             i++
          }
        } else {
           i=0
           while (i<=skip) {
             x=x.previousSibling
             if (x.name == undefined)
               continue
             i++
           }
        }
      }
      alert(x.value)
    }
    </script>
    (note the usage of default values in functions).
    Last edited by lwc; 03-16-2010 at 06:25 AM.

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by lwc View Post
    Okay, I assume the nextSibling method is not meant for document.getElementByName. With that said, here's how to get over the whitespace issue
    nextSibling has no restriction when using getElementByName.
    I gave an example of how to avoid the whitespace issue. Place the 2 inputs next to each other without whitespace between them.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  13. #13
    Join Date
    Mar 2010
    Posts
    5

    hii

    sir plz tell me that if write the over problem so which option use in this site

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by ashwanithapasat View Post
    sir plz tell me that if write the over problem so which option use in this site
    Please explain in more detail.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  15. #15
    Join Date
    Mar 2010
    Posts
    14
    Oh, how I loath the don't edit policy. Sometimes x.nodeType is 1 to begin with. It seems to be fixed by changing
    Code:
    while (x.nodeType!=1)
    to
    Code:
    while (x.name == undefined)
    Code:
    <form method="post">
    <input type=checkbox name=check[] onclick="bla(this)">
    <input type=text name=input1[] value=bla1>
    <hr>
    <input type=checkbox name=check[] onclick="bla(this, true, 2)">
    <input type=text name=input1[] value=bla2>
    <hr>
    <input type=text name=input1[] value=bla3>
    <input type=checkbox name=check[] onclick="bla(this, false, 2)">
    <hr>
    <input type=text name=input1[] value=bla4>
    <input type=checkbox name=check[] onclick="bla(this, false, 2)">
    </form>
    
    <script>
    function bla(n, thenextsibling, skip) {
      if (thenextsibling == undefined)
        thenextsibling = true
      if (thenextsibling) {
        x=n.nextSibling
        if (skip == undefined)
          skip=0
      } else {
        x=n.previousSibling
        if (skip == undefined)
          skip=0
      }
      while (x.name == undefined) {
        if (thenextsibling) {
           i=0
           while (i<=skip) {
             x=x.nextSibling
             if (x.name == undefined)
               continue
             i++
          }
        } else {
           i=0
           while (i<=skip) {
             x=x.previousSibling
             if (x.name == undefined)
               continue
             i++
           }
        }
      }
      alert(x.value)
    }
    </script>
    Last edited by lwc; 03-16-2010 at 08:24 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles