首页 > 解决方案 > 用于访问从模态框设置的 HTML 值的 JavaScript

问题描述

我试图了解如何在使用模态框从文件存储中选择图像后访问在 DOM 中设置的 HTML 值。

在触发模态框之前,以下 HTML 代码位于 DOM 中:

<div class="field">
  <input class="browse" id="tileOneImage_csBrowse" value="Browse Content Collection" title="Browse Content Collection" type="button">
  <input id="tileOneImage_selectedCSFile" name="tileOneImage_CSFile" value="" type="hidden">
  <input id="tileOneImage_selectedCSFileName" name="tileOneImage_linkTitle" type="hidden">
  <input id="tileOneImage_selectedCSFilePath" name="tileOneImage_CSFilePath" value="" type="hidden">
  <input id="tileOneImage_selectedCSFileSize" type="hidden">
  <input id="copyToPrivateDoc" value="false" type="hidden">
</div>

用户使用模态框选择图像后,将填充值参数:

<div class="field">
  <input class="disabled" id="tileOneImage_csBrowse" value="Browse Content Collection" title="Browse Content Collection" disabled="" type="button">
  <input id="tileOneImage_selectedCSFile" name="tileOneImage_CSFile" value="/xid-1602_1" type="hidden">
  <input id="tileOneImage_selectedCSFileName" name="tileOneImage_linkTitle" value="promo2.svg" type="hidden">
  <input id="tileOneImage_selectedCSFilePath" name="tileOneImage_CSFilePath" value="/xid-1602_1" type="hidden">
  <input id="tileOneImage_selectedCSFileSize" value="4967" type="hidden">
  <input id="copyToPrivateDoc" value="false" type="hidden">
</div>

我的 JavaScript 代码是:

var imageOneValue;
var finalImageOnePath;
var serverPath = document.getElementById('serverUrl').value;

document.getElementById('tileOneImage_csBrowse').addEventListener('click', promo1Path, true);

function promo1Path(e) {

    imageOneValue = document.getElementById('tileOneImage_selectedCSFilePath').value;
    finalImageOnePath = serverPath + "/bbcswebdav" + imageOneValue;

    document.getElementById('promo1').src = finalImageOnePath;                          
    document.getElementById('tileOnePath').setAttribute('value', finalImageOnePath); 
} 

要打开模态框,用户按下Browse按钮一次。我想在页面中的 id 位置promo1tileOnePath模态框关闭后显示选择的图像和文件路径。但是我的代码目前需要再次单击该Browse按钮才能完全填充值参数。

我已经尝试改变EventListener以改变和关注,但我认为我应该瞄准别的东西 - 有什么建议吗?

标签: javascripthtml

解决方案


推荐阅读