Link to home
Create AccountLog in
Avatar of shwaqar82
shwaqar82

asked on

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

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.
ASKER CERTIFIED SOLUTION
Avatar of TName
TName

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer

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 ;)

Avatar of Michel Plungjan
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>
Avatar of shwaqar82

ASKER

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

>> 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.
>> 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
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")
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
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")
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
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
shwaqar82, if it was mplungjan's answer that solved your problem (I suspect it was...), then please assign the points to him.


 
In any case a split would be nice