How to pass textbox value which has the data to spring MVC controller?

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

Question

I am using Spring MVC controller in one of my project.

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

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

<body>

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

Below is Controller code -

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

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 am seeing insert value in the name variable which is good but hello,, value in the node variable and world,, value in the data variable which I don't want.

And same thing with update and delete.

Is there any way to avoid this? Meaning I would like to see only hello value in the node variable and world value in the data variable instead of being separated by comma.?

Can anyone help me with this?

Was it helpful?

Solution

Clicking radio buttons you just hide fields for user, but params are still visible and send via POST request. In spring params with that same names are seen as an array. If you dont want to send multiply params with that same name you should not only hide input but remove it calling following code from jquery

$('#input-id').remove();


Remember that you have also to service adding fields by clicking radio buttons. I found an example how to to it: http://jsfiddle.net/jaredwilli/tZPg4/4/
More info you can find also here Add / remove input field dynamically with jQuery

EDIT
According to your comment i recomend you to use this code http://jsfiddle.net/tFLnd/
It is much more shorter, maybe not the best one because i wrote it just now but do the job
Of course you have to add jQuery to your page to use this code

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top