Solved

Javascript popup for Select options

Posted on 2004-10-04
13
1,818 Views
Last Modified: 2012-05-05
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.
0
Comment
Question by:Hokester
  • 5
  • 4
  • 4
13 Comments
 
LVL 15

Expert Comment

by:justinbillig
ID: 12217639
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
0
 

Author Comment

by:Hokester
ID: 12217740
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.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12217755
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
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12217758
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
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12217802
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>


0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12217835
well i didnt know about the defaultSelected property ...
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12217869
:-)
0
 

Author Comment

by:Hokester
ID: 12217924
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.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12217988
My example is extended to handle MULTIPLE selections in one select object.
Do you have multiple attribute in one of the select elements?
0
 

Author Comment

by:Hokester
ID: 12218105
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>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 250 total points
ID: 12218425
Does this help better:

<html>
<head>
<script>
function confirmChange(theForm){
  sel = theForm.contract_updates;
  msg = "";
  for(var i=0;i<sel.length;i++){
    opt = sel[i].options;
    newSel = oldSel = "";
    for(var j=0;j<opt.length;j++){
      if(opt[j].defaultSelected!=opt[j].selected){
        if(opt[j].selected==true){
          newSel = opt[j].text;
        } else {
          oldSel = opt[j].text;
        }
      }
    }
    if(newSel>""){
      tr = sel[i].parentNode;
      while(tr.nodeName!="TR"){
        tr = tr.parentNode;
      }
      cells = tr.cells;
      msg += "\n  Name: "+cells[0].childNodes[0].innerHTML+
            ";  old: "+oldSel+"; new:  "+newSel;
    }
  }
  if(msg>""){
    return confirm("Confirm following changes:"+msg);
  }
  return true;
}
</script>
</head>
<body>
<form onSubmit="return confirmChange(this)">
<table>
    <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>
</table>
<input type=submit>
</form>
</body>
</html>


0
 

Author Comment

by:Hokester
ID: 12232981
thanks! that worked perfectly!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12232986
Fine :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now