CODEWITHSUNDEEP
javascripthtml
Jack
Jack

Reputation: 863

How to reset select option after confirmation popup box

I have a simple selection dropdown that looks like this:

Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>   
<option value="0">OFF</option>
</select>

and a javascript that will pop up a confirmation box only if the user chooses OFF.

<script> 
    function myfunction(){
        if (this.value === '0'){
            confirm("Are you sure you want to turn off?");
        }
     }
     document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>

Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.

Upvotes: 0

Views: 532

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22422

this way

ps: remove
--> onchange ="myfunction(this.form)"
because you are already using :
document.getElementById('criteriaon').addEventListener('change', myfunction);

document.getElementById('criteriaon').addEventListener('change', myfunction);


function myfunction() {
  if (this.value === '0') {
    if (!confirm("Are you sure you want to turn off?") ) {
      this.value = '1'
    }
  }
}
Criteria: 
<select name="criteriaon" id="criteriaon" >
  <option value="1">ON</option>   
  <option value="0">OFF</option>
</select>

Upvotes: 2

Yadab
Yadab

Reputation: 1883

You can simply set the value of select to 1 by doing this.

 this.value = '1';


    function myfunction(){
        if (this.value === '0'){
            const result = confirm("Are you sure you want to turn off?");
            if (!result) {
              this.value = '1';
            }
        }
     }
     document.getElementById('criteriaon').addEventListener('change', myfunction);
Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)">
<option value="1">ON</option>   
<option value="0">OFF</option>
</select>

Upvotes: 2

Related Questions