Javascript 如何从HTML对话框中检索单选项组的值

发布于03月10日

Index.html:

  <body>
    <dialog class="dialog">
      <form class="report__form" method="dialog">
        <div>
          <input type="radio" name="report" vale="vulgar" />
          <label for="vulgar">Vulgar/Offensive Language</label>
        </div>
        <div>
          <input type="radio" name="report" vale="duplicate" />
          <label for="Duplicate">Duplicate</label>
        </div>
        <div>
          <input type="radio" name="report" vale="broken" />
          <label for="broken">Broken</label>
        </div>
        <button class="dialog__submit">Submit</button>
      </form>
    </dialog>
    <button class="open">open dialog</button>
    <script src="script.js"></script>
  </body>

帖子主题:Re:Колибри

const dialog = document.querySelector(".dialog");
const reportForm = document.querySelector(".report__form");
const submitButton = document.querySelector(".dialog__submit");
const openButton = document.querySelector(".open");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

我很难弄清楚如何在一个HTML对话框中检索单选输入值.我阅读了关于无线电输入的MDN文档，但仍在努力使其在对话的上下文中工作.我认为我需要设置一个缺省值，循环遍历输入，如果我单击其中一个，则更新该值，但我无法使其工作.

const dialog = document.querySelector(".dialog"); const reportForm = document.querySelector(".report__form"); const openButton = document.querySelector(".open"); openButton.addEventListener("click", () => { dialog.showModal(); }); reportForm.addEventListener('submit', e => { const selectedValue = reportForm.querySelector('input[type="radio"]:checked').value; console.log(selectedValue); });

<dialog class="dialog"> <form class="report__form" method="dialog"> <div> <label> <input type="radio" name="report" value="vulgar" /> Vulgar/Offensive Language </label> </div> <div> <label> <input type="radio" name="report" value="duplicate" /> Duplicate </label> </div> <div> <label> <input type="radio" name="report" value="broken" /> Broken </label> </div> <button class="dialog__submit">Submit</button> </form> </dialog> <button class="open">open dialog</button>

Javascript 如何从HTML对话框中检索单选项组的值

推荐答案

Javascript相关问答推荐

为什么JavaScript双边字符串文字插值不是二次的？

有条件的悲剧

node TS：JWT令牌签名以验证客户端和后台问题之间的身份验证

使用续集和下拉栏显示模型属性

Exceljs：我们在file.xlsx(...)&#中发现了一个问题'"" 39人；

从WooCommerce Checkout Country字段重新排序国家，保持国家同步

如何在angular中从JSON值添加动态路由保护？

如何禁用附加图标点击的v—自动完成事件

如何在Angular17 APP中全局设置AXIOS

如何使用JavaScript拆分带空格的单词

查询参数中的JAVASCRIPT/REACT中的括号

图表4-堆叠线和条形图之间的填充区域

通过跳过某些元素的对象进行映射

为什么在运行于<；img>；事件处理程序中的JavaScript中x和y是不可变的？

我无法在Api Reaction本机上发出GET请求

我在哪里添加过滤器值到这个函数？

为什么当雪碧的S在另一个函数中时，Phaser不能加载它？

如何在Highlihte.js代码区旁边添加行号？

JSX/React -如何在组件props 中循环遍历数组

在不使用AJAX的情况下将JavaScript数组值传递给Laravel控制器？