0

我是 Web 开发的新手，学习最多的是“我继续”。我在服务器端使用 Spring-MVC，在客户端使用 JSP、JQuery 和 CSS。到目前为止，我有一个简单的页面，其中包含 2 个时间选择器（jquery），<div>s每个列表包含项目数据和一个复选框。当单击提交按钮时，整个数据以表单形式提交并@RequestParam-s以我的Controller. 在我的下一步中，我希望每个<div>都具有一个复选框的功能：我实现了一个toggle更改<div>背景并收集相关 ID 的功能。现在我的问题是如何将这些数据提交到服务器（时间选择器和 ID 数组）？我需要构建一个JSON对象并提交它吗？我可以举一个例子来说明如何从toggle功能和时间从input element？
这是我的 html 中的一个片段：

<div class="container" >
    <label class="TimeLabel" >Start:</label>
    <input type="text" style="width: 3em;" id="timepicker_start" name="timepicker_start" value="09:00" />
    <label class="TimeLabel">End:</label>
    <input type="text" style="width: 3em;" id="timepicker_end" name="timepicker_end" value="18:00" />
<div/>
...
<!-- item only list -->     
<div class="container">
  <ul class="plainList">
    <c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">            
      <li>
        <div class="inner">
          <img src="resources/images/${item.id}.png">           
          <ul class="plainList">             
            <li><h4>${item.title} &trade;</h4></li>              
            <li><h5>${item.description}</h5></li>            
          </ul>              
          <div style="clear: both"></div>           
        </div>           
      </li>         
    </c:forEach>      
  </ul>     
</div>

和我的功能：

    <script type="text/javascript">
    var count = 0;
    var attrIds = new Array();
    $(function() {
        $(".inner").toggle(function() {
            $(this).css("background", "#2E8B57");
            attrIds.push(this.id);
            count++;
            $("section").find("#attrCount").text(count);
        }, function() {
            $(this).css("background", "#dcdcdc");
            attrIds.splice($.inArray(this.id, attrIds),1);
            count--;
            $("section").find("#attrCount").text(count);
        });
    });
</script>
4

1 回答 1

0

好的，所以我所做的是创建了一个隐藏元素：

        <script type="text/javascript">
    $(document).ready(function() {
        var hidden = document.createElement("input");
        hidden.type = "hidden";
        hidden.name = "itemsIds";
        hidden.id = "itemsIds";
        document.forms[0].appendChild(hidden);
    });
</script>

在我的Toggle函数中，我添加了：

            var hid = document.getElementById("itemsIds");
        hid.value = attrIdsArr;

现在，当我提交表单时，itemsIds提交。如果有人对我的解决方案及其效率有任何意见，我很乐意得到他们。

于 2012-06-10T09:23:41.710 回答