Как я могу отправить массив значений из входов в контроллер

Question

У меня есть несколько входов в форме, созданных динамически, и я пытаюсь отправить их на контроллер в виде массива, используя javascript.

Первоначально это было только одно значение, и оно было частью сущности, которую я передаю в модели. Затем, поскольку их может быть больше одного, я добавил поле Transient к объекту в виде списка, а также создал другой класс в Java, используя только список. Тем не менее, я до сих пор не знаю, как добавить эти значения из JavaScript в th: объект в форме.

<form id="selectform" th:object="${systemIdListForm}" th:action="@{/myController}" method="get">
    <div class="box-body">
        <label>System Id:</label>
        <div id="fields">
            <div class="form-group col-md-1">
                <input class="form-control" name ="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/>
            </div>
        </div>
        <a id="addMore" href="#"><i class="fa  fa-plus"></i><span>Add</span></a>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary">Select</button>
    </div>
</form>



<script  type="text/javascript">
/*<![CDATA[*/
 $(document).ready(function () {
     $("#addMore").click(function() {
     var html = '<div class="form-group col-md-1"><input class="form-control" name="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/></div>';
     $('#fields').append(html);
     });

     $("#selectform").submit(function(){
         var values = $(this).serialize();
     });
 });
/*]]>*/
</script>

В данный момент я вижу, что значения переменных имеют правильную информацию, но в контроллер ничего не отправляется. Я понимаю, что форматирование этих значений, вероятно, не нужно, но я не уверен, что делать.

Любая помощь очень ценится

Answer 1

Какой тип данных вы использовали в модели? Убедитесь, что вы взяли String [] для этого поля. Если не взято String [], используйте его и дайте мне знать, работает ли оно или нет.

Также вы можете воспользоваться помощью приведенного ниже кода. Это только для вашего случая.

$("#selectform").submit(function (event) {

        // form redirect stop
        event.preventDefault();
        var status = jbf.form.validate('#selectform');
        if (!status) {
            return;
        }


        // get form data
        var data = {};
        data["enrollmentNumber"] = $("#enrollmentNumber").val();
        data["systemIdInput"] = jQuery("#selectform input[name=systemIdInput]").val();

        var url = "/yourURL";

        $.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                var message = response.message;
                //success notification
                if(response.success === true){
                    alert(message);

                }else{
                    error(message);
                }

            },
            error: function (e) {
                console.log("ERROR: ", e);
                error("Add failed");
            }
        });

    });

Answer 2

Мне удалось получить список значений со всех входов в форме, используя скрытый ввод.Я добавил временное поле в моей сущности (systemIds), где у меня есть все значения.

 <form id="selectform" th:object="${myEntiry}" th:action="@{/crops/singlecroplabeloffinsp/list/1}" method="get">

    <input class="form-control" id="systemIdList" th:field="*{systemIds}"  type="hidden"/>

    <div class="box-body">
        <label>System Id:</label>
        <div id="fields">
            <div class="form-group col-md-1">
                <input class="form-control" name ="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/>
            </div>
        </div>
        <a id="addMore" href="#"><i class="fa  fa-plus"></i><span>Add</span></a>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary">Select</button>
    </div>
 </form>

 ...

  $("#selectform").submit(function(){

      //get all the system ids
      var x = document.getElementsByName("systemIdInput");
      var systemIds = [];

      for (i = 0; i < x.length; i++ ) {
          if (x[i].type ='text') {
              systemIds.push(x[i].value);
          }
      }

      $("#systemIdList").val(systemIds);
      this.submit();
  });

Добавлено к объекту с помощью getter и setter:

@Transient
private List<Integer> systemIds;