在 html 表單中動態增加名稱屬性？

Question

我正在嘗試使用動態創建的表單將多個數據發送到數據庫，當我點擊添加按鈕時，該表單會添加新字段。 我已經完成了大部分項目，但是要將數據發送到 controller，我需要動態地增加我無法執行的 name 屬性。 我是 spring 和 Jquery 的新手。 目前我只能發送索引為 0 和 1 的兩個數組對象。

這是我的 html 表格

<script>
    $(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //add more fields group
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});
</script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
    
  <a class="navbar-brand" th:href="@{/}" href="#">
  <img src="" class="logo" th:src="@{/image/logo.png}" alt="logo">
  Assam Power Distribution Company Limited</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
   
  </div>
</nav>

<form method="post" th:action="@{/addfeeder}" th:object="${feeder}">
            
    <div class="form-group fieldGroup" >
        <div class="input-group mt-1 p-1 bg-light">
            <input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
  <select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
    <option selected>Choose Capacity</option>
    <option value="11">11</option>
    <option value="33">33</option>
  </select>
          
            <input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers"/>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
            </div>
        </div>
    </div>
    
    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
    
</form>


<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group mt-1 p-1 bg-light">
        <input type="text" name="feeder[1].feeder_name" class="form-control" placeholder="Enter Feeder name"/>
        <select name="feeder[1].feeder_type" class="custom-select" id="inputGroupSelect01">
    <option selected>Choose Capacity</option>
    <option value="11">11</option>
    <option value="33">33</option>
  </select>
        
        <input type="text" name="feeder[1].no_of_consumer_in_the_feeder" class="form-control" placeholder="Enter Consumers"/>
        <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>

這是我的 controller


    //adding feeder details
    @PostMapping("/addfeeder")
    public String addFeeder(@ModelAttribute FeederList feederlist)
    {

        System.out.println("Data"+feederlist);
        
        System.out.println(feederlist.getFeeder().size());
        
        for(Feeder c:feederlist.getFeeder())
               System.out.println(c);
        return "feeder";
        
        
    }
    
    public class FeederList {
        private List<Feeder> feeder=new ArrayList<>();

        public List<Feeder> getFeeder() {
            
             return feeder;
        }

        public void setFeeder(List<Feeder> feeder) {
             this.feeder = feeder;
        }

}

Answer 1

在頁面加載時使用clone()來制作第一組的副本。 添加新的時，我們會復制存儲的另一個
為組創建一個包裝容器，使其更簡單 append 到
創建了在添加或刪除行時調用的 function adjustNames() 。 刪除過程會丟棄跟隨它的名稱的索引，因此對於 go 來說似乎是最安全的。 您可以看到文本輸入名稱設置為它們的值，以便在開發中進行驗證

todo：如果刪除所有行然后添加一個錯誤。 如果只剩下一個，也許會阻止刪除

 //group add limit var maxGroup = 5; var $groupContain = $('#group-container'); // clone first group var $groupCopy = $groupContain.find('.fieldGroup').first().clone(); $groupCopy.find(':input').val('') // clear any values if prepopulated //add more fields group $(".addMore").click(function() { var groupLen = $groupContain.find('.fieldGroup').length if (groupLen < maxGroup) { var $newGroup = $groupCopy.clone(); $groupContain.append($newGroup); adjustNames() } else { alert('Maximum ' + maxGroup + ' groups are allowed.'); } }); function adjustNames(){ // clear console for demo $groupContain.find('.fieldGroup').each(function(i){ var $inputs = $(this).find(':input[name]'); // uses the group index to update array names $inputs.attr('name', function(j, currName) { return currName.replace(/\[\d+\]/, `[${i}]`); }); // for demo set names in text fields $inputs.filter(':text').val(function(){ return this.name; }); }); } //remove fields group $("body").on("click", ".remove", function() { $(this).parents(".fieldGroup").remove(); adjustNames() });

 a{display:inline-block;padding:10px; font-size:1.2em}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" th:action="@{/addfeeder}" th:object="${feeder}"> <div id="group-container"> <div class="form-group fieldGroup"> <div class="input-group mt-1 p-1 bg-light"> <input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" /> <select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01"> <option selected>Choose Capacity</option> <option value="11">11</option> <option value="33">33</option> </select> <input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers" /> <button class="remove"> Remove </button> </div> </div> </div> <div class="input-group-addon"> <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a> </div> </div> <!--<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />--> </form>

在 html 表單中動態增加名稱屬性？

問題描述

1 個解決方案

解決方案1
0 已采納 2021-04-17 22:26:57

在 html 表單中動態增加名稱屬性？

問題描述

1 個解決方案

解決方案1 0 已采納 2021-04-17 22:26:57

解決方案1
0 已采納 2021-04-17 22:26:57