asked on

Javascript popup for Select options

I have a webpage with about 20 different select boxes with different values selected in them. They are setup by a servlet. The user can change the selected value for any of the select objects and then hit an update button. At this point, the servlet updates itself and uses the newly selected options to display. What i want to do is somehow make a confirmation popup when the submit button is hit, that goes through all of these select objects, figures out which ones have changed from their original selection, and then asks the user to confirm the change for each of these with a yes/no popup possibly. If the yes is selected, then it would continue as normal, if not return false. Any suggestions how to do this. I know how to make the yes/cancel popup, but the tricky part is knowing which SELECT's have changed to request a confirmation on.

justinbillig

oh do this

<script language="javascript">

var g_astrSelectBoxNames= new Array;

function StoreNames( strSelectBoxName )
{
      var strStoredSelectBoxName = "";
      var blnExists = false; // Assume No
      var intIndex = 0;

      // Go through the array, and see if we already have this one
      for( intIndex = 0; intIndex < g_astrSelectBoxNames.length; intIndex++ )
      {
            // is this the same name?
            if( g_astrSelectBoxNames[ intIndex ] == strSelectBoxName )
            {
                  // Yes, dont re add this one
                  blnExists = true;
                  break;
            }
      }

      // Add this to the array if needed
      if( blnExists == false )
      {
            g_astrSelectBoxNames[ g_astrSelectBoxNames.length ] = strSelectBoxName;
      }
}

</script>

then in each of the select boxes put this in the on change

onchange="StoreNames( this.name );"

then everytime any select box is change it will store it's name in that global array, which you can then check when you need to

Hokester

ASKER

This looks like a good start, however the same value can definitely be selected(and often is) in more than one select. Each row in my table has a person. And next to that person is the state or current mode of that person. So i just want to confirm when that mode changes for each person to make sure you selected the right person, but it is possible for more than one person to be in a mode.

justinbillig

What that function does is takes the name of the select box you changed and stores it in an array if that name already exists, that means we've already stored the fact that this select box has changed once. Meaning that if you change the same select box more than once it wont have more than one flag sayin it's been changed

justinbillig

that function of course will only work if each select box is uniquely named ... it has nothing to do with the value in the select box or the value selected by the select box

Zvonko

Here my proposal:

<html>
<head>
<script>
function confirmChange(theForm){
elem = theForm.elements;
msg = "";
for(var i=0;i<elem.length;i++){
if(elem[i].type.substr(0,6)=="select"){
opt = elem[i].options;
selChange = false;
for(var j=0;j<opt.length;j++){
if(opt[j].defaultSelected!=opt[j].selected) selChange=true;
}
if(selChange==true){
msg += "\n\t"+elem[i].name;
}
}
}
if(msg>""){
return confirm("Confirm to change following selections:"+msg);
}
return true;
}
</script>
</head>
<body>
<form onSubmit="return confirmChange(this)">
<select name="selOne">
<option>-Select-
<option value="A">A
<option value="B">B
<option value="C" selected>C
</select>
<select name="selTwo">
<option>-Select-
<option value="A">A
<option value="B">B
<option value="C" selected>C
</select>
<select name="selThree">
<option>-Select-
<option value="A">A
<option value="B" selected>B
<option value="C">C
</select>
<input type=submit>
</form>
</body>
</html>

justinbillig

well i didnt know about the defaultSelected property ...

Zvonko

:-)

Hokester

ASKER

I just looked in my code to see about the select name. Unfortunately it looks like all the selects have the same name. The selected option value stores the id of the person and the given mode ID. What it allows me to do is to have a unlimited number of selects and know that i can get to all of them by the same name and just be able to parse out the changes by the values stored in the selected option's values. This is kind of confusing so ill show an example.

<td>
<SELECT class=dd NAME="contract_updates">
<OPTION VALUE="4@356@2320@2320@3"><font color="green">Waived R</font>
<OPTION VALUE="4@356@2320@2320@1" SELECTED>Active R
<OPTION VALUE="4@356@2320@2320@5"><font color="green">I.R. R</font>
</td>

So after the submit is done, i can parse these option values to pull the persons id, which is 4 in this case, and their mode which is the 3,1, or 5 at the end of the option value. it looks kind of ugly, but has worked for me ok. Is it possible to modify this example you gave to allow me not to have to change the names of the select to unique names? If not i can i could make a hidden input that stored the number of selects, and then just know that i have a select1, select2, select3 etc up to that input variable, and then your posted code looks like it would work.

Zvonko

My example is extended to handle MULTIPLE selections in one select object.
Do you have multiple attribute in one of the select elements?

Hokester

ASKER

only one selection can be made per select. However each select has the same name. ill post a couple to show the example

<tr class=grey>
<td><a href="http://sports.espn.go.com/nfl/players/profile?statsId=5036&year=2004">Thomas Jones</a></td>
<td>RB</td>
<td>
<SELECT class=dd NAME="contract_updates">
<OPTION VALUE="4@356@2320@2320@3"><font color="green">Waived R</font>
<OPTION VALUE="4@356@2320@2320@1" SELECTED>Active R
<OPTION VALUE="4@356@2320@2320@5"><font color="green">I.R. R</font>
</td>
</tr>
<tr class=grey>
<td><a href="http://sports.espn.go.com/nfl/players/profile?statsId=3946&year=2004">Freddie Jones</a></td> <td>TE</td>
<td>
<SELECT class=dd NAME="contract_updates">
<OPTION VALUE="4@184@2148@2148@3"><font color="green">Waived R</font>
<OPTION VALUE="4@184@2148@2148@1" SELECTED>Active R
<OPTION VALUE="4@184@2148@2148@5"><font color="green">I.R. R</font>
</td>
</tr>

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Hokester

ASKER

thanks! that worked perfectly!

Zvonko

Fine :-)