如何在 HTML 中填充 Django 表单字段？

Posted 2023-02-24

【中文标题】如何在 HTML 中填充 Django 表单字段？

【英文标题】：How to Populate Django Form fields in HTML?

【发布时间】：2012-08-11 17:53:44

【问题描述】：

我有一个model.py:

class usercommand(models.Model):
user = models.ForeignKey(User, blank=False)
a_field = models.PositiveIntegerField(null=True, blank=True)
timestamp = models.DateTimeField(blank=True, null=True)

与我使用 user 输入隐藏字段创建 Django 模型表单相关。 forms.py:

class ApplicationForm(forms.ModelForm):
class Meta:
    model = userCommand
    widgets = 
        'user': forms.HiddenInput()
    

如您所见，有三个字段可用于输入。但是我在views.py中填写了用户字段：

def views_method(request, object_id):
if request.method == 'POST':
    form = ApplicationForm(request.POST)
    if form.is_valid():
        form_inst = form.save(commit=False)
        form_inst.user = request.user
        form_inst.save();
        return HttpResponseRedirect(reverse('user_list'))
else:
    form = ApplicationForm()

extra_context = 
    'form':ApplicaitonForm(initial='user': request.user.pk)
   
return direct_to_template(request, 'template/remote.html',
                          extra_context=extra_context)

现在我用在我的remote.html:

<form action="" method="POST">
 form.as_p 
<input type="submit" value="% trans "Add " %" /> 
</form>

我需要使用以下用 Jquery 编写的选择器从模板级别填充时间戳字段：

<input class="time" type="text" name="start" id="start" />
$('input.time').timepicker();

但我无法理解，我该怎么做？因为我使用的是form.as_p。我将如何使用此 Jquery 代码填充 froms timestamp 字段。

如果我没记错的话，我们可以通过以下代码做到这一点：

$('#id_timestamp').val($('#time').val())

其中id_timestamp 是ApplicationForm 中timestamp 字段的ID。但是我应该如何编写代码，这样我也可以在template级别填写ApplicationForm中的其余字段。

【问题讨论】：

如果我理解正确，您只需要在实际时间字段上启动时间选择器：$('#id_timestamp').timepicker()

@TimmyO'Mahony，是的，我们可以通过 $('#id_timestamp').timepicker() 来完成。这里#id_timestamp 是ApplicationForm 类中timestamp 字段的id。我的 Django 表单使用起来不热？

为什么要在单独的字段上运行时间选择器然后复制结果？为什么不直接在表单的时间字段上运行时间选择器？您遇到的问题是您不知道如何将小部件返回的时间转换为与DateTimeField 兼容的格式？否则，我认为我不了解问题

是的，我不知道如何直接在ApplicationForm中的时间字段上运行时间选择器。你能帮帮我吗:)

【参考方案1】：

<form action="" method="POST">
 form.as_p 
<input type="submit" value="% trans "Add " %" /> 
</form>
<script>
$(document).ready(function()
    $('#id_timestamp').timepicker();
);
</script>

【讨论】：

感谢您的回复，如果我没记错的话，我还应该添加 Jquery 库路径吗？

是的，如果你想使用他们的日期/时间选择器，你也需要 jquery 库和 jquery UI：jqueryui.com/demos/datepicker

这是一个替代的日期/时间选择器库：trentrichardson.com/examples/timepicker

【参考方案2】：

您可以将SplitDateTimeWidget 用于时间戳字段。然后在模板上，您可以通过$('#id_timestamp_0').timepicker(); 或类似的方式访问时间输入