2014-10-16 77 views
0

我可以在其他表單標籤中寫入表單標籤嗎?其實我的要求是實現文件上傳。在這裏,我們使用下劃線js模板,我們將所有項目保存爲一個表單。 添加表單中的上傳代碼後,我無法完成文件上傳功能。請看下面的代碼我的代碼。我可以在其他表單標籤中寫入表單標籤嗎?

<script type="text/template"><div class="container"></br></br> 
<% _.each(forms, function(form){ %> 
<form id="<%= formId(form) %>" name="<%= formCaption(form) %>"> 
    <%_.each(form.layout.grid, function(grid){ 
     _.each(grid.columns, function(column){ 
      var dcLayoutInfo = dataControlLayoutInfo(column); 
      var dcInfo = dataControlInfo(form.datacontrols,dcLayoutInfo.datacontrol); 
      var datacontrols = formDatacontrols(form) 
      _.each(datacontrols, function(datacontrol){ 
       if(dcInfo.id == datacontrol.id){%> 
        <div class="form-group"><div class="row datacontrol" id="<%=datacontrolId(datacontrol)%>"> 
        <% _.each(datacontrol.layout.grid, function(grid){ 
        _.each(grid.columns, function(column){ 
          var datatypes = datacontrolDatatypes(datacontrol); 
          var datatypeLayoutInfo = dataTypeLayoutInfo(column); 
          var datatypeInfo = dataTypeInfo(datatypes,datatypeLayoutInfo.datatype); 
         if("label" == datatypeInfo.dataType){ %> 
          <div class="col-sm-2" ><label class="input-sm control-label lableId" id="<%= datatypeInfo.id %>" data-type="label"><%=datatypeInfo.caption%></label></div> 
         <%}else if("text" == datatypeInfo.dataType){%> 
          <!--div class="col-sm-8 p-r-0"><input id="<%= datatypeInfo.id %>" class="form-control input-sm selected datatype" type="<%= datatypeInfo.type %>" data-type="text"/></div--> 
          <div class="col-sm-5"><input id="<%= datatypeInfo.id %>" type="<%= datatypeInfo.type %>" class="form-control input-sm selected datatype" data-type="text"></div> 
         <%}else if("progress" == datatypeInfo.dataType){%> 
          <!--div class="col-sm-10"><div class="progress slider"><div id="<%= datatypeInfo.id %>" class="progress-bar datatype" data-type="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%"/> 
          </div></div>--> 
         <div class="col-md-5 m-t-4"><div class="slider-container"><input id="<%= datatypeInfo.id %>" type="<%= datatypeInfo.type %>" class="input-slider datatype" data-slider-min="-20" data-slider-max="150" data-slider-value="0" data-type="progress"></div></div> 
         <!--date control --> 
         <%}else if("datepicker" == datatypeInfo.dataType && datatypeInfo.range==false){%> 
          <div class="col-sm-1 m-b-15 m-r-5"><div class="input-icon datetime-pick date-only"><input placeholder="MM/DD/YYYY" type="<%= datatypeInfo.type %>" class="form-control input-sm datatype" id="<%= datatypeInfo.id %>" data-type="datepicker" range="<%= datatypeInfo.range %>"> 
            <span class="add-on-right "><i class="fa fa-calendar"></i></span></div></div><div class="col-sm-1 m-b-15"> 
             <div class="input-icon datetime-pick time-only"><input placeholder="HH:MM" type="<%= datatypeInfo.type %>" class="form-control input-sm datatype" data-format="hh:mm:ss" id="<%= datatypeInfo.id %>"> 
          <span class="add-on-right "><i class="fa fa-clock-o"></i></span></div></div> 
         <%}else if("datepicker" == datatypeInfo.dataType && datatypeInfo.range==true){%> 
         <div class="col-sm-1 m-b-15 m-r-5"><div class="input-icon datetime-pick date-only"> 
          <input placeholder="MM/DD/YYYY" type="<%= datatypeInfo.type %>" class="form-control input-sm datatype" id="<%= datatypeInfo.id %>" data-type="datepicker" range="<%= datatypeInfo.range %>"> 
           <span class="add-on-right "><i class="fa fa-calendar"></i></span></div></div><div class="col-sm-1 m-b-15"> 
            <div class="input-icon datetime-pick time-only"><input placeholder="HH:MM" type="<%= datatypeInfo.type %>" class="form-control input-sm" data-format="hh:mm:ss" id="<%= datatypeInfo.id %>"> 
           <span class="add-on-right "><i class="fa fa-clock-o"></i></span></div></div> 
          <div><span class="add-on-right pull-left"><i class="fa fa-minus p-t-10"></i></span></div><div class="col-sm-1 m-b-15 pull-left"> 
         <div class="input-icon datetime-pick date-only"><input placeholder="MM/DD/YYYY" type="<%= datatypeInfo.type %>" class="form-control input-sm enddate" id="<%= datatypeInfo.id %>" data-type="datepicker"> 
          <span class="add-on-right "><i class="fa fa-calendar" id="calendar"></i></span></div></div> 
           <div class="col-sm-1 m-b-15"><div class="input-icon datetime-pick time-only"><input placeholder="HH:MM" type="<%= datatypeInfo.type %>" class="form-control input-sm " data-format="hh:mm:ss" id="<%= datatypeInfo.id %>"> 
         <span class="add-on-right"><i class="fa fa-clock-o"></i></span></div></div> 
         <!--category control -->  
         <%}else if("category" == datatypeInfo.dataType){%> 
          <div class="btn-group datatype" id="<%= datatypeInfo.id %>" data-type="category"> 
           <% _.each(datatypeInfo.values, function(categoryObj){ %> 
            <li class="onselectedCategory btn btn-gr-gray btn-sm m-r-20 ctg" data-id="<%= categoryObj.value %>"><%= categoryObj.value %></li> 
           <% }); %>         
          </div> 
         <!--contact control --> 
         <%}else if("contactpicker" == datatypeInfo.dataType){%> 
          <div class="col-md-10"><div class="input-group"><span class="input-group-addon"><i class="fa fa-user"></i></span><input type="<%= datatypeInfo.type %>" class="form-control datatype" id="<%= datatypeInfo.id %>" name="<%= datatypeInfo.id %>" data-type="text"/><span class="input-group-addon"><i class="fa fa-book"></i></span></div></div> 
         <!--category list control --> 
         <%}else if("fieldset" == datatypeInfo.dataType){%> 
          <div class="col-md-5"><div class="container datatype" data-type="fieldset" id="<%= datatypeInfo.id %>"> 
          <select type="<%= datatypeInfo.type %>" class="form-control multiselect btn-group" id="categoryList" style="width: 400px;" multiple="multiple"> 
           <% _.each(datatypeInfo.values, function(categoryObj){ %> 
            <optgroup> 
             <option value="<%= datatypeInfo.values %>"><%= categoryObj.value %></option> 
            </optgroup> 
           <% }); %> 
           </select> 
          </div> 
         </div> 
        <%}else if("file" == datatypeInfo.dataType){%> 
         <div class="col-sm-9 fileupload fileupload-new input-icon selected datatype" id="<%= datatypeInfo.id %>" data-provides="fileupload" data-type="file"> 
          <form id="upload" name="upload" action="api/v1/resources" method="POST" type="<%= datatypeInfo.type %>" enctype="multipart/form-data"> 
           <span class="btn btn-file btn-sm btn-alt"> 
            <span class="fileupload-new p-l-15">Add Image...</span> 
             <span class="fileupload-exists p-l-15">Change</span> 
            <input id="file" type="file" name="file"/><br> 
           <input id="json" type="hidden" name="json"> 
          <span class="add-on p-t-0"> 
         <i class="icon"><b>&#61697;</b></i> 
        </span> 
       </span> 
        <span class="fileupload-preview"></span> 
         <a href="#" class="close close-pic fileupload-exists" data-dismiss="fileupload"> 
    </a> 
<button type="submit" class="btn btn-sm submit" id="imageUpload">Upload</button> 
</form> 
    <div id="message"></div> 
     <div id="resource"></div> 
    </div> 
    <%}}); 
    });%> 
</div></div> 
    <%}  
}); 
    }); 
}); 
});%> 
</br> 
<div class="row"> 
    <div class="col-md-2"> 
    </div> 
    <div class="col-md-10"> 
     <div align="center"> 
     <button type="submit" class="btn btn-primary" id="itemSave"><i class="fa fa-check"/> Submit</button> 
      &nbsp;&nbsp;&nbsp;&nbsp; 
     <button id="cancel" type="submit" class="btn btn-primary backToRecodDetails"><i class="fa fa-times"/> Cancel</button> 
     <div> 
    </div> 
    </div> 
    <input id="hidden_appid" type="hidden" value= "<%=id%>" data-appname="<%=caption%>"> 
    <input id="hidden_spaceid" type="hidden" value= "<%=spaceId%>"> 
</form>  

+1

不可以嵌套表單。這是在規範中。爲什麼你想要巢形式? #爲什麼? – 2014-10-16 13:12:52

+0

在我的案例中,設計師可以使用數據控件以自己的方式設計頁面。所以這裏的文件上傳也是數據控制之一。所有的數據控件都是相同的形式。我們在服務器端和客戶端使用下劃線js模板,主幹和牽線木結構js框架來使用rest api。 – user3222441 2014-10-16 13:33:46

回答

4

號不能嵌套形式。它在the specification

內容模型:流內容,但沒有表單元素後代。

+0

應該是一個評論 – 2014-10-16 13:12:24

+4

@jQueryAngryBird沒有。答案應該是答案。 – MikeSmithDev 2014-10-16 13:12:48

+0

+1擊敗我吧 – 2014-10-16 13:13:22