Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Javascript popup for Select options

Posted on 2004-10-04
13
Medium Priority
?
1,855 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
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 1000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…
Suggested Courses

963 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