...

View Full Version : Resolved selectedIndex and values



ubh
03-13-2009, 05:37 PM
Just when I thought I had run into an worked out every situation on gathering values from page elements I run into the nasty select box.

I want to run a function that alerts a selected options value. Here is my original code that wont work in IE.


function alertState()
{
var state = document.getElementById("state").value;
alert(state);
}


So I have read online that because Firefox.. let me repeat that Firefox has it wrong (that's the first) we must use a selectedIndex to gather first our selected array option then alert its value... I just cant seem to get the last part of getting the selected array options value, here is what I have.


function alertState()
{
var state = document.getElementById("state").selectedIndex;
alert(state.value);
}

Of course here is my html.


<select id="state" onchange="alertState()">
<option></option>
<option>State One</option>
<option>State Two</option>
<option>State Three</option>
<option>State Four</option>
<option>State Five</option>
<option>State Siz</option>
<option>State Seven</option>
</select>

Do I have to promise to give up my first born or something just to get this to work lol?

Any help would be appreciated, thanks.

Philip M
03-13-2009, 05:58 PM
You have not assigned any value to the options.



<select id = "state" onchange = "alertState()">
<option value = "0">Select Option</option>
<option value = "1">State One</option>
<option value = "2">State Two</option>
<option value = "3">State Three</option>
<option value = "4">State Four</option>
<option value = "5">State Five</option>
<option value = "6">State Six</option>
<option value = "7">State Seven</option>
</select>


<script type = "text/javascript">
function alertState() {
var val = document.getElementById("state").value;
alert (val);
}
</script>


“Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

ubh
03-13-2009, 06:00 PM
I don't want a value attribute, I want the contents of the selected option.


<option value = "1">State One</option>

not


<option value = "1">State One</option>

Philip M
03-13-2009, 06:14 PM
I want to run a function that alerts a selected options value.


I don't want a value attribute, I want the contents of the selected option.


<option value = "1">State One</option>

not


<option value = "1">State One</option>


You cannot capture the contents (text) of the selected option, but you can easily:-


<select id="state" onchange="alertState()">
<option value = "0">Select Option</option>
<option value = "State One">State One</option>
<option value = "State Two">State Two</option>
<option value = "State Three">State Three</option>
<option value = "State Four">State Four</option>
<option value = "State Five">State Five</option>
<option value = "State Six">State Six</option>
<option value = "State Seven">State Seven</option>
</select>

ubh
03-13-2009, 06:34 PM
Hum ok well my mistake, I always thought that when say gathering a varible from an input box you point to its value like so.



<input type="text" id="inputId" />

function getInputValue()
{
var input = document.getElementById("inputId").value;
alert(input);
}

I figured that select options were the same.

Fortunately I populate these select boxes via php so adding a value to each option box is a cinch, however if I had not this would have really sucked beings that my state box lists every state in the US and Canada.

And now it begs the questions what the heck is the selectedIndex property for then cause everything I have read talks about using it to gather contents of option box but requires some magic skill lol cause I could not replicate it.

Eldarrion
03-13-2009, 06:43 PM
Or....



<script type="text/javascript">
function alertState()
{
var temp = document.getElementById("state");
var state = document.getElementById("state").selectedIndex;
var cont = temp.options[state].value;
alert(cont);
}
</script>


Will work without assigning a value to the option element. Certainly, it has more lines of code, but it is an alternative solution in case you're not generating stuff with PHP.

Henley
03-13-2009, 06:51 PM
You cannot capture the contents (text) of the selected option...

False.

Use this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function alertState(nSelect){

var nState = nSelect.options[nSelect.selectedIndex].text;
alert(nState);

}

</script>
<style type="text/css">

body {background-color: #fffacd; margin-top: 60px;}
form {width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
fieldset {width: 620px; padding-left: 10px; background-color: #eee8aa; border: 1px solid #e6b280;}
legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px;
padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
label {font-family: tahoma; font-size: 11pt; display: block;}
.submitBtn {background-color: #fff8dc; border: 1px solid #000000; font-family: arial; font-size: 10pt;
font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto;
margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Form</legend>

<select id="state" onchange="alertState(this)">
<option>Select Option</option>
<option>State One</option>
<option>State Two</option>
<option>State Three</option>
<option>State Four</option>
<option>State Five</option>
<option>State Six</option>
<option>State Seven</option>
</select>

<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>

Philip M
03-13-2009, 07:43 PM
Cranford, er I mean Henley ...

If no value is assigned to the options then regardless of whether Javascript is en- or disabled the form data will not submit correctly as the value of each option is "" (blank). It is the value which is passed, not the (descriptive) text. You have shown that it is indeed possible to capture the text of the selected option, but what is the point? The correct method is to define a value for each option.

Henley
03-13-2009, 08:00 PM
Your assertion is false.

The browser will submit the option text if an option value is not declared.

Apostropartheid
03-13-2009, 09:00 PM
Henley, I'm watching you. Very closely.

Philip M
03-13-2009, 09:20 PM
Your assertion is false.

The browser will submit the option text if an option value is not declared.


Might I ask what is your authority for that statement? I was always under the impression that what was submitted is the index of the selected option.

Henley
03-13-2009, 09:33 PM
Selected entry from thousands returned by Yahoo search:

Tips & Tricks

* Markup other than the OPTION or OPTGROUP elements should never appear in a selection list.
* If no VALUE attribute is supplied for an OPTION element, the displayed content of the OPTION is submitted to the form processing script. Otherwise, the VALUE attribute is sent.

http://www.blooberry.com/indexdot/html/tagpages/s/select.htm

And another:

http://www.opensymphony.com/webwork/wikidocs/Select%20tag.html

Name Required Description
id no HTML id attribute
name yes HTML name attribute
value no Data to pass as field value

Philip M
03-13-2009, 09:57 PM
Noted. We live and learn.


"I am not young enough to know everything." - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

Henley
03-13-2009, 11:16 PM
Many, but sadly, not most of us, do so with humility and without gratuitous confrontation.

You know how to use a search engine. You could have done so before declaring matters of fact with certainty.

No one here reports to, Philip, despite your apparent belief to the contrary.

Others come along, read your assertion, then believe that the code I posted is useless, if the form is to be submitted.

No one knows everything. Not me, not you. The difference between us is that I post code, nothing more - valid mark-up and cross-browser. I don't confront anyone. I'm always forced to respond to replies, benign, amicable and otherwise.

I don't report to, Philip.

Let it go. Allow people to post, in any thread, without passing judgment.

Let it go.

I believe that if we ever met, we'd become fast friends. We'd sit, tip a couple pints, and laugh about the world and JavaScript novices.

Please, let it go.

ubh
03-14-2009, 12:14 AM
Guys, both ways are valid for my situation, bot selectedIndex and value attributes. I am not sending it via form but rather Ajax so you two have valid position on both side from my point of view.

Thanks, both of you!!

Philip M
03-14-2009, 10:08 AM
Many, but sadly, not most of us, do so with humility and without gratuitous confrontation.

You know how to use a search engine. You could have done so before declaring matters of fact with certainty.

No one here reports to, Philip, despite your apparent belief to the contrary.

Others come along, read your assertion, then believe that the code I posted is useless, if the form is to be submitted.

It's wrong, it's false, and it's irresponsible.

No one knows everything. Not me, not you. The difference between us is that I post code, nothing more - valid mark-up and cross-browser. I don't confront anyone. I'm always forced to respond to replies, benign, amicable and otherwise.

I don't report to, Philip.

Let it go. Allow people to post, in any thread, without passing judgment.

Let it go.

I believe that if we ever met, we'd become fast friends. We'd sit, tip a couple pints, and laugh about the world and JavaScript novices.

Please, let it go.

Henley,

You have already been banned for your abusive behaviour under the name of Cranford (are you not thoroughly ashamed of yourself? - you ought to be), but you have managed to get yourself recycled as Henley. And as Henley you have already received 7 infraction points and are one-third of the way to being banned again. Money has been laid on you not surviving another 30 days before you are thrown out yet again. I am told Cranford is a contender for the record for over-all number of infraction points. Does this not suggest that others find your behaviour unacceptable as well?

I don't know why you think I confront you, but it is true that I do not suffer fools gladly and I am not prepared to accept your thoroughly unpleasant and supercilious attitudes. You seem to want to demonstrate how incredibly clever and knowledgeable you are - in fact a good deal of your stuff is simply pretentious and over-complicated rubbish, often quite unsuitable for the novice OP.

Eaxmple:- http://www.codingforums.com/showthread.php?t=131339


I believe that if we ever met, we'd become fast friends. We'd sit, tip a couple pints, and laugh about the world and JavaScript novices.

I have rarely heard a more ludicrous assertion, and the very fact that you make it re-inforces my view that you live in a dream world some way from reality. I would not wee-wee on you if you were on fire. :D:D

I think it was Lady Astor who said to Winston Churchill "If I was married to you, I would put poison in your whisky".
To which Churchill replied "If I was married to you, I would drink it". :D:D

These forums are intended to offer assistance to less experienced people. They are not supposed to be a pissing contest.

ubh
03-14-2009, 10:22 AM
"If I was married to you, I would put poison in your whisky".
To which Churchill replied "If I was married to you, I would drink it".

:eek: LoL

Henley
03-14-2009, 01:24 PM
Deleted by moderator

Philip M
03-14-2009, 02:27 PM
Deleted by moderator

Above vomit captured before you delete it.

I suspect that the "fools" will be banning you again very soon. Ciao!

"Insanity is doing the same thing over and over again, but expecting different results." - Rita Mae Brown

Apostropartheid
03-14-2009, 10:54 PM
Henley/whoever you are, I had already warned you and yet you insult me, every other mod and WA, who pays so much for the help of others? I cannot tolerate this. You're out (again).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum