CODEWITHSUNDEEP
javascripthtml
user3143218
user3143218

Reputation: 1816

Cancel select drop-down choice after window confirm

How can I cancel a select menu choice using a confirm dialog?

The idea is that when a user changes a select menu, they're prompted to confirm their choice. if they choose "cancel", the select menu goes back to its previously selected value. If they choose "OK", the select menu behaves as expected.

Here is the code I'm working on:

HTML:

<select class="selector" name="selector1">
  <option value="yes">Yes</option>
  <option value="no" selected="">No</option>
  <option value="maybe">Maybe</option>   
</select>

<select class="selector" name="selector2" >
  <option value="yes">Yes</option>
  <option value="no" selected="">No</option>
  <option value="maybe">Maybe</option>   
</select>

JavaScript

var selects = document.querySelectorAll('.selector');

var lastSelected = {};

for (i = 0; i < selects.length; i++) {

    var select = selects[i];
    lastSelected[select.name] = select.options[select.selectedIndex];

    select.addEventListener('change', function (e) {

       lastSelected = select.options[select.selectedIndex];

       if (confirm("Are you want to choose this?") == true) {
           return;
       } else {
          select.value = lastSelected[select.name];
       }
    });
}

I'm not entirely sure why this isn't working, any help is much appreciated. Here is the fiddle I'm working on http://jsfiddle.net/je36eu78/2/

n.b I'd like to do this in native JavaScript (no jquery)

Upvotes: 0

Views: 1319

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117354

  1. you overwrite lastSelected here:

    lastSelected = select.options[select.selectedIndex];
  2. you must also store the new value when the user hits OK

Another approach(stores the previous value as a property of the select)

var selects = document.querySelectorAll('.selector');

for (i = 0; i < selects.length; i++) {

    var select = selects[i];
    select.defaultValue=select.value;
select.addEventListener('change', function (e) {        

        if (confirm("Are you want to choose this?") == true) {
            this.defaultValue=this.value;
        } else {
           this.value=this.defaultValue;
        }
    });
}

Upvotes: 2

hex494D49
hex494D49

Reputation: 9245

Try the snippet below

var select = document.querySelectorAll('.selector');
for (i = 0; i < select.length; i++) {    
    select[i]['last'] = select[i].options[select[i].selectedIndex].value;
    (function(i){
        select[i].onchange = function(){
            if(confirm("Sure?")){
                select[i]['last'] = this.value;
            }else{  
                this.value = select[i]['last'];
            }
        };  
    })(i);
}

Working jsBin

Upvotes: 1

Related Questions