How to pass the radio button value which is clicked to controller?

StackOverflow https://stackoverflow.com/questions/21994444

Question

I am using Spring MVC controller.

Below is my JSP code in which it will show three radio button. One is Insert, second radio button is Update and third radio button is Delete.

Once I click Insert radio button, it show two text box next to Insert radio button, and same thing with other two radio button.

<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>

Now what I am trying to do is as soon as I click on Insert radio button, it will show me two textbox next to Insert radio button. And after putting some values inside those two text box, I press submit button on the form. And then it goes to testOperations method in which name field has these many things -

insert,update,delete

How can I force it to have only one field which I am clicking only? Meaing if I am clickign insert radio button, then name variable should have insert value? Below is my method - 

   @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;
    }

Meaning, Suppose I click Insert radio button and type Hello in the first text and World in the second text box, then I will hit the submit button, and after that I should see insert value in the name variable and hello value in the node variable and world value in the data variable.

And same thing with update and delete.

Is this possible to do?

Was it helpful?

Solution

You have done correct. All you need to do is while click the radio button set the value on name. One hidden variable is enough. Your html part look like this,

  <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>

And in script,

<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>

Hope this helps.

OTHER TIPS

You have inputs with same names, you don't need other hidden. A single node and data inputs are enough This HTML is enough:

<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">

Here is the controller function:

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) {
    //...
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top