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 7 of 7

Thread: alert value

  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts

    alert value

    I want to print out (with an alert) the value corresponding to the selectbox, but somehow it doesnt seem to work out. How can I make it work please ?

    <form name="aform">

    <SELECT size=4 multiple NAME="GO" onClick="alert(aform.GO.value )">
    <OPTION value="a">Example a
    <OPTION value="b">Example b
    <OPTION value="c" selected>Example c
    <OPTION value="d">Example d
    <OPTION value="e">Example e
    <OPTION value="f">Example f
    <OPTION value="g">Example g
    <OPTION value="h">Example h
    </SELECT>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    <select size="4" multiple="multiple" name="GO" onclick="alert(this.options[this.selectedIndex].value )">
    But since it is a multiple select, there can be multiple selected options. So you need to loop through each option and checked if it is selected.
    Code:
    <select size="4" multiple="multiple" name="GO" onclick="showSelected(this)">
    ...
    function showSelected(oSel){
      var str = "";
      var len = oSel.options.length;
      for (var i=0; i<len; i++){
        if (oSel.options[i].selected){
           str += "\n" + oSel.options[i].value;
        }
      }
      if (str != ""){
        alert("The selected items are:\n" + str);
      }
      else{
        alert("There are no selected items.");
      }
    }

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for answering, it was very helpfull.. im sorry about the multiple thing, i copied and pasted it from a site, i don't want that in. Im having trouble with my general script though.. it makes use of that selectionbox and displays the corresponding div when a selection is made. However when I select 'demo c' I can't jump back to 'demo a'. How come ?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <style type="text/css">
    <!--
    .demo {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
    position:absolute; top:30px; left:100px; width:480px; height:280px;
    z-index:99; visibility:hidden;}
    -->
    </style>



    <script type="text/javascript">
    <!--
    function toggleBox(szDivID, iState) // 1 visible, 0 hidden
    {
    if(document.layers) //NN4+
    {
    document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById) //gecko(NN6) + IE 5+
    {
    var obj = document.getElementById(szDivID);
    obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all) // IE 4
    {
    document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
    }
    // -->
    </script>

    </head>
    <body>
    <form name="aform" onload=toggleBox('a',1);>

    <select size="4" name="GO" onclick="toggleBox(this.options[this.selectedIndex].value,1);">
    <OPTION value="a" selected>Example a
    <OPTION value="b">Example b
    <OPTION value="c">Example c
    </SELECT>

    <div ID="a" class="demo">
    demo
    </div>

    <div ID="b" class="demo">
    demo b
    </div>

    <div ID="c" class="demo">
    demo c
    </div>



    </body>
    </html>

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    SELECT does not support onclick event(in fact OPTION, at least not in IE), use onchange instead. And, if the select is not multiple, you may use the select's value (which in this case is the same with the selected option's value.

    onchange="toggleBox(this.value,1)">
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, thanks.. How about the problem that I cant swap back to demo a ?
    For example i select 'c' in the selectionbox, the c div appears, then when I select 'b' the b div doesnt appear.

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Location
    Preston, Lancashire, England
    Posts
    285
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the problem was that the div tags wern't hiding. and therefore c was always going to be top.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    
    <style type="text/css">
    <!--
    .demo {color:#000033; background-color:#cccccc; layer-background-color:#cccccc;
    position:absolute; top:30px; left:100px; width:480px; height:280px;
    z-index:99; visibility:hidden;}
    -->
    </style>
    
    
    
    <script type="text/javascript">
    <!--
    
    var previouse = "";
    function toggleBox(szDivID, iState) // 1 visible, 0 hidden
    {
    	if(document.layers) //NN4+
    	{
    	document.layers[szDivID].visibility = iState ? "show" : "hide";
    		if(previouse != "")
    		{
    			document.layers[previouse].style.visibility = "hide";
    			
    		}	
    
    	}
    	else if(document.getElementById) //gecko(NN6) + IE 5+
    	{
    	var obj = document.getElementById(szDivID);
    	obj.style.visibility = iState ? "visible" : "hidden";
    		if(previouse != "")
    		{
    			var obj = document.getElementById(previouse);
    			obj.style.visibility = "hidden";
    			
    		}
    	}
    	else if(document.all) // IE 4
    	{
    	document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    if(previouse != "")
    	{
    		document.all[previouse].style.visibility = "hidden";
    		
    	}	
    }
    	
    	previouse = szDivID;
    }
    // -->
    </script>
    
    </head>
    <body>
    <form name="aform" onload=toggleBox('a',1);>
    
    <select size="4" name="GO" onclick="toggleBox(this.options[this.selectedIndex].value,1);">
    <OPTION value="a" selected>Example a
    <OPTION value="b">Example b
    <OPTION value="c">Example c
    </SELECT>
    
    <div ID="a" class="demo">
    demo
    </div>
    
    <div ID="b" class="demo">
    demo b
    </div>
    
    <div ID="c" class="demo">
    demo c
    </div>
    
    
    
    </body>
    </html>
    this should work
    Cheers
    MRMAN
    Last edited by MRMAN; 01-18-2006 at 03:42 PM.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Wouldn't be the below code more helpfull to you? You may use as many divs as you want, just keep the correspondence with the option, without changing the code. No need ov values or id's. Just the container div id='container':
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    var 
    divs;
    function 
    hideD(){
    for(var 
    i=0;i<divs.length;i++){
    divs[i].style.display='none';
    }
    }
    function 
    showD(s){
    hideD();
    s>0?divs[s-1].style.display='block':null
    }
    onload = function(){
    divs document.getElementById('container').getElementsByTagName('div');
    hideD();
    }
    </script>
    </head>
    <body>
    <select onchange="showD(this.selectedIndex)">
    <option>-- select layer --</option>
    <option>show a</option>
    <option>show b</option>
    <option>show c</option>
    <option>show d</option>
    </select>
    <div id="container">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    </div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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