change select list after bootstrap modal confirmation

Question

I have a select list.

When the user changes the select list option, I want the bootstrap modal to be displayed and only if the modal's confirm button is checked, change the select list.

I just cannot seem to get the code right and couldn't find a google answer.

Here is my select list code:

<select id="id_language_code" name="language_code" required="">

    <option value="en" selected="selected">English (US)</option>
    <option value="en-ca">English (Canada) - English (Canada)‎</option>
    <option value="en-gb">English (UK) - English (UK)‎</option>
    <option value="es">Spanish (Spain) - español (España)‎</option>
    <option value="es-419">Spanish (Latin America) - español (Latinoamérica)‎</option>
    <option value="fr">French (France) - français (France)‎</option>
    <option value="fr-ca">French (Canada) - français (Canada)‎</option>
    <option value="fr-ch">French (Switzerland) - français (Suisse)‎</option>

</select>

Here is my modal code:

<div id="language_change_modal" class="modal rounded modal-confirm-medium-width fade" style="height: 230px;" role="dialog" aria-labelledby="cancelConfirmLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="glyphicon glyphicon-remove"></icon></button><h4 class="modal-title" id="cancelConfirmLabel">{% trans "Confirm Change Language" %}</h4>
    </div>
    <div class="modal-body-confirm">{% trans "This will reset all your details." %} {% trans "Are you sure you want to change languages?" %}</div>
    <div class="modal-footer">
        <a class="btn rounded btn-default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle icon_padding"></i>{% trans "No" %}</a>
        <span class="spacer"></span>
        <a class="btn rounded btn-primary" id="cancelConfirmOK"><i class="fa fa-check-circle icon_padding"></i>{% trans "Yes" %}</a>
    </div>
</div>

Here is my js/jq trigger code:

$(document).ready(function() {
  ....
  $('#id_language_code').on('change', function() {
    $('#language_change_modal').modal('show');  // user confirm language change.
  });

Answer 1

All you need to do is add a click event listener on the Yes and No buttons inside the modal as well as save the previous select option.

I updated the modal html a bit because the modal was not looking well. Also I added data-dismiss attribute to the Yes button as well.

When the user selects yes, you're all good the select will change and we save this new selection in our variable $preSelection .

When the user selects No, we reset the select back to the previous value. This is generally the way to do it, I haven't seen any other way to specifically prevent the select onchange.

 $(document).ready(function() { let $prevSelection = $("#id_language_code option:selected"); $('#id_language_code').on('change', function() { $('#language_change_modal').modal('show'); // user confirm language change. }); $('#yesButton').on('click', function() { $prevSelection = $("#id_language_code option:selected"); console.log("Yes was clicked. Allowing selection change and saving new selection"); }); $('#cancelButton').on('click', function() { console.log("No was clicked. Resetting select to previous value"); $prevSelection.prop("selected", true); }); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <select id="id_language_code" name="language_code" required=""> <option value="en" selected="selected">English (US)</option> <option value="en-ca">English (Canada) - English (Canada)‎</option> <option value="en-gb">English (UK) - English (UK)‎</option> <option value="es">Spanish (Spain) - español (España)‎</option> <option value="es-419">Spanish (Latin America) - español (Latinoamérica)‎</option> <option value="fr">French (France) - français (France)‎</option> <option value="fr-ca">French (Canada) - français (Canada)‎</option> <option value="fr-ch">French (Switzerland) - français (Suisse)‎</option> </select> <div id="language_change_modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Confirm Change</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>This will reset all your details. Are you sure you want to change languages? </p> </div> <div class="modal-footer"> <a class="btn rounded btn-default" id="cancelButton" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle icon_padding"></i>No</a> <span class="spacer"></span> <a class="btn rounded btn-primary" id="yesButton" data-dismiss="modal"><i class="fa fa-check-circle icon_padding"></i>Yes</a> </div> </div> </div> </div> 

Answer 2

Since you are already referencing Bootstrap, I would highly recommend using Bootbox.confirm . It is easy to use and is much cleaner than having to write out an entire modal box.. plus it comes with the callback (out of box) to help you.

I have created a JSFiddle for you, to show what I mean. I am not changing the select list, but I am showing an alert based off of if the 'Yes' button was clicked (which is what you are looking for according to your comments). You can edit and customize certain things about bootbox to fit your needs.

Here is my example code.

HTML

<select id="My-Select">
  <option value="0">Select Option</option>
  <option value="1">Option One</option>
  <option value="2">Option Two</option>
  <option value="3">Option Three</option>
</select>

jQuery

$("#My-Select").change(function(){

  // use bootbox for easy implementation
  bootbox.confirm({
    message: "Are you sure you want to do this?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-success'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) { // result is 'true' if the 'yes' button is clicked
        if(result)
            alert("Yes, I want to change the select list.");
            // Here is where you would reset the select list
        else
            alert("No, I do not want to change the select list.");
            // Here is where you do not reset the select list
    }
});

});

Let me know if this assists!