如何将“其他”文本输入添加到 HTML 表单中的一组单选按钮?
Posted
技术标签:
【中文标题】如何将“其他”文本输入添加到 HTML 表单中的一组单选按钮?【英文标题】:How can I add an "Other" text input to a set of radio buttons in an HTML form? 【发布时间】:2010-11-16 17:49:38 【问题描述】:我正在尝试创建一个带有写入“其他”选项作为最后一个单选按钮的表单。我尝试了以下变体但没有成功:
<label><input type="radio" name="candidate" value="option1">First Option</label>
<label><input type="radio" name="candidate" value="option2">Second Option</label>
<label><input type="radio" name="candidate" value="other">OTHER</label><input type="text" name="other" value="Write In" />
是否可以有一个带有文本输入的单选按钮,在不使用 javascript 的情况下在提交时将其值传递给该单选按钮?
【问题讨论】:
【参考方案1】:这是我能看到的最简单的方法,如有错误请指正!
<form name="fruitForm" method="post" action="other-post.php">
<label><input type="radio" name="fruit" value="apple" onClick="regularFruit()">apple</input></label>
<label><input type="radio" name="fruit" value="orange" onClick="regularFruit()">orange</input></label>
<label><input type="radio" name="fruit" value="lemon" onClick="regularFruit()">lemon</input></label>
<label onClick="otherFruit()">
<input type="radio" name="fruit" id="other_fruit" value="other" >or other fruit:</input>
<input type ="text" name="other" id="other_text"/></label>
<input type="submit" value="Submit">
</form>
<script>
function otherFruit()
a=document.getElementById('other_fruit');
a.checked=true;
function regularFruit()
a=document.getElementById('other_text');
a.value="";
</script>
在标签包含单选和文本字段的情况下,文本字段检查“其他”单选,并将“其他”的值作为在该字段中输入的值发送。然后再次检查单选按钮会清除文本字段
【讨论】:
【参考方案2】:如果选择了“其他”,您可能只想提交文本字段中的值,将其输入无线电并将其传递给服务器是没有意义的。您可以将“其他”单选的值设为空字符串,例如:
<label><input type="radio" name="candidate" value="">OTHER</label>
如果“候选”中没有值,则在服务器上查找“其他”。
【讨论】:
【参考方案3】:否 - html 规范不支持此功能。 您要么需要在提交表单之前通过 javascript 执行此操作,要么更好的是,检查单选按钮是否设置为“其他”,然后在提交表单后读取文本框值。
您不想真正搞砸更改“其他”单选按钮的返回值的一个原因是,如果我在您的文本框中键入“option1”会怎样?
【讨论】:
【参考方案4】:我不相信 HTML 规范支持这一点,不。你只需要让你的处理代码查看单选按钮,看到值是“其他”,然后从文本字段的输入中获取一个值(表单提交中的“其他”var而不是“候选人” ' 变量)。
【讨论】:
【参考方案5】:没有。这需要动态更新 DOM,这需要 javascript。
【讨论】:
【参考方案6】:这就是我所做的(运行 sn-p 以查看它的作用)。希望您可以四处寻找并弄清楚它是如何工作的。
在处理表单时,您可以通过以下方式检查值:或者选中单选按钮或文本框将具有值。
$(document).ready(
function()
$('input[name=amount]').on('click', function()
var customText = $('input[name=custom-amount]');
customText.val('');
customText.parent().removeClass("selected");
);
$('input[name=custom-amount]').on('click', function()
$('input[name=amount]').attr('checked', false);
$(this).parent().addClass("selected");
);
);
.donate
font-family: sans-serif;
.donate .payee
color: #4B8EBC;
font-weight: bold;
.donate .custom-amount
width: 150px;
height: 40px;
background-color: #7DB6DA;
color: #325F7F;
font-weight: bold;
font-size: 1rem;
padding: 2px;
padding-left: 6px;
.donate .custom-amount input
font-weight: lighter;
font-size: 0.8rem;
background-color: white;
width: 116px;
height: 24px;
margin-top: 4px;
margin-left: 6px;
.donate .radio-control
position: relative;
display: inline-block;
font-size: 1rem;
width: 50px;
height: 40px;
cursor: pointer;
z-index: 12;
.donate .radio-control input[type="radio"]
position: absolute;
z-index: -1;
opacity: 0;
.donate .radio-control__indicator
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
text-align: center;
line-height: 40px;
.donate .radio-control__indicator, .donate .custom-amount
background-color: #7DB6DA;
color: #325F7F;
.donate .radio-control:hover input ~ .radio-control__indicator,
.donate .radio-control input:focus ~ .radio-control__indicator
opacity: 0.9;
.donate .radio-control input:checked ~ .radio-control__indicator,
.donate .custom-amount.selected
background: #4B8EBC;
color: white;
.donate .radio-control:hover input:not([disabled]):checked ~ .radio-control__indicator,
.donate .radio-control input:checked:focus ~ .radio-control__indicator
opacity: 1;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="donate">
<div class="row amount">
<div class="control-group">
<label class="radio-control">
<input checked="checked" name="amount" type="radio" value="$5" />
<div class="radio-control__indicator">
$5
</div>
</label>
<label class="radio-control">
<input name="amount" type="radio" value="$10" />
<div class="radio-control__indicator">
$10
</div>
</label>
<label class="radio-control">
<input name="amount" type="radio" value="$20" />
<div class="radio-control__indicator">
$20
</div>
</label>
<label class="radio-control">
<input name="amount" type="radio" value="$50" />
<div class="radio-control__indicator">
$50
</div>
</label>
<div class="custom-amount">
$
<input class="custom-amount" name="custom-amount" placeholder="Custom amount" size="40" />
</div>
</div>
</div>
</form>
【讨论】:
以上是关于如何将“其他”文本输入添加到 HTML 表单中的一组单选按钮?的主要内容,如果未能解决你的问题,请参考以下文章
如何将原始 html 添加到 Wordpress 表单中的成功消息中
html 更改客户在电子邮件中收到的表单标题 - 在其他输入字段之后将其添加到表单顶部
html 更改客户在电子邮件中收到的表单标题 - 在其他输入字段之后将其添加到表单顶部