asked on

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

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?

Jaax

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>

Randall-B

ASKER

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?

Jaax

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

Jaax

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.

Randall-B

ASKER

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?

Jaax

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

Randall-B

ASKER

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 [ ].

Jaax

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 ?

Randall-B

ASKER

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.

ASKER CERTIFIED SOLUTION

Jaax

membership

This solution is only available to members.

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

Start Free Trial

Randall-B

ASKER

Yes, that's it. Now it works great. I really appreciate it. And for the extra diligence, here are some extra points. Thanks.

Jaax

Your're welcome