在带有香草HTML的表单中的无线电输入中有多个值

Question

我的目标是为我的网站上的一个小组件创建一个表单来处理禁用的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，感觉太粗糙了。有更好的方法来实现这一点吗？此外，是否有方法确保只有在选择了单选选项后才启用"提交"按钮？

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

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" />

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

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

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>

node.js

我不确定node.js是如何处理PHP简称为$_POST['name_attribute_value_here']的内容的，尽管我知道你只想使用.split(':')从单个表单中获得两个或多个值。如果你想每个单选按钮有更多选项，只需在每个值之间添加一个deliminator(不必是:(。

• 这两个CCD_ 15选项都具有CCD_；fruit1"；因此用户不能同时选择两者
• 不需要JavaScript
• 服务器上的一个小调整
• 如果用户没有选择radio表单字段，则服务器上显然会出现而不是的额外值

阵列

如果你想设置自己的键/值，那么只需添加第二个分母：

<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添加到每个无线电
3. 添加一个input[type=hidden]以包含额外的参数

第一个更改意味着您以后不需要document.getElementById，第二个更改意味着表单不会被空提交，并且还会更新所需的hidden值。