使用Javascript在单独的表单页面上使用图像文件名更新隐藏的表单域 [英] Using Javascript to update hidden form fields with an image file name on seperate form pages

问题描述

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

I have a customized Django wizard_form.html which shows the user 3 different images on three different pages of my survey.

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

I am trying to use the below script to update 3 hidden form fields on 3 different pages with the contents of value="{{display_image}}" as a way of storing the filename of the images shown to the user in the Database

这对第一页/图像很好例如

This works fine for the first page/image e.g.

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

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

But I cant seem to get it working on the second or third

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

任何人都可以告诉我我做错了什么？

Can anyone tell me what I am doing wrong?

我的代码

{% 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>

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

Any helps is as always, much appreciated, Thanks.

推荐答案

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

First, you need to assign the value of the input id to a variable, say element_id

element_id = "id-slider_one_image"

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

If you can't name them all the same, just give this the actual element ID (e.g.: id_9-slider_one_image).

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

Then, you need to change the function arguments to also take the element id

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

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

Then, your onload attribute needs to pass the element_id string in addition to the element reference:

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

这篇关于使用Javascript在单独的表单页面上使用图像文件名更新隐藏的表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！