如何传递单击控制器的单选按钮值?

时间:2014-02-24 17:17:10

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

我正在使用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

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

   @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,然后我将点击提交按钮,之后我应该看到{{ 1}} insert变量中的值和name变量中的hello值以及node变量中的world值。

与更新和删除相同。

这可能吗?

2 个答案:

答案 0 :(得分:0)

您输入的名称相同,不需要其他隐藏。单个节点和数据输入就足够了 这个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) {
    //...
}

答案 1 :(得分:0)

你做得对。您只需单击单选按钮设置名称上的值即可。一个隐藏的变量就足够了。你的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>

希望这有帮助。