带有原始 HTML 的表单中的单选输入中的多个值

Answer 1

我很确定这在不使用 JS 的现代浏览器中是不可能的。也许在旧浏览器上，您可以使用 CSS 和

display:none

做一些技巧，因为 它过去不使用

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>

Answer 2

要添加另一个独立于其他无线电组，请使用不同的

name

属性。例如，要向请求添加名为

someOtherParam

的第二个参数，请使用

name="someOtherParam"

创建一个单选组：

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

并添加他们对应的标签。

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

您可以添加

required

属性以防止浏览器在所有输入都具有值之前发送表单。

Answer 3

没有javascript，你所描述的就无法完成。

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

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

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

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

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

Answer 4

要向服务器提交额外信息，您可以使用

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';
    }
}

Answer 5

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

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>

节点.js

我不确定

node.js

如何处理 PHP 简单地称为

$_POST['name_attribute_value_here']

的内容，尽管我知道您只是想使用

.split(':')

从该单一表单中获取 两个或更多值。如果您希望每个单选按钮有更多选项，只需在每个值之间附加一个分隔符（不必是

:

）。

• 这两个

  radio

  选项都有

  name

  “fruit1”所以用户不能同时选择。
• 不需要JavaScript。
• 服务器端的小改动
• 如果用户没有选择那个 radio 表单字段，额外的值显然

  not

  出现在服务器上。

数组

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

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

然后在服务器上使用

[whatever].split(',')

获取对并循环迭代以获取每个键/值。如果你真的愿意，你可以创建一个完整的疯狂多维数组。

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

Answer 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>

Answer 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 个更改：

1. 在

   name

   中添加一个

   form
2. 将内联属性

   required

   和

   onchange

   添加到每个radio
3. 添加一个

   input[type=hidden]

   以包含额外的参数。

第一个更改意味着您以后不需要

document.getElementById

，第二个更改因此表单不会为空提交并更新

hidden

所需的值。