用户必须能够提交并保存范围滑块的值
1
. 其目的是让用户猜测现实生活中对象的填充程度,然后在游戏中报告填充百分比。用户界面如下图所示。
目前,我可以从POST表单(slider.html)中以预设的“值”检索数据,但不能检索范围滑块值。我环顾了很多地方,问题是我对Javascript不够熟悉,无法实现解决方案。我认为可以从javascript函数中获取值,并直接发送到POST html表单?有人能帮忙建议一下怎么做,或者其他建议吗?这是迄今为止的代码,由于多次尝试和错误,有点混乱
模型。py公司
from django.db import models
from django.forms import ModelForm
from django import forms
class Measurements(models.Model):
DeviceId = models.IntegerField(blank=True, null=True)
TimeStamp = models.DateTimeField(auto_now=True)
Metadata = models.IntegerField(blank=True, null=True)
Sensor = models.IntegerField(default=False)
Button = models.IntegerField(default=False)
QrUser = models.IntegerField(default=True)
FillingPercentage = models.DecimalField(max_digits=4, decimal_places=2, blank=True, null=True)
slider_value = models.IntegerField(default=False, null=True, blank=True)
def __str__(self):
return str(self.DeviceId)
class Meta:
verbose_name_plural = "Measurements"
形式。py公司
from django.forms import ModelForm
from django import forms
from .models import Measurements
class MeasurementsForm(ModelForm):
class Meta:
model = Measurements
fields = ('FillingPercentage','slider_value')
widgets = {'slider_value' : forms.HiddenInput()}
def clean_FillingPercentage(self):
print("fUNCTION CALLED")
value = self.cleaned_data.get('something_else')
print(value)
class IntegerFieldForm(forms.Form):
field5 = forms.IntegerField(
help_text="Filling percentage", widget=forms.NumberInput(attrs={'type': 'range', 'min': '0', 'max': '100'}))
意见。py公司
from django.shortcuts import render
from django.shortcuts import render_to_response
from django.http import HttpResponseRedirect
from django.views.generic import FormView, TemplateView, CreateView
import floppyforms as forms
from .forms import MeasurementsForm
class QRView(CreateView):
form_class = MeasurementsForm
template_name = 'QrFill/slider.html'
success_url = '/guess/'
def form_valid(self, form):
instance = form.save(commit=False)
# instance.FillingPercentage = self.request
return super(QRView, self).form_valid(form)
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context ['FillingPercentage'] = 'Add Fill Level'
return context
def read_value():
FillingPercentage = self.request.POST.get('FillingPercentage')
if FillingPercentage is not None:
instruction_task_values.insert(0, FillingPercentage)
print('\n\n\nThis is your instruction_task_values in 1 %s', instruction_task_values)
def my_view(request):
# if this is a POST request we need to process the form data
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = MeasurementsForm(request.POST)
# check whether it's valid:
if form.is_valid():
# process the data in form.cleaned_data as required
slider_value = form.cleaned_data['slider_value']
if slider_value is not None:
instruction_task_values.insert(0, slider_value)
# redirect to a new URL:
return HttpResponseRedirect('/thanks/')
# if a GET (or any other method) we'll create a blank form
else:
form = MeasurementsForm()
return render(request, 'QrFill/slider.html', {'form': form})
滑块。html
{% load staticfiles %}
{% load bootstrap4 %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>rangeslider.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/rangeslider.css' %}"/>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
color: #404040;
font-family: Helvetica, arial, sans-serif;
}
body {
padding: 50px 20px;
margin: 0 auto;
max-width: 800px;
}
output {
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
margin: 30px 0;
width: 100%;
}
.u-left {
float: left;
}
.u-cf:before,
.u-cf:after {
content: "";
display: table;
}
.u-cf:after {
clear: both;
}
.u-text-left {
text-align: left;
}
</style>
</head>
<body>
<div>
<div>
<form method='POST' class='form'>
{% csrf_token %}
<input type="hidden" name="slider_value" id="myVar" value="50" id="hidden1"/>
<input type="range" min="0" max="100" step="0.01" value="50" data-rangeslider>
<output id='output'> </output>
<button type="submit" name="_submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
<script src="//localhost:8080"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="{% static 'js/rangeslider.js' %}"></script>
<script >
var myVar = document.getElementById("myVar").value;
$(function() {
var $document = $(document);
var selector = '[data-rangeslider]';
var $element = $(selector);
var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
function valueOutput(element) {
var value = element.value + "%";
var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
output[textContent] = value;
}
$document.on('input', 'input[type="range"], ' + selector, function(e) {
valueOutput(e.target);
});
$element.rangeslider({
polyfill: false,
onInit: function() {
valueOutput(this.$element[0]);
},
onSlide: function(position, value) {
},
onSlideEnd: function(position, value) {
$("#amount").text(value);
console.log("Value: " + value.toString())
FillingPercentage = value.toString()
}
});
});
</script>
</body>
</html>
