How to read selected listbox value ?

[JackTheRussel]

Hi.

I have dropdown box on my page.

Now in function Stat I would like to read the selected dropdpwn box value. How can it be done?

I have tried to read the selected value like this:

var selected = document.getElementById('dropdiv').innerHTML;

But it gives me something like this:

<select name="drop" onchange="function2(this.value">
<option>select value</option>
<option>value="1">1</option>
<option>value="2">2</option>

I would expect 1 or 2.

So how can I read only the selected dropdown box value to the variable?

 

[trollacious]

I sure hope the code you provided isn't copied and pasted from your text editor. You're missing a closing parenthesis in your function call and have too many closing brackets ">" in most of your options.

If you didn't copy and paste your code, please do that instead of typing it in fresh. If you DID copy and paste, run your HTML through a validator to find some of your errors before looking further.

Lee

 

[dwarfthrower]

If you want to read the value of something, read it's [tt]value[/tt] property, not it's [tt]innerHTML[/tt] property.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo

 

[BillyRayPreachersSon]

You're also calling the wrong function. You're calling "function2", when you say you want to be calling a function called "Stat".

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[scorpio66]

And what you really want is the value of the selected index.

function fn(ele) {
  var selected = ele.options[ele.selectedIndex].value;
  alert(selected)
}

</script>
<select id='dropdiv' onchange="fn(this)">
  <option value=1>1</option>
  <option value=2>2</option>
</select>

Chaz

 

[JackTheRussel]

Thanks for your replys.

First, I try to clarify what I meant.


In my index.php page, I have dropdownbox:

<div id="letterdiv"><select name="letter">
	<option>Select profile First</option>
        </select></div>

And dropdownbox gets values from this php-program:

<?php
$query="SELECT id FROM table WHERE col='something';

?>

<select name="letter">
<option>Select value</option>
<? while($row=mysql_fetch_array($result)) { 
?>
<option value=<?=$row['id']?>><?=$row['id']?></option>
<? } ?>
</select>

Now when user pushes button, it calls function WhatWasValue Where I try to read the selected dropdownbox value, but it just don't work.

The variable ind is undefined all the time?

function WhatWasValue {

var ind = document.form1.letter.selectedIndex; //undefined 
var selected = document.form1.letter.options[ind].value; 
alert(selected);
}

So I really don't know what is wrong?

The Firefox error console says: ind has no properties ?

 

[BillyRayPreachersSon]

I'd say that the problem is coding errors bought on by years of Internet Explorer letting developers get away with lazy coding practices.

Assuming your form has a "name" attribute with a value of "form1", use this:

var frm = document.forms['form1'].elements;
var ind = frm['letter'].selectedIndex;
var selected = frm['letter'].options[ind].value;
alert(selected);

Basically, IE gives developers too many non-standard shortcuts like automatically generating IDs from NAMEs. Not good. Not good at all.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JackTheRussel]

BillyRayPreachersSon.

Yes, the form name is form1

Now when I try to do like you said, I get this kind responses:

var frm = document.forms['form1'].elements;
alert(frm); // [object HTMLCollection]
var ind = frm['letter'].selectedIndex; 
alert (ind); // undefined ??
var selected = frm['letter'].options[ind].value;
alert(selected); // nothing, because ind is undefined.

 

[JackTheRussel]

I have to add that the firefox error console says:

ind has no properties

 

[tsuji]

[0] That variation is absolutely irrelevant and the criticism misguided.

[1]When you do your mysql_fetch_array(), have you at all executed the query?
[tt]
<?php
$query="SELECT id FROM table WHERE col='something';
[red]$result = mysql_query($query);[/red]
?>[/tt]
[2] The value should be quoted to be on safe-side.
[tt]
<option value=[red]"[/red]<?=$row['id']?>[red]"[/red]><?=$row['id']?></option>
[/tt]
[3] What kind of function "WhatWasValue" is that without ()?
[tt]
function WhatWasValue[red]()[/red] {

var ind = document.form1.letter.selectedIndex; //undefined
var selected = document.form1.letter.options[ind].value;
alert(selected);
}
[/tt]

 

[BillyRayPreachersSon]

[0] That variation is absolutely irrelevant

It's all too easy to say that after knowing what the form code looks like, but it was a good guess given I did not know beforehand.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tsuji]

It is not knowing beforehand or afterhand, one should not take some fine point and blindly recite it without thinking.

 

[JackTheRussel]

tsuji:

[1] Yes I execute the query. Query works fine, because I get response stuff to the dropdown box.

[2]Fixed. Thanks.

[3] My mistake. I write that clause too fast. There is ()

I just wonder, could the problem be this:

When php-script is executed, I actually run two sql-queries. And I get stuff from there like this:

...
								if (req.status == 200) {
  var response = req.responseText.split('|');
					  document.getElementById("letterdiv").innerHTML = response["0"];
					  document.getElementById("anotherdiv").innerHTML = response["1"];

Now the stuff goes to dropdownbox (letterdiv) and another sql-query result goes to anotherdiv.

So I believe I cant get values from dropdownbox, because I dont do any refresh etc.. before I try to read the values.

I really cant test that, because if I refresh pages, before I try to read dropdown values, every dropdown values goes to zero.

 

[tsuji]

[4] When (a) at the beginning the letterdiv and anotherdiv are empty, you make an xmlhttp request and get the responsetext and split them according to your own design on the php page, you first test it on the (b) ie: do this see the result.
[tt]
if (req.status == 200) {
var response = req.responseText.split('|');
document.getElementById("letterdiv").insertAdjacentHTML("beforeEnd", response["0"]);
document.getElementById("anotherdiv").insertAdjacentHTML("beforeEnd",response["1"]);
[/tt]
Note: I am talking about the fresh insert on on ie.

[4.1] If what done in [4] is successful on ie, you can now improve the routine by clear out the contents of the two div beforehand. This would ensure multiple execution of xmlhttp request results occur multiple times on the divisions.

[4.2] If that testing is successful on ie, you can add a fixed protocol in the script section to make the insertAdjacentHTML support on ff.
[tt]
<script language="javascript" type="text/javascript>
//accredited to Thor Larholm
if(typeof HTMLElement!="undefined" && ! HTMLElement.prototype.insertAdjacentElement){

HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML);
}
}
</script>
[/tt]
[4.1.1] For further detail, I can only quote one of my previous thread, no implication of authority.

http://tek-tips.com/viewthread.cfm?qid=1203242

 

[tsuji]

Amendment
Missing a closing quote here.
[tt]<script language="javascript" type="text/javascript[red]"[/red]>[/tt]

 

[BillyRayPreachersSon]

It is not knowing beforehand or afterhand, one should not take some fine point and blindly recite it without thinking.

Then what is it that we do when we give advice based upon a hunch driven by years of experience, when we do not know all the facts?

Come on, tsuji. We're meant to be helping here, and that is just what I was trying to do. If you don't like it, fine, but don't knock the fact I tried to help.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]