Question

我希望使用Jquery（Java，Spring-Data Server端）回发。我希望在客户端使用动态输入字段时传回多个对象。服务器端服务可以将多个TimeOffRequests保存为可Itterable List。但是，由于有2个输入字段绑定到对象，我正在努力正确地格式化数据。目前将返回数组中的4个对象vs 2任何帮助将不胜感激

HTML：

<div class="widget-body no-padding">
    <div class="smart-form">
        <fieldset>
            <div id = wrapper>
                <div class="row" id="addInput" >
                    <section class="col col-4">
                        <label class="input"> <i class="icon-append fa fa-calendar"></i>
                            <input type="date"  name="startDate" id="startDate" placeholder="Request Date" class="hasDatepicker">
                        </label>
                    </section>
                    <section class="col col-2">
                        <label class="input"><i class="icon-append fa fa-clock-o"></i>
                            <input min="0" max="8" type="number" name="hour" id="hour" placeholder="Hours">
                        </label>
                    </section>
                    <section class="col col-2">
                        <a id="addField" title="Add More Fields" class="btn btn-primary" onclick="addInput('wrapper');">&nbsp;+&nbsp;</a>
                    </section>
                </div>
            </div>

            <section>
                <label class="textarea"> <i class="icon-append fa fa-comment"></i>
                    <textarea rows="5" name="comment" placeholder="Notes"></textarea>
                </label>
            </section>
        </fieldset>
        <footer>
            <button onclick="submitTimeOffRequest()" class="btn btn-primary">
                Submit
            </button>
        </footer>
    </div>

JS提交

function submitTimeOffRequest(){    
     var timeoffRequests = [];

     $("input[class = ptoDate ]").each(function () {
         var date = $(this).val();

         $("input[class= ptoHours]").each(function () {
             var hours = $(this).val();

             item = {};
             item ["date"] = date;
             item ["hours"] = hours;

             timeoffRequests.push(item);
         });
     });

     $.ajax({
         contentType: 'application/json',
         type: "post",
         data: JSON.stringify(timeOffRequests),
         url: "/api/timeoff/" + masterEngId,
         async: true,
         dataType: "json",
         success: function() {
             location.reload(true);
         },
         error: function(){

         }
    })}
}

JS动态添加输入字段

var counter = 1;
function addInput(divName) {
var dateIdString = "startDate" + counter;
var hourIdString = "hour" + counter;
console.log(dateIdString);

    var newdiv = document.createElement('div');
    newdiv.innerHTML = "<div class='row'>" +
        "<section class='col col-4'> " +
        "<label class='input'><i class='icon-append fa fa-calender'>" +
        "</i> <input class = 'ptoDate' type='date' name="+dateIdString+" id="+dateIdString+"  placeholder='Request Date'</input> " +
        "</label> " +
        "</section>" +
        "<section class='col col-2'>" +
        "<label class='input'><i class='icon-append fa fa-clock-o'></i>" +
        "<input type='number' class='ptoHours' name="+hourIdString+" id="+hourIdString+" placeholder='Hours'>" +
        "</label>" +
        "</section>" +
        "<section class='col col-2'><a id='removeField' title='Remove Field' class='btn btn-danger' onclick='removeDiv()'>&nbsp;x&nbsp;</a> " +
        "</section> " +
        "</div>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
}

使用jquery，动态字段输入

0 个答案: