使用 javascript 按 ID 更改表单元素答案

【问题标题】：change a form element by ID with javascript使用 javascript 按 ID 更改表单元素
【发布时间】：2018-08-22 14:22:38
【问题描述】：

问题：

在以需要更改的方式处理表单的 Saas 环境中工作。它是软件即服务，因此无法在系统范围内进行独特的更改。

尝试的解决方案：

尝试使用系统添加到页面标题区域的 Javascript 来更改表单 ID 的值，以便在提交表单时包含更改后的值。

代码： HTML

                <div class="form-group " data-field="how_to_apply">
            <label class="form-label">How to Apply </label>


<div id="application-settings" class="form--move-left clearfix row">
    <div class="form-group form-group__half">
        <input id="via-email" name="ha" value="1" checked="checked" onclick="displayInput(false, 'how_to_apply_1');" type="radio" />
        <label for="via-email" class="form-label">
            By Email<br/>
        </label>
        <input value="systemapplied@emailaddress.com" class="form-control"  name="how_to_apply"  id="how_to_apply_1" type="email" />
    </div>
    <div class="form-group form-group__half">
        <input id="via-site" name="ha" value="2"  onclick="displayInput(false, 'how_to_apply_2');" type="radio" />
        <label for="via-site" class="form-label">
            By URL
        </label>
        <input value="" class="form-control" name="how_to_apply" id="how_to_apply_2" disabled="disabled" type="url" required placeholder="e.g. http://www.yourwebsite.com"/>
    </div>
</div>

尝试更改分配给 how_to_apply_1 ID 的电子邮件地址

使用Javascript

  document.getElementById("how_to_apply_1").value = "new@emailaddress.com";

重要的是要补充一点，这在 CodePen 区域中按预期工作，但在实时站点上却没有，所以我的假设是在我没有看到的某个地方写了一些东西，或者我需要使用其他东西来强制变化，我不知道。任何建议或帮助将不胜感激

提前谢谢...

【问题讨论】：

你需要等到dom准备好。您可以使用DOMContentLoaded event 或在HTML 文档中的结束body 标记之前直接引用您的JS。
感谢您的帮助

标签： javascript html forms customization

【解决方案1】：

您需要在 DOM 准备就绪时运行脚本。您可以将脚本包装在 DOMContentLoaded 事件中，如下所示：

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById("how_to_apply_1").value = "new@emailaddress.com";
});

【讨论】：

感谢您的帮助