Solved

Cancel Confirm Should Return to Original Value of Dropdown Select Option Instead of Keeping the New Selection

Posted on 2007-04-02
12
241 Views
Last Modified: 2008-02-01
Here is a snippet of a function I'm calling from the onChange event to confirm whether a newly-selected option in a dropdown select element should be kept or cancelled:

function VerifyChange {
    if (confirm("Should this really be changed?")) {
              . . . [ do something here, like copying
                     the value to another element . . .]
       }
        return true;
    }
    return false;
}

I'm calling the function from the onChange event of the dropdown select element.  The confirm alert pops up fine when I select a different option from the dropdown, and clicking "OK" keeps the new value, as expected.
     * Problem is: when I click "Cancel", I want it to go back to the prior value; but it is keeping the new value.

     Example:
1. Select box starts out with value "A" showing.
2. User clicks the arrow and clicks the value "B"
3. Confirm alerts, and user Cancels
4. Selected option should go back to "A" (but, unfortunately, "B" remains selected).
    How can the function, or the call of the function, be modified to get the desired result, where canceling at the confirm will return to the value that was showing before the user changed it?
 
0
Comment
Question by:Randall-B
  • 7
  • 5
12 Comments
 
LVL 10

Expert Comment

by:Jaax
ID: 18841384
In your script tag add a variable

<script>
  var prevSelIndex =  -1;
  //Rest of your code
</script>

In the function VerifyChange

function VerifyChange {
       if (confirm("Should this really be changed?")) {
              . . . [ do something here, like copying
                     the value to another element . . .]
       
prevSelIndex = document.forms[0].selectBox.selectedIndex; //The selected index of your select box // identified here as SelectBox;
        return true;
  }
   document.forms[0].selectBox.selectedIndex = prevSelIndex;
    return false;
}


Add one more function
funciton setPrevSelIndex(){
    prevSelIndex = document.forms[0].selectBox.selectedIndex;
}


In your Body tag

<body onload="setPrevSelIndex()">
.......

</body>
0
 

Author Comment

by:Randall-B
ID: 18841399
Jaax,
    Thanks. If the page contains several of these dropdown selects, can that still work? Seems like the body onload would have to record a variables for every one of them somehow?
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18841400
Sorry there were some typos. The entire script repasted:

<script>
      var prevSelIndex =  -1;

      function VerifyChange() {
         if (confirm("Should this really be changed?")) {
            prevSelIndex = document.forms[0].selectBox.selectedIndex;
            //Your Code
            return true;
         }
         document.forms[0].selectBox.selectedIndex = prevSelIndex;
            return false;
      }


      function setPrevSelIndex(){
            prevSelIndex = document.forms[0].selectBox.selectedIndex;
      }
</script>

PS:The select box has been identified as 'selectBox'. Change it to the name of your select box
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18841406
You can avoid the onload - provided, during the page load, it is the first values that is selected. If that is not the case may have to retain it.
0
 

Author Comment

by:Randall-B
ID: 18841428
All of the selectboxes will have various values pre-selected at page load: it could be the 1st value, or 2nd value, etc.  
   Another problem is, the names of all the selectboxes need to be "selectBox[]" because this is handled by php for an update query.
    For example:

name="selectBox[]"  id="combo1"  starts with value 4 pre-selected

"selectBox[]"  id="combo2" starts with value 10 pre-selected

"selectBox[]"  id="combo3" starts with value 2 pre-selected
   etc.

How can the script to modified to account for the fact that there are multiple selectboxes in the form, all having the name "selectBox[]", and they will all start with different selected index values?
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18841465
Use this script instead
<script>
      var prevSelIndex =  new Array(-1, -1); //Add as many elements as the select boxes

      function VerifyChange(index) {
         if (confirm("Should this really be changed?")) {
            prevSelIndex[index] = eval('document.forms[0].selectBox['+index+']').selectedIndex;
            //Your Code
            return true;
         }
         eval('document.forms[0].selectBox['+index+']').selectedIndex = prevSelIndex[index];
            return false;
      }


      function setPrevSelIndex(){
          for(i=0; i < document.forms[0].selectBox.length; i++){
              prevSelIndex[i] = document.forms[0].selectBox[i].selectedIndex;
            }
      }

</script>

Also you should name your select boxes as just <select name="selectBox"> and NOT <select name="selectBox[]">

