Question

我有一个自定义的Django wizard_form.html，它在我的调查的三个不同页面上向用户显示3个不同的图像。

我正在尝试使用以下脚本更新3个不同页面上的3个隐藏表单字段，其中包含value="{{display_image}}"的内容，作为在数据库中存储向用户显示的图像文件名的方式

这适用于第一页/图像，例如

<input id="id_9-slider_one_image" name="9-slider_one_image" type="hidden" value="P1D1.jpg"/>

但我似乎无法让它在第二或第三个工作

<input id="id_10-slider_two_image" name="10-slider_two_image" type="hidden" />

谁能告诉我我做错了什么？

我的代码

{% if wizard.steps.current in steps %}      

<div class="image_rating">      
    <img src="{% static "survey/images/pathone/" %}{{display_image}}" 
         value="{{display_image}}" onload="updateInput1(this); updateInput2(this); updateInput3(this);"/>                                                                                   
</div>  



<script type="text/javascript">
function updateInput1(ish) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById("id_9-slider_one_image").setAttribute(
    "value", valueAttribute);
}

function updateInput2(ish) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById("id_10-slider_two_image").setAttribute(
    "value", valueAttribute);
}

function updateInput3(ish) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById("id_11-slider_three_image").setAttribute(
    "value", valueAttribute);
}

</script>

任何帮助都是一如既往，非常感谢，谢谢。

Answer 1

首先，您需要将输入id的值分配给变量，例如element_id

element_id = "id-slider_one_image"

如果你不能将它们全部命名，只需给它实际的元素ID（例如：id_9-slider_one_image）。

然后，您需要更改函数参数以使用元素id

function updateInput(ish, elementId) {
    var valueAttribute = ish.getAttribute("value");
    document.getElementById(elementId).setAttribute(
"value", valueAttribute);
}

然后，除了元素引用之外，您的onload属性还需要传递element_id字符串：

onload="updateInput(this, '{{element_id}}');"

Answer 2

只需创建一个使用try catch

调用所有3个更新函数的函数

function Update(sender){
try{
updateInput1(sender); }
catch(e){
try{
updateInput2(sender); }
catch(e){
updateInput3(sender);}}
}

并使用onload='Update(this)'

使用Javascript在单独的表单页面上使用图像文件名更新隐藏的表单字段

2 个答案: