0

我正在向我的表单动态添加一些输入字段，当我提交表单时，新添加的字段的值为空。

添加字段后，我已经尝试在表单上使用 serialize() ，但没有成功。

我要添加的代码

<div class="row original " id="control-group-1">
    <div class="col-8 pr-0 ">
        <input class="form-control" name="formDates" type="text" placeholder="Date">
    </div>
    <div class="col-2 pl-0">
        <button class="btn btn-success add-more" type="button" data-target="#control-group-1">
            <i class="glyphicon glyphicon-plus"></i> Add
        </button>
    </div>
</div>

我正在复制的代码

<div class="copy d-none">
    <div class="row control-group">
        <div class="col-8 pr-0 ">
            <input class="form-control" name="formDates" type="text"
                   placeholder="Date">
        </div>
        <div class="col-2 pl-0">
            <button class="btn btn-danger remove" type="button"><i
                    class="glyphicon glyphicon-plus"></i> Remove
            </button>
        </div>
    </div>
</div>

我是如何复制它的。

    $(function() {
       $(".add-more").click(function(){
           var html = $(".copy").html();
           var target = $(this).data('target');
           $(target).after(html);
       });


       $("body").on("click",".remove",function(){
           $(this).parents(".control-group").remove();
       });
    });


$(function() {
  $(".add-more").click(function() {
    var html = $(".copy").html();
    var target = ".original";
    $(target).after(html);
    var some = $('form').serialize();
    console.log(some);
  });


  $("body").on("click", ".remove", function() {
    $(this).parents(".control-group").remove();
     var some = $('form').serialize();
    console.log(some);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form role="form" class="form" th:action="@{'/course/course/newOccurrence/' + ${course.idCourse}}" method="POST" th:object="${newOccurrence}">
  <div class="row">
    <input type="hidden" name="idVenue" th:value="${av.value.idVenue}" />
    <div class="col">
      <input class="form-control" type="text" th:field="*{teacherName}" placeholder="Teacher">
    </div>
    <div class="col">
      <div class="row original " th:id="${'control-group-' + iterStat.index}">
        <div class="col-8 pr-0 ">
          <input class="form-control" name="formDates" type="text" placeholder="Date">
        </div>
        <div class="col-2 pl-0">
          <button class="btn btn-success add-more" th:attr="data-target='#control-group-' + ${iterStat.index}" type="button">
                                                            <i class="glyphicon glyphicon-plus"></i> Add
                                                        </button>
        </div>
      </div>
      <div class="copy d-none">
        <div class="row control-group">
          <div class="col-8 pr-0 ">
            <input class="form-control" name="formDates" type="text" placeholder="Date">
          </div>
          <div class="col-2 pl-0">
            <button class="btn btn-danger remove" type="button"><i
                                                                    class="glyphicon glyphicon-plus"></i> Remove
                                                            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="col"><input class="form-control" type="text" th:field="*{time}" placeholder="Time"></div>
    <div class="col"><input class="form-control" type="text" th:field="*{active}" placeholder="Active"></div>
    <div class="col-md-auto"><input class="btn btn-primary" value="Add" type="submit"></div>
  </div>
</form>

我假设我缺少将输入绑定到表单的一些步骤，但是在我的请求中，我清楚地看到我有 N 个对象，但是动态生成的对象没有价值。我想知道除了使用 jquery 发送发布请求之外是否有解决方案？我也在使用百里香。

4

2 回答 2

0

我认为您应该添加[]到输入的名称，因为它们都具有相同的名称，您在提交时只能获得第一个值。或者，如果您使用的是 jQuery ajax 而不是正常提交​​，您可以将值存储在数组中并像这样发送：

$(function() {
  $(".add-more").click(function() {
    var html = $(".copy").html();
    var target = $(this).data('target');
    $(target).after(html);
  });


  $("body").on("click", ".remove", function() {
    $(this).parents(".control-group").remove();
  });
});

$('#submitButton').on('click', function() {
  var formDates = [];
  $('[name="formDates[]"]').each(function() {
    if($(this).val() !== ''){
      formDates.push($(this).val());
    }
  });
  console.log(formDates);
  // Send the ajax request here ..
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row original " id="control-group-1">
  <div class="col-8 pr-0 ">
    <input class="form-control" name="formDates[]" type="text" placeholder="Date">
  </div>
  <div class="col-2 pl-0">
    <button class="btn btn-success add-more" type="button" data-target="#control-group-1">
            <i class="glyphicon glyphicon-plus"></i> Add
        </button>
  </div>
</div>

<div class="copy d-none">
  <div class="row control-group">
    <div class="col-8 pr-0 ">
      <input class="form-control" name="formDates[]" type="text" placeholder="Date">
    </div>
    <div class="col-2 pl-0">
      <button class="btn btn-danger remove" type="button"><i
                    class="glyphicon glyphicon-plus"></i> Remove
            </button>
    </div>
  </div>
</div>

<div class="col-12 text-center" style="margin-top: 20px;">
  <button class="btn btn-primary" type="btn" id="submitButton">Submit</button>
</div>

希望这可以帮助。

于 2019-08-29T08:26:20.413 回答
0

我已经设法使用 Thymeleaf 实现了这一点，我使用了他们的动态字段功能我相信问题是由于表单是在服务器端生成的这一事实造成的。谢谢大家的回答！

于 2019-08-30T14:53:36.373 回答