将 JS 中的变量插入 Django 表单输入字段答案

【问题标题】：Insert a variable from JS to Django form input field将 JS 中的变量插入 Django 表单输入字段
【发布时间】：2012-07-19 04:14:00
【问题描述】：

我正在编写一个表格，用于支付员工在两个城市之间的里程数。我正在使用 Google Maps API 来获取信息。我正在运行一个产生变量drivingDistanceMiles 的脚本。我想在我的 Django 表单 mileage 中填充该字段，该字段保存到 python 变量 distance。

这是我的表单 html 的 sn-p：

<form action="" method="post"><% csrf_token %}
{{  form.non_field_errors  }}
<div class="fieldWrapper">
    {{  form.distance.errors  }}
    <label for="id_distance">Mileage claim:</label>
    {{  form.distance  }}
</div>

在入口上方的页面上有一个距离计算器。

在我的 forms.py distance = forms.CharField(max_length=20, required = False) 中。我将其设为 CharField 而不是 IntField，以防我的员工（不是最精通计算机的一群）在末尾添加“英里”一词。

问题：当用户在距离计算器中输入他们的城市信息时，是否可以让drivingDistanceMiles 的值自动填充？

【问题讨论】：

这是我要调整的标签的 HTML：<div class="fieldWrapper"> <label for="id_distance">Mileage claim:</label> <input id="id_distance" type="text" name="distance" maxlength="20" /> </div>

标签： javascript python html django

【解决方案1】：

如果您使用纯 javascript（不是 jQuery 或任何框架），您可以通过 document.getElementById('id_distance').value 访问该字段。你可以通过document.getElementById('id_distance').value = <some_var>;设置它的值

【讨论】：

在我的 javascript 末尾添加了document.getElementId('id_distance').value = drivingDistanceMiles，它只是重新加载了表单。我正在使用 Django 框架/模板语言来生成 HTML。我已经在同一页面上设置了距离计算器，但是在它自己的表单标签中，以防止 Django 表单在单击计算按钮时尝试发布。因此，输出字段 (id_distance) 与距离计算器的格式不同。这有关系吗？
你如何计算drivingDistanceMiles？您可以在计算函数的末尾添加这一行，并且每当更新drivingDistanceMiles 时，它应该更新id_distance 字段。添加更多 HTML 有助于回答问题。你能发布整个表格（包括输入城市的部分）吗？
pastebin.com/KtHYEYLD 用于原始源（在模板标签通过 Django 呈现之前）
pastebin.com/YxcJrKF6 用于呈现的 HTML。为了减小帖子的大小，我删除了一些其他表单域和头部。如果您需要任何这些数据，请告诉我。
在第一条评论的末尾getElementId 拼写错误，它是getElementById。您需要做的就是在showLocation 函数的末尾document.getElementById('id_distance').value = drivingDistanceMiles。如果您仍然遇到问题，您可以使用jsFiddle 并复制生成的 html 和 javascript，我可以查看一下。