Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    59
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Referencing form components

    Which is typically preferred and why?

    Code:
    var x = document.getElementById("mylist").value;
    var x = document.getElementById("mylist").options[document.getElementById("mylist").options.selectedIndex].value;
    var x = document.myform.mylist.value;
    Do some work on a wider range of browsers? Or just personal preference?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    These refer to select/option boxes.

    They will all work in all browsers, but No.2 is long-winded and unnecessary.

    var x = document.myform.mylist.value; is to be preferred if there is a form, as assigning form elements an id is really superflous.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 06-16-2009 at 07:51 PM.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    59
    Thanks
    5
    Thanked 4 Times in 4 Posts
    I assuming its not as simple to get the text part, as document.myform.mylist.text just gives me "undefined" whereas document.myform.mylist.options[document.myform.mylist.options.selectedIndex].text works as expected?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by scrappy View Post
    I assuming its not as simple to get the text part, as document.myform.mylist.text just gives me "undefined" whereas document.myform.mylist.options[document.myform.mylist.options.selectedIndex].text works as expected?
    Look at these examples:-

    Code:
    <form name='myform'>
    <select name = 'list1' id = 'list1' onchange = "rem(this)">
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Orange'> Orange </option>
    </form>
    
    <script type = "text/javascript">
    function rem(which) {
    var val1 = document.myform.list1.value;
    alert ("Value 1: " + val1);
    
    var val2 = which.value;
    alert ("Value 2: " + val2);
    
    var val3 = document.getElementById("list1").value;
    alert ("Value 3: " + val3);
    
    var si = document.myform.list1.selectedIndex;
    var txt1 = document.myform.list1[si].text; 
    alert ("Text 1: " + txt1);
    
    var txt2 = document.getElementById("list1").options[si].text; 
    alert ("Text 2: " + txt2);
    
    var txt3 = which.options[which.selectedIndex].text;
    alert ("Text 3: " + txt3);
    }
    
    </script>
    Last edited by Philip M; 06-17-2009 at 12:19 PM. Reason: Improved


  •  

    Posting Permissions

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