JavaScript function to update multiple hidden fields depending on whether they exist or not.
I have a JavaScript function that I am using to update hidden from fields the filename of the image shown to the user. This works great on a page with one image and one hidden field. I am trying to set it up so that it can be used in one page to update multiple hidden fields depending on whether they exist or not.
I used to try to call individual functions from mine onload
separated by semicolons. It would work for the first page / hidden field, but it kept throwing an error when the first hidden field was not available on the second page.
In this attempt I am trying to use one function with if statements associated with the id of the hidden field, but unfortunately I cannot get it to work on any of the pages / hidden fields
Can anyone tell me where I am going wrong? I believe it is possible, but I am not getting any results. Thanks to
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 result
<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>
source to share
Thanks to this question and the highest voice answer , I was able to check if the id exists on 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>
source to share