javascript – Popup box after user select certain values in a few dropdown menu fields


I have a multi-step signup form with multiple fields. Relevant to this question are fields asking for the user’s country, whether they are employed/earn a steady salary and if they would like to pay for services in installments or upfront.

I would like to show a popup page in cases where the user selects the country as Nigeria, indicates that they are employed and that they would like to pay for services in installments.

So the popup form would occur the moment the person selects yes to wanting to pay in installments after having selected Nigeria as a country and indicating that they are employed.

Here is my html and what I have tried:

    <div class="row">
        {% if form.errors %}
            <div class="alert alert-error">
                <ul>
                    {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--  -->
            <form  id="msform" method="post" action="" > 
                {% csrf_token %}
                <input type="hidden" name="next" value="{{ next }}" class="form-control">
                <ul id="progressbar">
                    <li>More about you</li>
                    <li>Contact Details</li>
                </ul>
                <fieldset>
                    <h2 class="fs-title">More about you</h2>
                    {{form.city}}
                    <br>
                    <select name='country' required class="form-control my-2">
                        <option value="" disabled selected hidden>Country</option>
                        {% for value, name in form.fields.country.choices %}
                            <option value="{{value}}">{{name}}</option>
                        {% endfor %}
                    </select>
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    <input type="button" name="next" class="next action-button" value="Next" />
                </fieldset>
                <fieldset>
                    <h2 class="fs-title">Contact Details</h2>
                    <select name='installments' required class="form-control my-2">
                        <option value="" disabled selected hidden>Would you like to pay the $350 fee upfront or in installments?</option>
                        {% for value, name in form.fields.installments.choices %}
                            <option value="{{value}}">{{name}}</option>
                        {% endfor %}
                    </select>
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    <input type="submit"  class="submit action-button" value="Sign Up" />

                </fieldset>
            </form>
        </div>
    </div>
    {% endblock %}
{% block mainjs %}
{% endblock mainjs %}
{% block extrajs %}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script >

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.
      ;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    previous_fs.show(); 
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return true;
})
</script>
<script>
    $("#installments").bind("change", function() {
        var value = this.value;
        switch (value) {
            case "installments":
            window.open("https://www.google.com/", "Google");
            break;
            }
    });
</script>
{% endblock extrajs %}