更新和更改视图的视图上的单选选项？

Question

我认为我的问题不是很困难 - 但我对此很陌生，并且在寻找简单的解决方案时遇到了问题。

我有一个收集一些项目的表单，以及一个基于这些项目创建表格的输出页面。例如，表单选项之一是“哪条腿受到影响？”而且你必须选择“左、右、两者”。

我想在视图上创建一个单选选项，以便使用此工具的人不必单击返回按钮来更新这一字段。所构建的表格会根据这一选择进行更改，因此无需重新提交表单即可查看这些更改。

如果有人能指出我正确的方向 - 无论是 JavaScript 还是一些涉及从视图重新发送表单值的方法 - 我将非常感激。

Answer 1

我相信您所描述的正是使用 Javascript 进行“单页应用程序”样式编码的想法 - 使用逻辑修改页面而不必发出服务器请求。即，您要进行“应用程序”。虽然很简单。

我建议您研究的是“事件处理程序”，特别是 click handler。

所以，如果你的 html 看起来像：（从 MDN 的 radio 页面窃取）

<form id="radio_form">
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
</form>

然后你可以得到看起来像这样的代码

var radio = document.getElementById('radio_form');
radio.onclick = changeTable;

function changeTable(e){
  // Do logic here to change table
}

这个想法是您的页面正在“等待”表单被“点击”（您也可以查看onChange），当它被点击时，会调用一个执行进一​​步逻辑的函数。

请参阅here 以了解如何获取选定收音机的值。

请参阅here，了解如何使用 javascript 将行插入表中（您可能希望在 changeTable 函数中执行此操作）。

编辑：要注意的一个“问题”是您的脚本是否在页面实际加载时正在运行。如果您的页面异步加载（可疑），这可能是一个问题。以防万一，还要研究某种document.ready 实现：Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

Answer 2

您可以为每个无线电输入添加'click' 的事件侦听器，并让回调函数以您想要的任何方式修改视图。

这是一个例子：

const form = document.querySelector('.choice-form');
const display = document.querySelector('.display');

form.querySelectorAll('input[type="radio"]').forEach(input => {
    input.addEventListener('click', () => {
        display.innerHTML = "";
        if (input.id === '1') {
            display.innerHTML = "<span>You selected: <span class='red'>One</span></span>";
        } else if (input.id === '2') {
            display.innerHTML = "<span>You selected: <span class='blue'>Two</span></span>";
        }
    });
});

.red {
  color: red;
}

.blue {
  color: blue;
}

<div>
  <form class='choice-form'>
    <label for='choice'>Make a choice</label>
    <input type='radio' id='1' name='choice'/>
    <label for='1'>One</label>
    <input type='radio' id='2' name='choice'/>
    <label for='2'>Two</label>
  </form>

  <div class='display'>
  </div>
</div>