how do i get selected item's index number in select box using client side javascript

Hi Experts
I need to capture the selected item's index number of select box using client side javascript.
im have the following form and select box gets populated using client side javascript:

<form name="frm" action="mygroup.aspx" method="post" onSubmit="return submitform();">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr><td>
 <select name="gateway_dep" onchange="refreshDest()">
   <option></option>
 </select>
</td></tr>
<tr><td>
 <select name="dest_dep" onchange="destchanged()">
   <option></option>
 </select>
</td></tr>
<tr><td>
 <input name="submit" type="submit" value="Search">
</td></tr>
</table>
</form>
I need to get the value of selected item's index number on form submit. Any help plz.........?

regards
shaukat
shwaqar82Asked:
Who is Participating?
 
TNameCommented:
Yes, but you will need to access the value:

alert(document.frm.gateway_dep[document.frm.gateway_dep.selectedIndex].value);

or

  var theSel = document.frm.gateway_dep;
  alert(theSel[theSel.selectedIndex].value);

0
 
dakydCommented:
Once you have something that points to the select that you want, you can use the selectedIndex attribute.  So, say you wanted the selected index number for the gateway_dep drop down, you could do this:

  var theSel = document.frm.gateway_dep;
  alert(theSel.options.selectedIndex);

The same goes for any other drop-down.  You can also combine the two statements into one if you like.  Hope that helps.
0
 
TNameCommented:

Or maybe it's me who didn't understand this sentence correctly (?):

>I need to get the value of selected item's index number on form submit.

Yes, I guess dakyd understood it corectly, it's the value of the *number*.... Oh well ;)

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
Not for points but for better code

pass the form object and the select object in the event
Do NOT call anything name="submit" it is reserved
and do NOT try to submit the the form in the function you call onSubmit

<script>
function submitForm(theForm) {
  if (theForm.gateway_dep.selectedIndex<1) {
    alert('Please select something');
    theForm.gateway_dep.focus()
    return false; // cancel submit
  }
  return true; // submits the form
}

function refreshDest(theSel) {
  alert(theSel.options[theSel.selectedIndex].value);
}
</script>

<form action="mygroup.aspx" method="post" onSubmit="return submitform(this);">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr><td>
 <select name="gateway_dep" onchange="refreshDest(this)">
   <option></option>
 </select>
</td></tr>
<tr><td>
 <select name="dest_dep" onchange="destchanged(this)">
   <option></option>
 </select>
</td></tr>
<tr><td>
 <input name="Submit" type="submit" value="Search">
</td></tr>
</table>
</form>
0
 
shwaqar82Author Commented:
im using the following function and that works fine for me:

function submitform(theForm) {
  alert(theForm.gateway_dep.options.selectedIndex);
  return true;
}

can you guys help me how to maintain the last selection in drop down on form submit. is that possible..plz help me

regards
shaukat

0
 
dakydCommented:
>> can you guys help me how to maintain the last selection in drop down on form submit

Sorry, not sure I understand what you want to do.  Do you want to have the item that was selected on form submit still be selected after the form submission?  Do you want to pass the selectedIndex from the last drop down to the server-side code?

Or, alternatively, can you explain what you're trying to do and what you need these values for?  That might help us to provide suggestions.
0
 
shwaqar82Author Commented:
>> Do you want to have the item that was selected on form submit still be selected after the form submission?

that what i need to implement


regards
shaukat
0
 
Michel PlungjanIT ExpertCommented:
what is the user seeing when he submits - the result from the server or another page or stays on the same page (form is targetting a new window for example)

If the user sees the result plus a new form, you need to look through the options and add
selected
to the option that has the same value as the reponse.form("gateway_dep")
0
 
shwaqar82Author Commented:
mplungjan
it stays in the same page after submitting the form...i need to have the selected item in the drop down to be selected after the form submission . the page submit to itself

regards
shaukat
0
 
Michel PlungjanIT ExpertCommented:
So it sends the form to the server and the server responds with a result plus itself?

It is quite simple to do on the server...

Just test the value as I mentioned using reponse.form("gateway_dep")
0
 
shwaqar82Author Commented:
yes i can get the value of reponse.form("gateway_dep") ...but how can i make the drop down control to select the value of reponse.form("gateway_dep") using javascript. all drop down control im using get populated dynamically using clien side javascript
0
 
Michel PlungjanIT ExpertCommented:
well THAT was the missing information wasn't it?

either set a cookie or return the selected value in the page

<script>
var selVal = "<%=reponse.form("gateway_dep") %>";
function setSel() {
  if (selVal=="") return; // nothing passed
  var sel = document.forms[0].gateway_dep;
  for (var i=0;i<sel.options.length;i++) {
    if (sel.options[i].value==selval) {
      sel.optins[i].selected=true;
      break
    }
  }
}
window.onload=setSel;

or call setSel after populateion
0
 
Michel PlungjanIT ExpertCommented:
Hmm...
0
 
TNameCommented:
shwaqar82, if it was mplungjan's answer that solved your problem (I suspect it was...), then please assign the points to him.


 
0
 
Michel PlungjanIT ExpertCommented:
In any case a split would be nice
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.