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

Posted 2023-02-24

【中文标题】如何将 jQuery 滑块的值保存到 Person 模型中？

【英文标题】：How to save the value of a jQuery sliderbar into a Person model?

【发布时间】：2015-08-14 07:13:52

【问题描述】：

我正在尝试将添加到我的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    


    
    

【问题讨论】：

您需要将表单传递给模板，并且字段id需要是id="id_slider_value"

使用context.update?

【参考方案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"/>

【讨论】：

我不确定我是否关注你。你能告诉我我的代码如何或在哪里不能正确使用表单吗？我不应该做什么或我应该做什么？这似乎没有回答我问题的任何部分

@Deepend 我使用您的代码为您提供了视图函数的代码（它在if form.is_valid(): 语句中。周围的一切都是您正确处理表单所需要的（您是否遵循我的答案中的链接？有一个很好的表单介绍）。此外，在您的 wizard_form.html 中，您需要将<input type="hidden" name="slider_value" value="0" id="hidden1"/> 替换为 form.as_p ，这将为您提供类似<input type="hidden" name="slider_value" value="" id="id_slider_value"/> 的输出。

@Deepend 如果您想知道自己做错了什么：首先，您尝试直接从 POST slider_value = self.request.POST.get('slider_value') 读取，这很糟糕，因为您已经拥有 SurveyFormIT1 表单能够做到这一点。您还可以在我的回复中看到正确的代码。

你好 akarilimano。我正在使用 SessionWizardView，它已经通过 form 使用了 wizard_form.html 模板来呈现表单并处理表单数据。我应该更清楚地说明这一点。我现在正在查看那个链接，看看我哪里出错了。谢谢

如果有效，您需要发布保存模型表单的代码。看起来它应该可以正常工作。它不会在表单中添加“新”字段，它只会显示“slider_value”的输入。 form.save() 应该是你所需要的。

【参考方案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 字段，因为在您将正确的值传递给它之前它将无效。

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

希望对你有帮助

【参考方案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