DubFriend / jquery.repeater

Create a repeatable group of input elements
MIT License
392 stars 192 forks source link

Setting indexs in edit form #137

Open delphiassistant opened 4 years ago

delphiassistant commented 4 years ago

I created an edit form based on repeater plugin. When loading form, I created html using server side code (in ASP.NET Core) which looks like this:

<div class="inner-repeater">
 <div data-repeater-list="inner-list">
 <div data-repeater-item>
  
 <div class="form-group">
 <label class="control-label">کالای مورد نظر</label>
 <select class="form-control" id="OrderDetails[0].ProductID" name="OrderDetails[0].ProductID"><option value="1">&#x647;&#x648;&#x6CC;&#x62C;</option>
 <option value="2">&#x6AF;&#x644;&#x627;&#x628;&#x6CC;</option>
 </select>
   </div>
   <div class="form-group">
   <label class="control-label">تعداد کالا</label>
   <input id="OrderDetails[0].ProductCount" name="OrderDetails[0].ProductCount" class="form-control" />
   </div>
   <input data-repeater-delete type="button" value="حذف" />
    
   </div>
   </div>
   </div>
   <hr />
   <div class="inner-repeater">
   <div data-repeater-list="inner-list">
   <div data-repeater-item>
    
   <div class="form-group">
   <label class="control-label">کالای مورد نظر</label>
   <select class="form-control" id="OrderDetails[1].ProductID" name="OrderDetails[1].ProductID"><option value="1">&#x647;&#x648;&#x6CC;&#x62C;</option>
   <option value="2">&#x6AF;&#x644;&#x627;&#x628;&#x6CC;</option>
   </select>
   </div>
   <div class="form-group">
   <label class="control-label">تعداد کالا</label>
   <input id="OrderDetails[1].ProductCount" name="OrderDetails[1].ProductCount" class="form-control" />
   </div>
   <input data-repeater-delete type="button" value="حذف" />
    
   </div>
   </div>
   </div>
   <hr />

As you can see, I set indexes in rendered html manually like: OrderDetails[0].ProductCount OrderDetails[1].ProductCount

Then I added code for activating repeater and it works, but indexes does not start from 2 (since I created 0 and 1 indexes in my rendered html).

Any Ideas?

cawecoy commented 3 years ago

@delphiassistant try this

<div class="inner-repeater">
    <div data-repeater-list="inner-list">
        <div data-repeater-item>

            <div class="form-group">
                <label class="control-label">کالای مورد نظر</label>
                <select class="form-control" id="OrderDetails[0].ProductID" name="OrderDetails[0].ProductID">
                    <option value="1">&#x647;&#x648;&#x6CC;&#x62C;</option>
                    <option value="2">&#x6AF;&#x644;&#x627;&#x628;&#x6CC;</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">تعداد کالا</label>
                <input id="OrderDetails[0].ProductCount" name="OrderDetails[0].ProductCount" class="form-control" />
            </div>
            <input data-repeater-delete type="button" value="حذف" />

        </div>

        <hr />

        <div data-repeater-item>

            <div class="form-group">
                <label class="control-label">کالای مورد نظر</label>
                <select class="form-control" id="OrderDetails[1].ProductID" name="OrderDetails[1].ProductID">
                    <option value="1">&#x647;&#x648;&#x6CC;&#x62C;</option>
                    <option value="2">&#x6AF;&#x644;&#x627;&#x628;&#x6CC;</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">تعداد کالا</label>
                <input id="OrderDetails[1].ProductCount" name="OrderDetails[1].ProductCount" class="form-control" />
            </div>
            <input data-repeater-delete type="button" value="حذف" />

        </div>
    </div>
</div>
<hr />