将多个单选按钮与单个文本框关联(Associate multiple radio buttons with a single textbox)

我不擅长前端和HTML是我理想的在这里工作(如果我可以避免在这里使用js / jquery)。 我有一个带有多个单选按钮的文本框 - 例如,item1,item2,... item5。 每个item1,2 ......对应一个字段。 当用户在文本框中输入“abc”并选择“item3”时,它应返回item3字段中具有“abc”的所有项目。 我可以为每个item1,2的单独文本框做到这一点..但我只需要一个与所有无线电字段相关联的文本框。

这是相关的html /模板代码。

    <form action={% url 'search-fields-radiofields' %} method="get">

        <div align="left">

            <input type="text" name="name" size="54" />​
            <br><br>

            <input type="radio" id="radio1"name="name">
            <label for="radio1">item1</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio2">item2</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio3">item3</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio4">item4</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio5">item5</label>
            <br><br>
            <input id="search_fields" type="submit" value="Search"  size="100"/>        
</div>
</form>

比如,搜索词是'test'。 我选择item5。 返回GetData数据的MultiValueDictKeyError

Variable    Value
u'name'[u'test', u'on']

name是db中的一个字段,item5应该与它对应。 同样,如果我将文本框名称更改为“item1”,则Get数据

Variable    Value
u'item1' [u'test', u'on']

我有一个处理所有无线电输入的专用view ,它适用于与每个项目对应的单个文本框。 但我需要将所有5个单选按钮与上面的1个文本框关联起来。


I am not good with front-end and HTML is what I would ideally like to work with here (if I can avoid engaging js/jquery here). I have a single textbox with multiple radio buttons - say, item1, item2,...item5. Each item1, 2... corresponds to a field. When a user enters, say, 'abc' in a textbox and selects 'item3', it should return all items having 'abc' in item3 field. I can do it with individual textboxes for each item1, 2.. but I need just one textbox associated with all the radio fields.

Here's the relevant html/template code.

    <form action={% url 'search-fields-radiofields' %} method="get">

        <div align="left">

            <input type="text" name="name" size="54" />​
            <br><br>

            <input type="radio" id="radio1"name="name">
            <label for="radio1">item1</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio2">item2</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio3">item3</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio4">item4</label>

            <input type="radio" id="radio1"name="name">
            <label for="radio5">item5</label>
            <br><br>
            <input id="search_fields" type="submit" value="Search"  size="100"/>        
</div>
</form>

Say, the search term is 'test'. And I select item5. Returns a MultiValueDictKeyError with Get data of

Variable    Value
u'name'[u'test', u'on']

. name is one of the fields in the db and item5 is supposed to correspond to it. Similarly, if I change the textbox name to 'item1', then Get data is

Variable    Value
u'item1' [u'test', u'on']

I have a dedicated view to handle all the radio inputs and it works with individual textboxes corresponding to each of the items. But I need to associate all 5 radio buttons with only 1 textbox as above.

2022-11-12 15:11

满意答案

根本不需要将按钮与文本框“关联”。

你缺少的是每个单选按钮本身都需要一个value 。 一旦你完成了,但给了他们一个不同的名字,你就完全了。

        <input type="text" name="name" size="54" />​

        <input type="radio" id="radio1" name="field" value="item1">
        <label for="radio1">item1</label>

        <input type="radio" id="radio1" name="field" value="item2">
        <label for="radio2">item2</label>

...等等

现在request.GET将是{'name': 'test', 'field': 'item1'}或者其他什么。


Thanks all. Solved it from backend myself. The problem was that I was trying to get the request to send just the text value with the key=whatever-radio-is-selected. What I did was looked at the request it was sending which was name=? and textbox=? and then used these two keys to send the right response.

相关问答

更多

混合单选按钮和文本框:使用键盘导航的理智方式是什么?(Mixed radio buttons and text boxes: What is the sane way to navigate with a keyboard?)

通过radioButton4设置radioButton1的TabIndex ,使它们从0(零)变为3。 分别为textBox1和textBox2,4和5制作TabIndex 。 Button应该是TabIndex 6。 现在可以使用向上/向下箭头导航RadioButtons,您可以通过Button从TextBoxes中选择Tab并返回RadioButtons。 *如果您首先放置所有RadioButton,然后放置TextBox,那么TabIndexes将以这种方式设置。 您最初可能按以下顺序放置控...

多个重复项目内的多个单选按钮 - AngularJS(Multiple radio buttons inside multiple repeated items - AngularJS)

