使用Javascript更新隱藏表單域，並在單獨頁面上使用圖像文件名稱

我有一個自定義的Django wizard_form.html，它顯示我的調查的三個不同頁面上的用戶3個不同的圖像。使用Javascript更新隱藏表單域，並在單獨頁面上使用圖像文件名稱

我嘗試使用下面的腳本來更新與value="{{display_image}}"內容3個不同的網頁3個隱藏的表單字段存儲在數據庫

這個作品向用戶顯示圖像的文件名的方法罰款第一頁/圖像，例如

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

但我似乎無法得到它的工作在第二或第三

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

誰能告訴我什麼，我做錯了什麼？

我的代碼

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

任何幫助是一如既往，大加讚賞，感謝。

來源

2015-06-25 Deepend

你的'onload =「updateInput1（this）; updateInput2（本）; updateInput3（this）;「'調用其中一個函數的縮寫'，還是你調用了所有這三個函數，而不管你在哪個頁面上？因爲如果你總是調用這三個函數，那麼在第10和11頁上，當您調用'document.getElementById（...）。setAttribute'時，第一個函數會引發錯誤，這可能會阻止您的腳本的其餘部分執行 – charmeleon

我正在調用所有3個函數，而不管我在哪個頁面上，而您是否正確，這是導致錯誤，當所述函數不可用。是否有一種方法來適應函數，如果隱藏字段，例如'id_9-slider_one_image'不存在，它仍然會工作，只是移動到下一個？ – Deepend

是的，使它成爲'function updateInput（ish，elementId）{...}'，然後你的onclick變成：'onclick =「updateInput（this，{{input_id}}）'' – charmeleon

首先，你需要分配輸入的ID給一個變量的值，說element_id

element_id = "id-slider_one_image"

如果你不能爲它們命名都是一樣的，只是給這實際元素ID（例如： id_9-slider_one_image）。

然後，你需要改變函數的參數也採取元素ID

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

然後，你onload屬性需要通過element_id字符串除了元素參考：

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

來源

2015-06-27 20:11:15 charmeleon

謝謝你回到我身邊。是的，我不能將它們命名爲所有的名字，當我的表單被創建時（'id_9-slider_one_image'，'id_10-slider_two_image'和'id_11-slider_three_image'' – Deepend

'）會自動生成。但是，如果有三個單獨的輸入ID，字段正在顯示，我如何分配正確的？ – Deepend

我相信你也可以給輸入一個唯一的類名稱，比如'class-slider_image'，然後設置該值的行將改變爲'document.querySelectorAll （'.class-slider_image'）[0] .setAttribute（「value」，valueAttribute）;'你還需要確保處理'querySelectorAll'不匹配任何元素的情況，以避免JS錯誤打破你的其餘部分頁 – charmeleon

簡單地創建一個函數，調用所有3個更新函數與try catch

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

and use onload='Update(this)'

來源

2015-07-01 08:24:33 goyaltushar92

使用Javascript更新隱藏表單域，並在單獨頁面上使用圖像文件名稱

回答

相關問題