带有香草 HTML 的表单内的单选输入中的多个值

Posted 2023-03-05

【中文标题】带有香草 HTML 的表单内的单选输入中的多个值

【英文标题】：Multiple values in radio input within form with vanilla HTML

【发布时间】：2021-04-07 01:19:45

【问题描述】：

我的目标是创建一个表单来处理我网站上的一个小组件的禁用 javascript 体验。目前我有以下表格：

<form method="GET" action="https://mywebsite.com/somedirectory/">

    <input type="radio" id="uid1" name="someParam" value="fruity" />
    <label for="uid1">Fruit</label>

    <input type="radio" id="uid2" name="someParam" value="veggie" />
    <label for="uid2">Vegetable</label>

    ...other radio options

    <input type="submit" value="Submit" />
</form>

单击任一单选选项，然后单击提交按钮将导致：

option 1: https://mywebsite.com/somedirectory/?someParam=fruity
option 2: https://mywebsite.com/somedirectory/?someParam=veggie

如何为每个单选选项添加另一个值？假设我想传递someOtherParam，这对于每个选项都是唯一的，我想将其作为我的选项的输出：

option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple
option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper

我试过的是：

<input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" />
<input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" />

但是，& 符号在链接内被转换为 %26，感觉太 hacky。有没有更好的方法来实现这一目标？另外，有没有办法确保仅在选择单选选项后才启用提交按钮？

附：我的目标是不涉及 Javascript 的纯 html 体验。这可能吗？

【问题讨论】：

如果你使用php，为什么不在html中使用像1这样的通用值，而在php页面中使用简单的if来确定值？？

@SimoneRossaini 不幸的是，我重定向到的网站是外部网站，我无法控制。

没有JS是必须的？因为 AFAIK 这是不可能的

@AlvaroFlañoLarrondo 你能提供一种使用 JavaScript 的方法吗？

【参考方案1】：

要添加另一个独立于其他的无线电组，请使用不同的 name 属性。例如，要在请求中添加第二个名为 someOtherParam 的参数，请使用 name="someOtherParam" 创建一个无线电组：

<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />

并添加他们对应的标签。

另外，有没有办法确保只有在选择单选选项后才启用提交按钮？

您可以添加required 属性以防止浏览器在所有输入都有值之前发送表单。

【讨论】：

但这只会在列表中添加另外两个单选选项。相反，我想实现的是，只要选择有值“水果”的选项，也会添加某些情况，对于它而言，整个链接现在具有两个无线电选项的两个总参数。 （例如，单选选项 1 为“someParam=fruit&someOtherParam=apple”，单选选项 2 为“someParam=veggie&someOtherParam=pepper”。

正如 Rahul 所说，没有 javascript 就无法做到这一点。请更新您的帖子以阐明您想要什么

【参考方案2】：

没有 javascript，您所描述的将无法完成。

正如其他海报所建议的那样，您可以做的是：

为每个类别（水果/蔬菜等）可能的选项列表创建单选按钮

<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />

在您的服务器端代码处理输入时，请检查您是否收到了值。如果没有，您可以选择默认选项（苹果或其他）。在您的页面上，您可以提及默认选项是什么，以防他们没有做出选择。

您可以按照建议进行一些输入 required，但您仍然需要在服务器端检查输入是否已收到，因为 required 属性只是对用户的建议浏览器 - 它不会阻止恶意人员通过运行脚本等在没有该参数的情况下发出请求。

【讨论】：

你提到我想要的没有javascript就无法实现。您介意更新一下如何使用 JavaScript 实现这一点吗？

【参考方案3】：

很简单，在每个额外值之间用分隔符将值加倍：

HTML

<div>
<label for="uid1">
<input id="uid1" name="fruit1" type="radio" value="apple:orange" />
Fruit, Apple + Orange
</label>
</div>


<div>
<label for="uid2">
<input id="uid2" name="fruit1" type="radio" value="apple:cherry:lime" />
Fruit, Apple + Cherry + Lime
</label>
</div>

node.js

我不确定 node.js 如何处理 PHP 简称为 $_POST['name_attribute_value_here'] 的内容，尽管我知道您只是想使用 .split(':') 来获取 两个或多个值形式。如果您希望每个单选按钮有更多选项，只需在每个值之间添加一个分隔符（不必是 :）。

这两个radio 选项都有name“fruit1”，因此用户不能同时选择两者。 不需要 JavaScript。 服务器上的小改动。 如果用户没有选择radio 表单域，那么显然不会向服务器显示额外的值。