In your respective selectboxes
<select name="selectBox" onChange="VerifyChange(0)">
...
<select name="selectBox" onChange="VerifyChange(1)">
...
<select name="selectBox" onChange="VerifyChange(2)">
..
and so on and so forth
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:Randall-B
ID: 18841475
Good. I'm going to test this.  I should explain, however, that the brackets [ ] are required on these names because php needs them in order to set up an array of rows to be updated in an update query. I hope it will work in spite of the [ ].
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18841533
I think that won't work. Can you not name the select boxes as selectBox0, selectBox1, selectBox2 ...
if having selectBox as the name for all the select box is not possible ?

0
 

Author Comment

by:Randall-B
ID: 18841550
  I couldn't get it to work either way, even without the [].  But the [ ] are required for this update query to be handled by php.      
     Please take a look at this sample page and note the javascript errors:  http://216.92.61.99/selectoptions.htm

    Also, adding the lines of code to my existing function has apparently caused it to stop working. Maybe I did something wrong, or maybe they are not compatible.  
    The function is supposed to put a value into a textbox, depending on the value selected in the selectbox.  This other sample shows how it was working before (except for the problem that is the subject of this Question):  http://216.92.61.99/selecttest.htm .

 Thanks.
0
 
LVL 10

Accepted Solution

by:
Jaax earned 500 total points
ID: 18841606
>>I couldn't get it to work either way, even without the [].  
In the code that I examined deviates from what I had posted :
1.The parameter 'index' was not passed to the function
2.var prevSelIndex was declared inside the function. It should be outside
3.The name of the select is 'selectBox[]' !

I have modified your code at 'selectoptions.htm'. Here is the revised one. It at least worked at my end with the names as selectBox[] and people[]

<HTML>
<HEAD>
      <TITLE>Select Problems</TITLE>
<script>
var prevSelIndex =  new Array(-1, -1); //Add as many elements as the select boxes
function TranslateValues(index) {
    if (confirm("Should this really be changed?")) {
          prevSelIndex[index] = document.getElementById("combo"+index).selectedIndex;
          ele = document.getElementById("combo"+index).value;
        switch (ele) {
            case "A":
                document.getElementById("input"+index).value = 5;
                break;
            case "B":
                document.getElementById("input"+index).value = 10;
                break;
            case "C":
                document.getElementById("input"+index).value = 15;
                break;
            default:
                  alert('Did not work');
        }
        return true;
    }
      document.getElementById("combo"+index).selectedIndex = prevSelIndex[index];
    return false;
   }

    function setPrevSelIndex(){
       for(i=0; i < prevSelIndex.length; i++){
       prevSelIndex[i] = document.getElementById("combo"+i).selectedIndex;
      }
   }
</script>
</HEAD>
<BODY onload="setPrevSelIndex()" BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">

<FORM>
  <B> One 1</B><BR>
  Select an option and see a value appear in the box.<BR>
<INPUT TYPE="text" name="people[]" id="input0">
<SELECT name="selectBox[]" id="combo0"
onChange="TranslateValues(0)">
      <OPTION VALUE="A">A</option>
      <OPTION selected VALUE="B">B</option>
      <OPTION VALUE="C">C</option>
</SELECT>

<br><br>
  <B>Two 2</B><BR>
  Select an option and see a value appear in the box.<BR>
<INPUT TYPE="text" name="people[]" id="input1">
<SELECT name="selectBox[]" id="combo1"
onChange="TranslateValues(1)">
      <OPTION VALUE="A">A</option>
      <OPTION VALUE="B">B</option>
      <OPTION selected VALUE="C">C</option>
</SELECT>

<br><br>
  <B>Three 3</B><BR>
  Select an option and see a value appear in the box.<BR>
<INPUT TYPE="text" name="people[]" id="input2">
<SELECT name="selectBox[]" id="combo2"
onChange="TranslateValues(2)">
      <OPTION selected VALUE="A">A</option>
      <OPTION VALUE="B">B</option>
      <OPTION VALUE="C">C</option>
</SELECT>

</FORM>

</BODY>
</HTML>
0
 

Author Comment

by:Randall-B
ID: 18842606
Yes, that's it.  Now it works great. I really appreciate it. And for the extra diligence, here are some extra points. Thanks.
0
 
LVL 10

Expert Comment

by:Jaax
ID: 18848323
Your're welcome
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

757 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

19 Experts available now in Live!

Get 1:1 Help Now