JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<form id="language_form">
            <select name="language" id="language">
                <option value="en" selected="selected">English</option>
                <option value="sp">Spanish</option>
                <option value="hi">Hindi</option>
            </select>
            <input type="submit" value="Submit">
        </form>

        <div class="modal fade" id="language-confirmation">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                <p>Do you really want to change the website language?</p>
              </div>
              <div class="modal-footer">
                <button type="button"  data-dismiss="modal" class="btn btn-default" id="accept-language-change">Yes</button>
                <button type="button"  data-dismiss="modal" class="btn btn-primary" id="reject-language-change">No</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

JavaScript

var current_language = 'en'; // {{ user.get_profile.language_preference }}

            var languageChangeAccepted = false;

            $('#language_form').on('submit', function(e) {
                var selected_lang = $('#language option:selected').val();

                if(current_language != selected_lang && !languageChangeAccepted){
                    e.preventDefault();
                    // ask for confirmation
                    $('#language-confirmation').modal({'show': true});
                }
            });

            $('#language').change(function(){
                languageChangeAccepted = false;
            })

            $('#accept-language-change').click(function(){
                languageChangeAccepted = true;
                $('#language_form').submit();
            });

            $('#reject-language-change').click(function(){
                languageChangeAccepted = false;
            });