问题似乎是我们尝试使用相同的单选按钮id,同时重复item1到item n。让索引从1开始。 例如 Item 1 -> radio_1,radio_2,radio_3.... Item 2 ->radio_1,radio_2,radio_3... Item 3 ->radi0_1,radio_2,radio_3... 但要正确地做到这一点我们需要 Item 1 ->radio_1_1,radio_1_2,radio_1_3... Item 2 ->radio_2_1,radio_2_2,radi...

在单选按钮上添加一个文本框到BIRT报告参数窗口(Add a textbox against a radio button to BIRT report parameters window)

我相信可以按照您的要求进行操作,但需要创建自定义参数。 对于我想象的是你想要做的事情,这是一个更容易的解决方案。 更简单的解决方案是在参数中使用单个文本框,将默认值设置为“全部”,查询中的SQL代码与此类似。 where CONTCTSM1.OPERATOR_ID = ? or ('All' = ? and CONTCTSM1.ACTIVE = 'f' ) 使用此代码,如果给定特定值,则返回该一个参数的结果。 如果Value保留为All...

仅文本单选按钮(Text only radio buttons)

不需要脚本。 只是CSS。 这里是一个小提琴: JSFiddle 我不知道你想要什么,但这至少是概念证明。 CSS label { display: inline-block; width: 100px; height: 50px; border: solid 2px red; } input[type="radio"] { display:none; } input[type="radio"]:checked + label { border...

将多个单选按钮与单个文本框关联(Associate multiple radio buttons with a single textbox)

根本不需要将按钮与文本框“关联”。 你缺少的是每个单选按钮本身都需要一个value 。 一旦你完成了,但给了他们一个不同的名字,你就完全了。 <input type="text" name="name" size="54" />​ <input type="radio" id="radio1" name="field" value="item1"> <label for="radio1">item1</label> <input ...

组合框中的VB多个单选按钮(VB Multiple Radio buttons within a group box)

这就是单选按钮的工作方式。 如果这不是您想要的,那么您必须使用复选框。 This is how radio buttons are supposed to work. If this is not what you want, then you must use checkboxes instead.

WORD VBA - 单击单选按钮填充文本框(WORD VBA - Radio button click populates textbox)

假设您的文本框的Multiline属性设置为True,您可以显示在Word中格式化的任何段落。 我尝试了这个代码,其中书签范围包括硬返回和软返回。 Private Sub TextBox1_DblClick(ByVal Cancel As MSForms.ReturnBoolean) TextBox1.Text = ActiveDocument.Bookmarks("Mark").Range.Text End Sub Presuming that your textbox's Multi...

处理事件到多个单选按钮(handling events to multiple radio buttons)

你可以使用这样的东西: function clickFunc(){}; var radios = ['p2','p3','p4']; for(var i in radios) document.getElementById(radios[i]+'1radio').onclick = clickFunc; You could use something like this : function clickFunc(){}; var radios = ['p2','p3','p4']; for(va...

多个单选按钮ajax发布(Multiple radio buttons ajax post)

好的,这是怎么做的。 首先,在表单中添加一个id : <form id="myform" method="post" action=""> 这将使通过jQuery访问更容易。 然后,将序列化的表单作为POST数据传递给PHP脚本: $(document).ready(function () { $("#submit").click(function () { if ($('input[type="radio"]:checked').leng...

如何使用jQuery为某些单选按钮强制使用文本框?(How to make textbox mandatory for certain radio buttons using jQuery?)

我认为在这里做的最好的事情是避免让用户感到困惑,就是hide()像这样不必要的字段。 选择TestClient按钮时, address字段将被隐藏,但是当选择TestServer按钮时,将显示该按钮。 这避免了与填写哪些框混淆:人们往往不喜欢错误信息,即使他们是善意的措辞。 I think the best thing to do here to avoid confusing your users would be to hide() the unnecessary field like thi...

相关文章

更多

[转]So You Want To Be A Producer

pro-du-cer n. 1. Someone from a game publisher who ...

windows phone开发中textbox控件的header属性

备注;博主windows phone学习新手,在博客园上分享自己刚刚掌握的一些学习笔记,内容简单,高手 ...

Solr4:Tomcat7与Solr之多核配置(Multiple Cores)

1. 背景 多核,官方说法,让你只用一个Solr实例,实现多配置多索引的功能,为不同的应用保留不同的 ...

A Great List of Windows Tools

Windowsis an extremely effective and a an efficient ...

Solr: a custom Search RequestHandler

As you know, I've been playing with Solr lately, tr ...

Create a Bootable MicroSD Card

http://gumstix.org/create-a-bootable-microsd-card.h ...

Spark - A Fault-Tolerant Abstraction for In-Memory Cluster Computing

http://spark-project.org/ 项目首页 http://shark.cs.berk ...

按钮样式

网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接退出,如果将超链接的样式变成 ...

Hadoop 1.2.1 单节点安装(Single Node Setup)步骤

为了使您快速体验Hadoop,可以在一台机子上安装单节点(Node)的hadoop。 相关阅读:单节点 ...

Becoming a data scientist

Data Week: Becoming a data scientist Data Pointed, ...

最新问答

更多

Python / IPython奇怪的不可重现列表索引超出范围错误(Python/IPython strange non reproducible list index out of range error)

你得到IndexError的原因是你的输入文件显然不是完全用制表符分隔的。 这就是为什么当您尝试访问它时, splits[1]没有任何内容。 您的代码可以使用一些重构。 首先,你正在重复使用if -checks,这是不必要的。 这只是将cds0到7个字符,这可能不是你想要的。 我将以下内容放在一起,以演示如何重构您的代码,使其变得更加pythonic和干燥。 我无法保证它能够与您的数据集一起使用,但我希望它可以帮助您了解如何以不同的方式执行操作。 to_sort = [] # W

故事板从表格单元中延伸出来并显示其详细信息披露按钮(storyboard segue from a tablecell an its Detail Disclosure Button)

我不认为你可以链接一个特定的细节披露按钮瓦特/赛格。 我的故事板是非常程序化的B / C我使用了很多定制CGRect等。 所以我倾向于使用这样的东西: -(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath { [self performSegueWithIdentifier:@"ViewControllerIdentifer"

我们可以将Gherkin功能文件与testcomplete集成(Can we integrate Gherkin feature files with testcomplete)

TestComplete不支持Gherkin功能文件。 但是,TestComplete具有SDK,因此可以自己为此创建扩展。 TestComplete does not support Gherkin feature files. However, TestComplete has SDK so it is possible to create an extension for this by yourself.

TrustAllCertificatesCallback被忽略(TrustAllCertificatesCallback is ignored)

我没有做过这样的事情,但看看我认为可以看出错误的例子。 试试这个代码: static class Program { static void Main() { var tcpclient = new TcpClient("remote.example.com", 443); var tcpstream = tcpclient.GetStream(); var sslstream = new SslStream(tcpstream,

返回嵌套元素的索引(Return index of nested element)

您需要获取父li元素的索引。 否则,您将获得列表项内锚点的索引,该索引始终为零。 $(this.parentNode).index(); You need to get the index of the parent li element. Otherwise you are getting the index of the anchor inside the list item, which will always be zero. $(this.parentNode).index();

在数组中重新编号元素的有效方法(Efficient way of re-numbering elements in an array)

您需要多次迭代列表,我认为没有办法解决这个问题。 毕竟,在开始更改元素(第二遍)之前,首先必须确定不同元素的数量(第一遍)。 但是请注意,由于对index的重复调用而not in列表中具有O(n),因此可能具有最多O(n ^ 2)的不同元素的数量。 或者,您可以使用dict而不是value_map的list 。 字典比列表具有更快的查找速度,因此,复杂性应该确实在O(n)的数量级上。 您可以使用(1)字典理解来确定旧值到新值的映射,以及(2)用于创建更新子项的列表理解。 value_map =

Express app定义的`static`文件夹无法正常工作(Express app defined `static` folder not working properly)

选项1 你可以改变这一行: app.use( express.static(__dirname + '/puplic')); //my public folder. 至 app.use('/oneTime', express.static(__dirname + '/puplic')); //my public folder 选项2 我假设你在公共文件夹中有一个js文件夹,然后你需要更改你的HTML代码:

使用node.js和socket.io每秒广播一次(Using node.js and socket.io to broadcast every second)

对于计时器值,请在服务器端本身每秒更新本地计时器。 每当有任何用户进来时,给他这个值以及计时器的总值。 然后客户端将根据dandavis评论在本地启动自己的计时器,但在服务器端保留一些间隔,如15或10秒,服务器将广播当前计时器值,以便客户端相应地进行同步。 简而言之,服务器将每隔10(n:你决定)秒后广播,但它将在本地每秒更新定时器变量。 每当客户端进入时,它将获得总计时器值和当前计时器值。 广播当前出价的休息功能可以以正常方式完成。 For timer value, keep updatin

如何让XMLSerializer将命名空间添加到嵌套对象中的属性?(How do I get the XMLSerializer to add namespaces to attributes in nested objects?)

IXmlSerializable也许? 注意我还添加了(对A ): [XmlElement("A", Namespace = "http://www.example.com/namespace")] public TestSoapHeaderTypeValuePair A {...} 代码如下: public class TestSoapHeaderTypeValuePair : IXmlSerializable { private string _type; private