数组

如果您想设置自己的键/值，只需添加第二个分隔符：

<input name="fruit1" value="fruit:apple,fruit:lime,color:purple,planet:Earth" />

然后在服务器上使用[whatever].split(',') 获取对并在循环中迭代以获取每个键/值。如果你真的想，你可以创建一个完整的疯狂的多维数组。

我希望这会有所帮助，如果您需要任何进一步的说明，请随时发表评论。

【参考方案4】：

我很确定这在不使用 JS 的现代浏览器中是不可能的。也许在旧浏览器上，您可以使用 CSS 和 display:none 做一些技巧，因为 it used to not send fields with display:none，但现在这不是一个选项。

如果您可以允许使用 Javascript，您可以为每个单选选项添加一个数据属性，并使用它在更改时填充额外的隐藏输入。

document.querySelectorAll('input[type=radio][name="someParam"]')
  .forEach(radio => radio.addEventListener('change', (event) =>
    document.getElementById('someOtherParam').value = event.target.dataset.extraValue
  ));

<form method="GET" action="https://mywebsite.com/somedirectory/">
  <input type="radio" id="uid1" name="someParam" value="fruity" data-extra-value="apple" />
  <label for="uid1">Fruit</label>

  <input type="radio" id="uid2" name="someParam" value="veggie" data-extra-value="pepper" />
  <label for="uid2">Vegetable</label>

  <input type="hidden" id="someOtherParam" name="someOtherParam">

  <input type="submit" value="Submit" />
</form>

【参考方案5】：

要向服务器提交额外信息，您可以使用 hidden 输入类型并使用 javascript 根据您的需要更改值。

HTML 代码

<form method="GET" action="">

    <input type="radio" id="uid1" name="someParam" value="fruity" />
    <label for="uid1">Fruit</label>

    <input type="radio" id="uid2" name="someParam" value="veggie" />
    <label for="uid2">Vegetable</label>

    <input type="hidden" id="uid3" name="someOtherParam" value="" readonly required />

    <input type="submit" value="Submit" onclick="onSubmit()" />
</form>

Javascript 代码

function onSubmit () 
    let fruityRadio = document.getElementById( 'uid1' );
    let veggieRadio = document.getElementById( 'uid2' );
    if ( fruityRadio.checked ) 
        document.getElementById( 'uid3' ).value = 'apple';
     else if ( veggieRadio.checked ) 
        document.getElementById( 'uid3' ).value = 'pepper';
    

【参考方案6】：

生成表单：

const data = [
   name: 'apple', type:"fruity" ,
   name: 'pepper', type:"veggie"
]

const form = document.querySelector('form');
const uid = document.querySelector('#uid')
createOptions(data);

function createOptions(data)
  data.forEach((e, index) => 
    const f = document.createDocumentFragment();
    const l = document.createElement('label');
    const i = document.createElement('input');
    l.setAttribute('for', `uid$index+1`);
    l.textContent=e.name;
    i.setAttribute('type', `radio`);
    i.setAttribute('for', `uid$index+1`);
    i.setAttribute('name', 'someOtherParam');
    i.setAttribute('value', e.name);
    i.dataset.otype = e.type;
    f.appendChild(l);
    f.appendChild(i);
    form.insertBefore(f, uid);
    i.addEventListener('change', onselectChange, false);
  )  


function onselectChange(event) 
  uid.value = event.target.dataset.otype;

<form method="GET" action="https://mywebsite.com/somedirectory/">
  <input type="text" id="uid" name="someParam"
    style="width:0; visibility: hidden;">
  <input type="submit" value="Submit" />
</form>

【参考方案7】：

我想不出另一种使用更少代码的方法，以下实现了您想要的结果：

<form name="form" method="GET" action="">
    <input type="radio" id="uid1" name="someParam" required value="fruity" onchange="document.form.someOtherParam.value = 'apple'" />
    <label for="uid1">Fruit</label>
    <input type="radio" id="uid2" name="someParam" required value="veggie" onchange="document.form.someOtherParam.value = 'pepper'" />
    <label for="uid2">Vegetable</label>
    <input type="hidden" name="someOtherParam" value=""/>
    <input type="submit" value="Submit"/>
</form>

您的示例只有 3 处更改：

将name 添加到form，然后将内联属性required 和onchange 添加到每个收音机，最后添加input[type=hidden] 以包含额外的参数。第一个更改是为了让您以后不需要document.getElementById，第二个更改是为了使表单不会为空提交并更新hidden所需的值。