使用 Javascript 将 HTML 表单字段动态替换为不同字段的最佳方法，但将输入同步到原始/隐藏字段答案

【问题标题】：Best way to dynamically replace a HTML Form Field with a different one using Javascript, but have input sync to the original/hidden field使用 Javascript 将 HTML 表单字段动态替换为不同字段的最佳方法，但将输入同步到原始/隐藏字段
【发布时间】：2020-09-02 21:55:41
【问题描述】：

我正在尝试使用 JS 更改我网站上现有的第 3 方 html 表单。

我看过几篇关于这个的帖子，但找不到适合我情况的答案。

有问题的表单上有一个复选框字段，我想隐藏它并用单选按钮替换它。但是......然后我还必须将它们同步起来，以便访问者在表单上对复选框所做的任何事情都会反馈到隐藏的输入字段，以便在提交表单时，它在原始字段中具有一个值表格已发布。

因此，新的 Radio Button 字段应该有一个是/否选项，并且 Yes 会将原始 Checkbox 值设置为 TRUE，而 No 将其设置为 FALSE。

为了清楚起见...我无权访问渲染表单的后端软件，因此只能选择在之后使用 JS 进行更改。

【问题讨论】：

标签： javascript html forms dom

【解决方案1】：

我不确定我是否正确理解了这个问题，但这里有一个示例，如何在表单中隐藏复选框、插入单选按钮并在提交表单之前更改复选框值。

const form = document.getElementById('form');
const log = document.getElementById('log');
const checkbox = form.querySelector('input[type="checkbox"]');
const checkboxContainer = checkbox.closest('label');
const template = '<label><input type="radio" name="replaced" value="replaced">Yes</label> <label><input type="radio" name="replaced" value="" checked>No</label>';

form.insertAdjacentHTML('afterbegin', template);
checkboxContainer.style.display = 'none';

form.addEventListener('submit', (event) => {
  checkbox.checked = form.querySelector('input[name="replaced"]:checked').value !== "";
  log.textContent = checkbox.checked; // Show checkbox value
  event.preventDefault(); // prevent form submitting
});

<form id="form">
  <label>Hidden checkbox: <input type="checkbox" name="checkbox"></label>
  <br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

【讨论】：

非常感谢，这在我的情况下非常有效。我确实必须将我的代码包装在 window.addEventListener('load', (event) => {}; 以确保所有内容都准备好，我正在更改。但是，我现在有一个次要问题，即页面加载事件有效，但是有一个 AJAX 调用会改变页面 DOM，当它从 AJAX 调用（通过取消单击）返回时，会刷新原始页面，并且在 AJAX 调用后我的更改不会再次触发。什么会也是在 AJAX 刷新后再次触发它的最佳方法吗？
您说您无权访问后端，但您可以编辑 JS。所以你应该改变一个处理 AJAX 响应的代码。