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?
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.