如何将单击的单选按钮值传递给控制器？答案

【问题标题】：How to pass the radio button value which is clicked to controller?如何将单击的单选按钮值传递给控制器？
【发布时间】：2014-03-26 12:14:32
【问题描述】：

我正在使用 Spring MVC 控制器。

下面是我的 JSP 代码，它将显示三个单选按钮。一个是Insert，第二个单选按钮是Update，第三个单选按钮是Delete。

一旦我点击Insert单选按钮，它会在插入单选按钮旁边显示两个文本框，与其他两个单选按钮相同。

<script type="text/javascript">
    function doDisplay(radio) {
        switch (radio.value) {
        case "Insert":
            document.getElementById("inserts").style.display = "inline";
            document.getElementById("updates").style.display = "none";
            document.getElementById("delete").style.display = "none";
            break;
        case "Update":
            document.getElementById("inserts").style.display = "none";
            document.getElementById("updates").style.display = "inline";
            document.getElementById("delete").style.display = "none";
            break;
        case "Delete":
            document.getElementById("inserts").style.display = "none";
            document.getElementById("updates").style.display = "none";
            document.getElementById("delete").style.display = "inline";
            break;
        }
    }
</script>
<body>
    <form method="post" action="testOperation">

        <input type="radio" name="tt" value="Insert"
            onclick="doDisplay(this);" /> Insert <input type="hidden" name="name" value="insert"><span id="inserts"
            style="display: none"> <label for="Node"> Node </label> <input
            type="text" name="node" size="20" /> <label for="Data"> Data </label>
            <input type="text" name="data" size="100" />

        </span> <br /> <input type="radio" name="tt" value="Update"
            onclick="doDisplay(this);" /> Update <input type="hidden" name="name" value="update"> <span id="updates"
            style="display: none"> <label for="Node"> Node </label> <input
            type="text" name="node" size="20" /> <label for="Data"> Data </label>
            <input type="text" name="data" size="100"/>

        </span> <br /> <input type="radio" name="tt" value="Delete"
            onclick="doDisplay(this);" /> Delete <input type="hidden" name="name" value="delete"><span id="delete"
            style="display: none"> <label for="Node"> Node </label> <input
            type="text" name="node" size="20" /> <label for="Data"> Data </label>
            <input type="text" name="data" size="100"/>

        </span> <br />
        <input type="submit">
    </form>

现在我要做的是，只要我点击Insert 单选按钮，它就会在Insert 单选按钮旁边显示两个文本框。在这两个文本框中输入一些值后，我按下表单上的提交按钮。然后转到testOperations 方法，其中name 字段有这么多东西 -

insert,update,delete

如何强制它只有一个我只点击的字段？ Meaing 如果我单击插入单选按钮，那么名称变量应该具有插入值吗？以下是我的方法 -

   @RequestMapping(value = "testOperation", method = RequestMethod.GET)
    public Map<String, String> testOperation() {
        final Map<String, String> model = new LinkedHashMap<String, String>();
        return model;
    }

    @RequestMapping(value = "testOperation", method = RequestMethod.POST)
    public Map<String, String> testOperations(@RequestParam String name, 
                                              @RequestParam String node, 
                                              @RequestParam String data) {
        final Map<String, String> model = new LinkedHashMap<String, String>();

        System.out.println(name);
        System.out.println(node);
        System.out.println(data);

        return model;
    }

意思是，假设我点击插入单选按钮并在第一个文本中输入Hello，在第二个文本框中输入World，然后我将点击提交按钮，然后我应该在name 变量和node 变量中的hello 值和data 变量中的world 值。

更新和删除也是如此。

这可能吗？

【问题讨论】：

标签： java spring jsp spring-mvc radio-button

【解决方案1】：

您有相同名称的输入，不需要其他隐藏。单个节点和数据输入就足够了这个 HTML 就够了：

<input type="radio" name="tt" value="Insert" onclick="doDisplay(this);" /> Insert<br/>
<input type="radio" name="tt" value="Update" onclick="doDisplay(this);" /> Update<br/>
<input type="radio" name="tt" value="Delete" onclick="doDisplay(this);" /> Delete<br/>
<label for="Node"> Node </label> <input type="text" name="node" size="20" /><br/>
<label for="Data"> Data </label> <input type="text" name="data" size="100"/><br/>
<input type="submit">

这里是控制器功能：

public Map<String, String> testOperations(
        @RequestParam(value="tt", required=false) String name,
        @RequestParam(value="node", required=false) String node,
        @RequestParam(value="data", required=false) String data) {
    //...
}

【讨论】：

【解决方案2】：

你做对了。您需要做的就是在单击单选按钮时设置名称的值。一个隐藏变量就足够了。你的 html 部分看起来像这样，

  <form method="post" action="testOperation">
  <!-- I used only one hidden box to store value -->
  <input type="hidden" name="name" id="dynamicName">

    <input type="radio" name="tt" value="Insert"
        onclick="doDisplay(this);" /> Insert <span id="inserts"
        style="display: none"> <label for="Node"> Node </label> <input
        type="text" name="node" size="20" /> <label for="Data"> Data </label>
        <input type="text" name="data" size="100" />

    </span> <br /> <input type="radio" name="tt" value="Update"
        onclick="doDisplay(this);" /> Update <span id="updates"
        style="display: none"> <label for="Node"> Node </label> <input
        type="text" name="node" size="20" /> <label for="Data"> Data </label>
        <input type="text" name="data" size="100"/>

    </span> <br /> <input type="radio" name="tt" value="Delete"
        onclick="doDisplay(this);" /> Delete <span id="delete"
        style="display: none"> <label for="Node"> Node </label> <input
        type="text" name="node" size="20" /> <label for="Data"> Data </label>
        <input type="text" name="data" size="100"/>

    </span> <br />
    <input type="submit">
</form>

在脚本中，

<script type="text/javascript">
function doDisplay(radio) {
    switch (radio.value) {
    case "Insert":
        document.getElementById("inserts").style.display = "inline";
        document.getElementById("updates").style.display = "none";
        document.getElementById("delete").style.display = "none";
        document.getElementById("dynamicName").value = "insert";
        break;
    case "Update":
        document.getElementById("inserts").style.display = "none";
        document.getElementById("updates").style.display = "inline";
        document.getElementById("delete").style.display = "none";
        document.getElementById("dynamicName").value = "update";
        break;
    case "Delete":
        document.getElementById("inserts").style.display = "none";
        document.getElementById("updates").style.display = "none";
        document.getElementById("delete").style.display = "inline";
        document.getElementById("dynamicName").value = "delete";
        break;
    }
}
</script>

希望这会有所帮助。

【讨论】：

感谢 Vinoth。我对 html 部分有点困惑，你能提供我应该使用的完整 html 吗？我不确定我应该在哪里使用这个隐藏的输入？而且我看到的是在我的node 变量中，如果我在仅插入文本框中输入值，则值将以逗号aw,, 出现..