7

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.

sfletche
  • 47,248
  • 30
  • 103
  • 119
Deepend
  • 4,057
  • 17
  • 60
  • 101
  • 2
    Is your `onload="updateInput1(this); updateInput2(this); updateInput3(this);"` shorthand for 'call one of these functions' or are you calling all three functions regardless of the page you're on? Because if you're always calling all three, then on pages 10 and 11, the first function would throw an error when you call `document.getElementById(...).setAttribute`, which may be blocking the rest of your script from executing – charmeleon Jun 27 '15 at 17:53
  • I am calling all 3 functions regardless of the page I am on, and you are correct, that is causing an error when said function is not available. Is there a way to adapt the function that if the Hidden Field e.g. `id_9-slider_one_image` does not exist that it will still work and just move onto the next one? – Deepend Jun 27 '15 at 18:16
  • Yes. Make it `function updateInput(ish, elementId) { ... }`, and then your onclick becomes: `onclick="updateInput(this, {{input_id}})"` – charmeleon Jun 27 '15 at 18:22
  • Im not sure I am implementing it correctly, (as its not working ;-( ) can you add all the code as an answer please? I will then be able to accept it if it works as well – Deepend Jun 27 '15 at 18:40
  • Your js code looks to be correct. As you hard-code the id names, I'm afraid you just mistyped some element id name in your functions. – igolkotek Jun 28 '15 at 09:58
  • @aiho Not correct. The code works for the first element id with the current spelling. If i simply remove the first it works for the second and breaks on the third, if i remove the first and second it works on the third all with the same spellings. The issue is as charmelron pointed out in his/her comments – Deepend Jun 28 '15 at 13:30
  • @Deepend OK, but what about this http://jsfiddle.net/ah3zh74m/1/ ? – igolkotek Jun 28 '15 at 14:07

2 Answers2

5

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}}');"
charmeleon
  • 2,693
  • 1
  • 20
  • 35
  • Thanks for getting back to me. Yes I cant name them all the name, the Names are auto generated when my form is created (`id_9-slider_one_image`, `id_10-slider_two_image` and `id_11-slider_three_image` – Deepend Jun 27 '15 at 20:23
  • But if there are three separate input ids depending on which hidden field is being shown, How do I assign the right one? – Deepend Jun 27 '15 at 20:27
  • I'm sure you could also give the inputs a unique class name, like `class-slider_image` and then the line that sets the value would change to `document.querySelectorAll('.class-slider_image')[0].setAttribute("value", valueAttribute);`. You also need to make sure that you handle the case where `querySelectorAll` matches no elements to avoid JS errors breaking the rest of your page – charmeleon Jun 29 '15 at 20:24
3

simply create a function which calls all 3 update functions with try catch

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

and use onload='Update(this)'

goyaltushar92
  • 296
  • 1
  • 13