将多个单选按钮与单个文本框相关联

Question

我不擅长前端，HTML 是我最想在这里工作的（如果我可以避免在这里参与 js/jquery）。我有一个带有多个单选按钮的文本框 - 例如，item1、item2、...item5。每个 item1, 2... 对应一个字段。例如，当用户在文本框中输入 'abc' 和 selects 'item3' 时，它应该 return 在 item3 字段中具有 'abc' 的所有项目。我可以为每个项目 1、2.. 使用单独的文本框来做到这一点，但我只需要一个与所有单选字段关联的文本框。

这是相关的 html/template 代码。

    <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'。而我 select item5。 Returns MultiValueDictKeyError Get 数据为

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

。 name 是数据库中的字段之一，item5 应该对应于它。同样，如果我将文本框名称更改为 'item1'，则 Get 数据为

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

我有一个专门的 view 来处理所有无线电输入，它与每个项目对应的单独文本框一起工作。但是我需要将所有 5 个单选按钮与上面的 1 个文本框相关联。

Answer 1

根本不需要 "associate" 带有文本框的按钮。

您缺少的是每个单选按钮本身都需要一个 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'} 或其他。

Answer 2

谢谢大家。我自己从后端解决了它。问题是我试图让请求只发送带有 key=whatever-radio-is-selected 的文本值。我所做的是查看它发送的请求是 name=?和文本框=？然后使用这两个键发送正确的响应。

将多个单选按钮与单个文本框相关联

Associate multiple radio buttons with a single textbox

html

django

textbox

radio-button