I made a simple form with an option of adding one text field dynamically on mouse click. And I will be grateful for suggestions on how I may improve the code.

public class MyController {

public ArrayList<NewField> fieldArrayList;
@RequestMapping(value="/create", method= RequestMethod.GET)
public String myForm(Model model, @ModelAttribute NewField newField) {

    fieldArrayList = new ArrayList<>();
    model.addAttribute("dataForm", new DataForm());

    return "create";

@RequestMapping(value="/create", method=RequestMethod.POST)
public String formSubmit(Model model, HttpServletRequest hsr, @ModelAttribute DataForm dataForm) {

    if (hsr.getParameterValues("lastField") != null) {

        String[] lastF = null;
        lastF = hsr.getParameterValues("lastField");
        List<String> d = Arrays.asList(lastF);

        int count = d.size() + 1;
        for (int i = 2; i < count+1; i++) {
            NewField newField = new NewField();
            String s1 = hsr.getParameter("p_new_" + String.valueOf(i));
            String s2 = hsr.getParameter("l_" + String.valueOf(i));
    model.addAttribute("dataForm", dataForm);
    model.addAttribute("fieldArrayList", fieldArrayList);

    return "view";

<html xmlns:th="http://www.thymeleaf.org">
    <title>Getting Started: Handing Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<form action="#" th:action="@{/create}" th:object="${dataForm}" method="post">
    <p>Id: <input type="text" th:field="*{id}" /></p>
    <p>Name: <input type="text" th:field="*{content}" /></p>
    <script type="text/javascript">
        $(function() {
            var addDiv = $('#addinput');
            var i = $('#addinput p').size() + 1;
            $('#addNew').live('click', function() {
                $('<p><label> ' + document.getElementById('p_new').value + '</label><input type="text" name="p_new_' + i
                        +'"  /><input type="hidden" value="' + document.getElementById('p_new').value
                        + '" name="l_' + i
                        + '" /><input type="hidden" value="' + i + '" name="lastField" /> </p>').appendTo(addDiv);
                return false;
            $('#remNew').live('click', function() {
                if( i > 2 ) {
                return false;
    <div id="addinput">
    <p><input type="submit" value="Submit" /> </p>
<input type="text" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" />
<input type="button" id="addNew" value="Add New field"/>



1 Answer 1

  1. Use interface List instead of concrete class for the fieldArrayList field.
  2. Make the fieldArrayList field private.
  3. @RequestMapping(value="/create", method= RequestMethod.GET). Requests using GET should only retrieve data, not create.
  4. Extract the calls of hsr.getParameterValues and hsr.getParameter methods in separate methods.
  5. Don't use meaningless variable names such as d, s1, s2.
  6. Format code with your IDE. For example, in IDEA you can use the Ctrl+Alt+L hotkey.
  7. Extract attribute and parameter names in constants.
  8. @RequestMapping(value="/create", method=RequestMethod.POST) can be replaced with @PostMapping("/create").

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.