我有一个包含多个字段的多步骤注册表单。与此问题相关的字段询问用户所在的国家/地区，他们是否受雇/赚取稳定的薪水，以及他们是否愿意分期付款或预付服务费用。
我想显示一个弹出页面，以防用户选择国家/地区为尼日利亚，表明他们已受雇并且他们想分期付款。
因此，弹出表单将在选择尼日利亚作为国家并表明他们受雇后选择"是"以想要分期付款的那一刻发生。
这是我的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.( 用户已选择"是"，无论他们是否受雇 和三.(如果用户最终选择分期付款作为分期付款选项
在您的HTML中，缺少用户可以在"是"和"否"之间进行选择的部分。假设有 2 个名为"雇用"的单选按钮，则以下工作(只需将代码中的"已雇用"更改为您正在使用的任何名称(：
$(document).ready(function() {
$("input[name='employed'], select[name='country'], select[name='installments']").on("change", function() {
let employed = $("input[name='employed']").val();
let country = $("select[name='country']").val();
let installment = $("select[name='installments']").val();
if (employed == "yes" && country == "nigeria" && installment == "installments") {
window.open("https://www.google.com/", "Google");
}
});
});