Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript popup for Select options

Posted on 2004-10-04
13
Medium Priority
?
1,852 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

688 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