javascript - 使用 javascript 按 ID 更改表单元素

Question

问题：

在以需要更改的方式处理表单的 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="[e-mail]" 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 = "[e-mail]";

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

提前致谢...

标签： javascripthtmlformscustomization

Answer 1

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

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById("how_to_apply_1").value = "[e-mail]";
});