CODEWITHSUNDEEP
javascripthtmlforms
Deepend
Deepend

Reputation: 4155

A JavaScript function to update multiple hidden fields depending if they exist or not

I have a JavaScript function which I use to update hidden from fields with the file name of an image shown to a user. This works fine on a page with a single image and single hidden field. I am trying to customize it so that it can be used on a single page to update multiple hidden fields depending on whether they exist or not.

Previously I tried to call separate functions from my onload separated by a semi-colon. It would work for the first page/hidden field, but it kept trowing an error when the first hidden field was not available on the second page.

In this attempt I am trying to use a single function with if statements linked to the id of the hidden field but unfortunately I cant seem to get it to work on any of the pages / hidden fields

Can anyone tell my where I am going wrong? I believe it is possible to do this but I am not getting any results. Thanks

Current Output

<input id="id_9-slider_one_image" name="9-slider_one_image" type="hidden" />
<input id="id_10-slider_two_image" name="10-slider_two_image" type="hidden" />
<input id="id_11-slider_three_image" name="11-slider_three_image" type="hidden" />

Desired Output

<input id="id_9-slider_one_image" name="9-slider_one_image" type="hidden" value="P1DP.jpg"/>
<input id="id_10-slider_two_image" name="10-slider_two_image" type="hidden" value="P6D6.jpg"/>
<input id="id_11-slider_three_image" name="11-slider_three_image" type="hidden" value="P3D3.jpg"/>

My Code

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



<script type="text/javascript">
    function updateInput(ish) {
    var valueAttribute = ish.getAttribute("value");


    if($(this).attr("id") == "id_9-slider_one_image")
        document.getElementById("id_9-slider_one_image").setAttribute(
        "value", valueAttribute);

    if($(this).attr("id") == "id_10-slider_two_image")
        document.getElementById("id_10-slider_two_image").setAttribute(
        "value", valueAttribute);


    if($(this).attr("id") == "id_11-slider_three_image")
        document.getElementById("id_11-slider_three_image").setAttribute(
        "value", valueAttribute);
    }

</script>

Upvotes: 5

Views: 220

Answers (1)

Deepend
Deepend

Reputation: 4155

Thanks to this question and the highest voted answer I was able to check if the id exists in the page before trying to set the value

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


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


<script type="text/javascript">
    function updateInput(ish) {
    var valueAttribute = ish.getAttribute("value");

    if (document.getElementById('id_9-slider_one_image')) {
        document.getElementById("id_9-slider_one_image").setAttribute(
        "value", valueAttribute)
    }

    if (document.getElementById('id_10-slider_two_image')) {
        document.getElementById("id_10-slider_two_image").setAttribute(
        "value", valueAttribute)
    }

    if (document.getElementById('id_11-slider_three_image')) {
        document.getElementById("id_11-slider_three_image").setAttribute(
        "value", valueAttribute)
    }

</script>

Upvotes: 3

Related Questions