在提交时，我很难在Django表单中提取jQuery滑块值。我可以在访问或刷新页面时通过外部和内部urls.py和views.py从URL传递值。但是我无法在提交时在表单中包含滑块值。毋庸置疑，我已经尝试了很多方法来提取价值，包括jQuery post方法和AJAX，但我没有尝试过。
首先，我创建了一个简单的表单（forms.Form），然后尝试使用模型表单，期望更多控件，但返回到forms.Form。我的form.py是：
class ChoiceForm(forms.Form):
'''Checkboxes.'''
GeoJunk = forms.BooleanField(required=False, initial=True)
...
'''Field for jQuery slider widget value. I initially don’t care if it is hidden, especially during troubleshooting.'''
slider_field = forms.CharField(max_length=4, required=False)
我的views.py很复杂，但其实质是：
def profile_list(request, sort_arg='default', latlonzoom='39.991622,-105.250098,15', choice='7', rangefactor='0'):
request_user = request.user
''' Initialize slider value. '''
slider_value = 0
if request.method == 'POST':
choice_form = ChoiceForm(request.POST, prefix="choice")
if choice_form.is_valid():
bit1 = choice_form.cleaned_data['GeoJunk']
...
'''The slider value submitted from form.'''
slider_state = choice_form.cleaned_data['slider_value']
else:
choice_form = ChoiceForm()
…
return render(request, "junkster/pages/home.html", add_csrf(request, MEDIA_URL=MEDIA_URL, STATIC_URL=STATIC_URL, request_user=request_user, waypoints=waypoints, librarypoints=librarypoints, gs_waypoints=gs_waypoints, search_flag=search_flag, lat=lat, lon=lon, zoom=zoom, waypoints_count=waypoints_count, librarypoints_count=librarypoints_count, gs_waypoints_count=gs_waypoints_count, choice_form=choice_form, sort_arg=sort_arg, latlonzoom=latlonzoom, choice=choice, rangefactor=rangefactor, slider_state=slider_state
))
模板很复杂，但实际上从choice.html开始，最终扩展到base-geomap.html：
base-geomap.html：
<!doctype html>
<html lang="{{ LANGUAGE_CODE }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
{% load pages_tags mezzanine_tags i18n staticfiles %}
<head>
…
<link rel="stylesheet" href="{% static "junkster/css/jquery-ui.css" %}">
<link rel="stylesheet" href="{% static "junkster/css/jquery-ui.min.css" %}">
<link rel="stylesheet" href="{% static "junkster/css/jquery-ui.theme.css" %}">
<link rel="stylesheet" href="{% static "junkster/css/jquery-ui.theme.min.css" %}">
<link rel="stylesheet" href="{% static "junkster/css/jquery-ui.slider.css" %}">
<link rel="stylesheet" href="{% static "junkster/css/jquery-ui-timepicker- addon.css" %}">
<link rel="stylesheet" href="{% static "junkster/css/jquery.simple-dtpicker.css" %}">
{% endcompress %}
{% compress js %}
<script src="{% static 'mezzanine/js/jquery-1.7.2.min.js' %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/bootstrap-extras.js" %}"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="{% static "junkster/js/jquery-ui.js" %}"></script>
<script type="text/javascript" src="{% static "junkster/js/jquery-min.js" %}"></script>
<script type="text/javascript" src="{% static "junkster/js/jquery-ui-min.js" %}"></script>
<script type="text/javascript" src="{% static "junkster/js/jquery-ui-sliderAccess.js" %}"></script>
<script type="text/javascript" src="{% static "junkster/js/jquery-ui-timepicker-addon.js" %}"></script>
{% endcompress %}
…
<script>
//Follows: var URL = "{% url 'junkster:profile_list' default' latlonzoom choice rangefactor %}";
var URL = "{% url 'junkster:profile_list' 'default' '39.99, -105.25,15' '7' '2' %}";
</script>
<script>
$( function() {
//Array of slider values.
var valMap = ['1mi', '4mi', 'All'];
$( "#slider_vertical" ).slider({
orientation: "vertical",
range: false,
max: valMap.length - 1,
//Set initial value to the URL rangefactor.
// This will be a value of [0, 1, 2].
value: {{rangefactor}},
//"slide" or "change" work equally well.
slide: function(event, ui) {
//Index values of [0, 1, 2].
$("#val").text(ui.value);
//Mapped values of ['1mi', '4mi', 'All'].
$("#nlVal").text(valMap[ui.value]);
//Shows mapped value of slider on top, e.g., "1mi,"
// rather than rangefactor value "0."
$( "#amount" ).val( valMap[ui.value] );
/Affects the HTML template "slider_value" input field.
$('#id_slider_field').val(valMap[ui.value]);
//Does not work.
//$('#id_slider_field').attr('value', ui.value);
}
});
//Shows the mapped value of slider on top upon startup.
$( "#amount" ).val( valMap[$( "#slider_vertical" ).slider( "value" )] );
});
</script>
</head>
…
choiceform.html：
{% extends "junkster/pages/geolist.html" %}
{% block choiceform %}
<form action="" method="post">
{% csrf_token %}
<!--Keep checkboxes in list.-->
{{ choice_form.as_ul }}
<input type="submit" name="choicevalue" value="Submit" />
<br><br>
<!-- -----JQuery Slider.---- -->
<b>Range of View:</b>
<!--Mapped value display on top of slider.-->
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold; margin-left:3em;">
<!--Slider widget.-->
<div id="slider_vertical" style="height:12em; margin-left:3em;"></div>
<br>
<!--For diagnostics.-->
<!--”rangefactor” should assume the slider value.-->
rangefactor = {{ rangefactor }}<br><br>
<!--”slider_valuer” is the slider value from view.-->
slider_value = {{ slider_value }}<br>
<!--This html field does show the value of the slider.-->
<input type="text" id="id_slider_field", name="slider_field">
</form>
{% endblock %}
choiceform.html的最后一部分有一个输入文本字段，它确实显示了滑块的更改值，但我无法使用Django表单字段提交，除非我出错。
我希望jQuery函数可以在最终模板中实现某些功能，例如：
rangefactor = slider_value
a href="{% url 'junkster:profile_list' 'default' latlonzoom choice rangefactor %}">Wish this would happen!</a>
我感谢任何有建议的人，因为我尝试过提取滑块值以及Django表单的其他复选框值，但未成功。
Walter Goedecke
答案 0 :(得分：0)
我确实找到了解决方案。必须使用表单html模板创建另一个隐藏文本字段;不是Django表单字段。
再次，父模板中的滑块jQuery小部件：
<script>
$( function() {
//Array of slider values.
var valMap = ['1mi', '4mi', '16mi', 'All'];
$( "#slider_vertical" ).slider({
orientation: "vertical",
range: false,
max: valMap.length - 1,
//Set initial value to the URL rangefactor.
// This will be a value of [0, 1, 2, 3].
value: {{rangefactor}},
//"slide" or "change" work equally well.
slide: function(event, ui) {
//Index values of [0, 1, 2, 3].
$("#val").text(ui.value);
//Mapped values of ['1mi', '4mi', '16mi', 'All'].
$("#nlVal").text(valMap[ui.value]);
//Shows mapped values of slider on top.
$( "#amount" ).val( valMap[ui.value] );
$('#slider_field').val(ui.value);
}
});
//Shows the mapped values on top upon startup.
$( "#amount" ).val( valMap[$( "#slider_vertical" ).slider( "value" )] );
});
</script>
子模板 - choiceform.html：
<form action="" method="post">
{% csrf_token %}
{{ choice_form.as_ul }}
<!--This hidden html field captures the value of the slider.-->
<input type="hidden" id="slider_field", name="slider_field">
<!-- -----JQuery Slider.---- -->
<div class=title7>Range of View:</div>
<!--Mapped value display on top of slider.-->
<input type="text" id="amount" readonly style=...">
<!--Slider widget.-->
<div id="slider_vertical" style=..."></div>
<input type="submit" name="choicevalue" value="Submit" action="{% url 'junkster:profile_list' sort_arg latlonzoom choice rangefactor %}" />
特别提交＆＃34;提交＆＃34;按钮使用适当的参数将焦点发送回视图。
在视图中，选择获取滑块值的choiceform.html字段如下：
...
if request.method == 'POST':
choice_form = ChoiceForm(request.POST, prefix="choice")
#Check if form is valid:
if choice_form.is_valid():
#Get the slider value from the special form text field.
try:
slider_value = request.POST['slider_field']
if str(slider_value) != '':
rangefactor = slider_value
if rangefactor == 'NaN' or numpy.isnan(int(rangefactor)):
rangefactor = '0'
except:
rangefactor = '0'
＆＃34; rangefactor＆＃34;只复制滑块值，＆＃34; slider_value，＆＃34;当它被更改时，错误捕获例程，因为NaN值在程序结束时再次调用该视图的choiceform.html中的URL调用时崩溃。