SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    accessing object elements from javascript

    Code:
    <script>
    function addString() {
      var text = document.myform.selectOption.value;
      var testNode = document.getElementById('test');
      var newNode = document.createElement('b');
      newNode.setAttribute("id",text);
      newNode.innerHTML = text;
      testNode.appendChild(newNode);
    }
    </script>
    
    <form name="myform" method="post" action="action">
    <select name="selectOption">
    	<option value="option1">option1</option>
    	<option value="option2">option2</option>
    	<option value="option3">option3</option>
    </select>
    
    <input name="Add1" type="button" class="formtext" value="Add"  onclick="addString();">
    
    <p id="test"></p>
    </form>
    I'm using javascript to grab the value picked from a dropdown menu and populate it below, which it works fine with the code above.
    The problem is that if I make the following change to the select name my javascript doesn't work anymore:

    Code:
    <script>
    ...
    var text = document.myform.selectOption[0].option.value;
    ...
    </script> 
    
    <form>
    <select name="selectOption[0].option">
    ...
    </form>
    I get an error saying that document.myform.selectOption.0 is null or not an object

    How can I achieve the above using this sort of names, the name has to be this form, I cannot change it because they are an array of objects.

    Thanks in advanced.
    http://www.fla-shop.com - Interactive maps for websites
    Flash Maps for web developers

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    You can access the field by using the array notation method.

    Code javascript:
    var text = document.myform['selectOption[0].option'].value;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to rewrite the last script to say
    var test=document.myform.selectOption.options[0].value;

    However, it is better to use the selectedIndex property of the select object when getting the value of a selection. Something like this is fired by an onchange handler on the select object:

    <select name="selectOption" onchange="saveSelection(this)">

    function saveSelection(obj) { text=obj.options[obj.selectedIndex].value; }

    You can then access the value of text in your first script if you have made text a global variable.


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
  •