Using Javascript to update hidden form fields with an image file name on seperate form pages

Question

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

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?

My Code

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

Answer 1

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

element_id = "id-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).

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);
}

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

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