How to get the html List value through Javascript?

Question

I am trying to get values from html list <li>.

<ul>
    <li><a>Main Menu</a>
        <ul class="leftbutton" >
            <li value="List1"><a>Sampe 1</a></li>
            <li value="List2"><a>Sample 2</a></li>
            <li value="List3"><a>Sample 3</a></li>
            <li value="List4"><a>Sample 4</a></li>
            <li value="List5"><a>Sample 5</a></li>
        </ul>
    </li>
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

function changeList()
{
    var iframe = document.getElementById("iframeid");  
    var url = document.getElementById("selectedlist").value + ".html"; 
    iframe.src = url;
}

Where would I put onClick="changeList()" to get the values from the list?

Solution 1

You get several things wrong here.

1. a HTML list item (<li>) does not have a value
2. a HTML list has no "selected item"
3. you cannot get any "selected" item by calling getElementById()

Here is my alternative suggestion:

<ul>
  <li><a>Main Menu</a>
    <ul class="leftbutton" >
      <li><a href="List1.html" onclick="return changeList(this);">Sample 1</a></li>
      <li><a href="List2.html" onclick="return changeList(this);">Sample 2</a></li>
      <li><a href="List3.html" onclick="return changeList(this);">Sample 3</a></li>
      <li><a href="List4.html" onclick="return changeList(this);">Sample 4</a></li>
      <li><a href="List5.html" onclick="return changeList(this);">Sample 5</a></li>
    </ul>
  </li>
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

<script type="text/javascript">
function changeList(a)
{
  var iframe = document.getElementById("iframeid");
  iframe.src = a.href;
  return false;
}
</script>

Thoughts: If JavaScript is deactivated, it still works (rudimentarily). The function returns false, so when JavaScript is enabled clicking on the link cancels the href navigation.

Be aware that up to HTML 4.01 Transitional it is also possible to do this entirely without JavaScript. A target attribute with the frame name is sufficient:

<ul>
  <li><a>Main Menu</a>
    <ul class="leftbutton" >
      <li><a href="List1.html" target="iframename">Sample 1</a></li>
      <li><a href="List2.html" target="iframename">Sample 2</a></li>
      <li><a href="List3.html" target="iframename">Sample 3</a></li>
      <li><a href="List4.html" target="iframename">Sample 4</a></li>
      <li><a href="List5.html" target="iframename">Sample 5</a></li>
    </ul>
  </li>
</ul> 

<iframe id="iframeid" name="iframename" width="100%" height="100%" align="middle"></iframe> 

Solution 2

li has attribute value, but the value should be an integer, that is the point:

             <li value="1"><a>Sampe 1</a></li>
            <li value="2"><a>Sample 2</a></li>
            <li value="3"><a>Sample 3</a></li>
            <li value="4"><a>Sample 4</a></li>
            <li value="5"><a>Sample 5</a></li>

Solution 3

I'm not 100% sure about inline iframes but you could simply use

<li><a href="/path/to/html" target="myIframeId">Value</a></li>

This isn't valid html 4 strict but is valid with transitional and works in all browsers regardless.

Comments

[user32262]

With the click on a list I want to load an html page into an iframe (instead of opening a new html page).

[user32262]

Both solutions worked :-D. I prefer the javascript-less one with the target attribute.

[Tomalak]

Good to hear. This is the more portable solution in any case.