У меня есть многоэтапная форма регистрации с несколькими полями. К этому вопросу относятся поля, в которых нужно указать страну пользователя, работают ли они / получают стабильную зарплату и хотят ли они оплачивать услуги в рассрочку или авансом.
Я хотел бы показать всплывающую страницу в случаи, когда пользователь выбирает страну как Нигерия, указывает на то, что они работают и хотят оплачивать услуги в рассрочку.
Таким образом, всплывающая форма появится в тот момент, когда человек выберет «да» или «желает заплатить» в рассрочку после выбора Нигерии в качестве страны и указания, что они работают.
Вот мой html и то, что я пробовал:
<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 %}
Чтобы уточнить, это код, который я пытаюсь использовать, чтобы открыть всплывающее окно:
<script>
$("#installments").bind("change", function() {
var value = this.value;
switch (value) {
case "installments":
window.open("https://www.google.com/", "Google");
break;
}
});
</script>
Это параметры выбора в forms.py:
employed_choices = (
('yes', 'Yes'),
('no', 'No'),
)
installment_choices = (
('upfront', 'Upfront'),
('installments', 'Installments'),
)
country_choices = (
('kenya', 'Kenya'),
('nigeria', 'Nigeria'),
('south africa', 'South Africa'),
)
Просто чтобы еще раз прояснить вопрос. Я хотел бы открыть всплывающее окно, если выбор пользователя соответствует этим условиям: i.) Пользователь выбрал Нигерию в качестве страны выбора ii.) Пользователь выбрал да, если он работает или нет, и iii.) Если пользователь наконец выбирает рассрочку для выбора рассрочки