Cloning a section of a form?

[joe]

How do you properly clone a section of a form?  I need to clone the "section" dynamically and then populate it with data from a database.  I need to be able to assign incremental ids to all cloned fields/sections.

Here is how I declare the form:

Code:

<form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <section id="userInfo">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
            </div>
            </section>
        </form>

[qianet]

For reference only:

function AddXiangLine()
{
   var count=parseInt($("#XiangCodeCount").val());
   var rowID=parseInt(count/3)+1;
   var format=" <input id=\"BKC_XiangCodeThisNo\" name=\"BKC_XiangCodeThisNo\" " +
              " class=\"easyui-combobox\" "+
              " data-options=\"editable:false,label:'Contianer Type',labelAlign:'right',labelWidth:80,width:'18%',required:false,height:32,valueField:'USER_DEFINED_TYPE',textField:'USER_DEFINED_TYPE',value:''\"/>"+
              " <input id=\"BKC_XiangCountThisNo\" name=\"BKC_XiangCountThisNo\" "+
              " class=\"easyui-numberspinner\" "+
              " data-options=\"label:'Container Count',labelAlign:'right',labelWidth:40,width:'14%',height:30,editable:true,required:true,value:0,min:0,max:999\"/>";
   var outStr=[];
   outStr.push("<div class=\"row\" id=\"div_"+rowID+"\">");
   outStr.push(myString.replace(format,"ThisNo",count+1));
   var str2=myString.replace(format,"ThisNo",count+2);
   str2=myString.replace(str2,"labelWidth:80","labelWidth:87");
   outStr.push(str2);

   var str3=myString.replace(format,"ThisNo",count+3);
   str3=myString.replace(str3,"labelWidth:80","labelWidth:95");
   outStr.push(str3);
   outStr.push("</div>")
   $("#XiangCodeRow1").after(outStr.join("\n"));
   //解析easyui组件
   $.parser.parse("#div_"+rowID);

   //Fill Container Type Data
   var data=$("#BKC_XiangCode1").combobox("getData");
   data.push({USER_DEFINED_TYPE:""});
   if(data.length>0)
   {
      $("#BKC_XiangCode"+(count+1)).combobox("loadData",data);
      $("#BKC_XiangCode"+(count+1)).combobox("setText","=Select=");
      $("#BKC_XiangCode"+(count+2)).combobox("loadData",data);
      $("#BKC_XiangCode"+(count+2)).combobox("setText","=Select=");
      $("#BKC_XiangCode"+(count+3)).combobox("loadData",data);
      $("#BKC_XiangCode"+(count+3)).combobox("setText","=Select=");
   }
   $("#XiangCodeCount").val(count+3);
   $("#delXiangBtn").linkbutton('enable');
}