如何将 jQuery 滑块的值保存到 Person 模型中？

Question

我正在尝试将添加到我的SurveyWizardForm 的 jQuery 元素的值保存到我的class Person(models.Model): 以及我的数据库中。

我的表单中的所有其他元素都是以正常方式创建的，方法是在我的 forms.py 中创建必要的字段和小部件，并在我的 models.py 中为每个问题创建数据。结果，它们都自动工作，并保存了正确的数据。

但是我在某些页面上自定义了我的SurveyWizardForm，以允许用户通过 jQuery 滑块提交图像评级。

我的问题是我似乎无法将此值存储在我的 Person 模型中。

问题：如何将滑块的值存储到 Person 模型中的 slider_value 中？

到目前为止，我的所有尝试都只是在模型/数据库中创建了一个新条目，该条目不存储我在 Form/views.py 中的值。我担心我没有正确地将这两部分链接在一起。

非常感谢任何帮助。谢谢

到目前为止我的代码

slider_two.js

这将使用我的 jQuery 滑动条的值更新隐藏的表单字段 hidden1

  if($(this).attr("id") ==  "one")
      $("#hidden1").val((ui.value > 0 ? '+' : '') + ui.value);
  

wizard_form.html

value="0" 在用户移动上面slider_two.js 中创建的滑块时更新（未显示）

<input type="hidden" name="slider_value" value="0" id="hidden1"/>                           
            
<script src="{% static "survey/js/slider_two.js" %}"></script>
             

views.py

我可以使用

将值读入views.py

 slider_value = self.request.POST.get('slider_value')
 if slider_value is not None:                
     instruction_task_values.insert(0, slider_value) 
            
 logger.debug('\n\n\nThis is your instruction_task_values in 1 %s', instruction_task_values)

这是因为每次都会将正确的值打印到我的日志中

models.py

这是为了在数据库中创建字段来存储滑块的值。我创建的所有其他条目都可以正常工作并正确保存。

class Person(models.Model): 
    slider_value = models.IntegerField(null=True, blank=True, max_length=1000)
   

forms.py

这就是我认为我的问题所在。

以下是我尝试“连接”到表单中现有的slider_value 并将其添加到我的 Person 模型中，但它所做的只是在我的表单中创建一个新字段。

class SurveyFormIT1(forms.ModelForm):      
    class Meta:
        model = Person    
        fields = ['slider_value']
        widgets = {'slider_value' : forms.HiddenInput}    


    
    

Answer 1

您应该考虑将您的代码正确地修改为work with forms。

例如，在您的 views.py 中：

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 = SurveyFormIT1(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)
            logger.debug('\n\n\nThis is your instruction_task_values in 1 %s', instruction_task_values)
            # redirect to a new URL:
            return HttpResponseRedirect('/thanks/')

    # if a GET (or any other method) we'll create a blank form
    else:
        form = SurveyFormIT1()

    return render(request, 'wizard_form.html', {'form': form})

在您的 wizard_form.html 中：

{{ form.as_p }}
<script src="{% static "survey/js/slider_two.js" %}"></script>

{{ form.as_p }} 只会给你类似的东西

<input type="hidden" name="slider_value" value="" id="id_slider_value"/>

Answer 2

你应该这样做

if request.method == 'POST':
form = SurveyFormIT1(request.POST)
if form.is_valid():
    survey=form.save(commit=False)
    survey.slider_value=form.cleaned_data['slider_value']
    survey.save()

首先，您应该检查是否在请求中获得了正确的值，一旦获得，您只需像上面的示例一样手动保存它。您还应该从表单中排除 slider_value 字段，因为在您将正确的值传递给它之前它将无效。

我知道还有更优雅的解决方案，但是这个很容易理解。

希望对你有帮助

Answer 3

我最终找到了解决这个问题的方法。

首要问题是我试图将信息添加到我的人模型中，这些信息不是以传统方式从我的forms.py/models.py“生成/起源”的，而是在页面上“生成”的我的 jQuery 脚本。

我知道我必须创建一个模型字段和相应的表单字段来获取该值。最初我认为我应该将此值发送给我的views.py（如上所述）。这是错误的。

当我从 SessionWizardView/form_wizard 检查输出的 html 页面时，我意识到即使我调用了每个表单字段，例如field = ['slider_one_value'] 它被渲染为例如

<input id="id_9-slider_one_value" type="hidden" name="9-slider_one_value" value="-37"></input>

id_9- 被添加到调查的第九页。

因此，如果我修改了我的 jQuery 以更新此字段，同时将主隐藏字段发送到我的视图，该值将自动存储到我的模型中

最好的部分是我可以从同一个脚本中更新尽可能多的这些字段

我希望这对其他人有帮助

我的代码

wizard_form.html

这调用了我的 slider_two.js 脚本

<script src="{% static "survey/js/slider_two.js" %}"></script>

slider_two.js

在用户可以移动的页面上创建一个滑块。然后它更新结果和发送到视图的隐藏字段

它还会更新新创建的隐藏字段，这些隐藏字段在通过 SessionWizardView 渲染后与模型中创建的隐藏字段相对应

$('#submit').click(function() {
    var username = $('#hidden').val();
    if (username == "") username = 0;
    $.post('comment.php', {
        hidden: username
    }, function(return_data) {
        alert(return_data);
    });
});

$(".slider").slider({
    animate: true,
    range: "min",
    value: 0,
    min: -100,
    max: +100,
    step: 1,

    //This updates the slider-result below the slider bar so the participant can see their rating
    slide: function(event, ui) { 
      $("#slider-result").html((ui.value > 0 ? '+' : '') + ui.value);

    //This updates the hidden form field which is read by my views.py
    if($(this).attr("id") ==  "one")
        $("#hidden1").val((ui.value > 0 ? '+' : '') + ui.value);

    //This updates the id_9-slider_one_value form field which matches the name of fields = ['slider_one_value'] after it has been rendered
    if($(this).attr("id") ==  "one")
        $("#id_9-slider_one_value").val(ui.value);  

    //This updates the id_10-slider_two_value form field which matches the name of fields = ['slider_one_value'] after it has been rendered
    if($(this).attr("id") ==  "one")
        $("#id_10-slider_two_value").val(ui.value); 


    ....

    // Update as many hidden forms fields as necessary

    }
});

models.py

在数据库中创建条目以存储值

slider_one_value = models.SmallIntegerField(null=True, max_length=100, blank=True) 
slider_two_value = models.SmallIntegerField(null=True, max_length=100, blank=True) 

forms.py

创建隐藏的表单字段以从 jQuery 脚本中获取值

class SurveyFormF1(forms.ModelForm):      
    class Meta:
        model = Person       
        fields = ['slider_one_value']
        widgets = {'slider_one_value' : forms.HiddenInput}   

class SurveyFormF2(forms.ModelForm):        
    class Meta:
        model = Person        
        fields = ['slider_two_value']
        widgets = {'slider_two_value' : forms.HiddenInput}