I am trying to getting flag icon on every edit form of each datatable row have edit button. but unfortunately I can see flag icon only in 1st row of edit form of datatable grid. and in other rows I am not able to see flag icon. Can you help us how can I modified my javascript so I can see flag icon on every edit form of each row of datatable. NOTE : We have code is in Django Python and the variable is in DTL (djnango Template Language) See below screenshot for understanding Image -1 :for Datatable Screenshot here. <a href="https://drive.google.com/file/d/11yeh5yee4Ey4wjuqKU2J24NMALAdV9Fw/view?usp=sharing">image-1.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/11yeh5yee4Ey4wjuqKU2J24NMALAdV9Fw/view?usp=sharing" target="_blank" title="New Window">^</a>] Image -2 : if I click on 1st row of datatable then I can get flags in fields <a href="https://drive.google.com/file/d/1pT1f7576-N5ML53lHXhmvDoYNnrcJmet/view?usp=sharing">image-2.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/1pT1f7576-N5ML53lHXhmvDoYNnrcJmet/view?usp=sharing" target="_blank" title="New Window">^</a>] Image -3 : If I click on second row of datatable then I have not get flags icon in field. <a href="https://drive.google.com/file/d/1OH2J3AmsUzcNEmV5TVRV9tJtpsQUgU1G/view?usp=sharing">image-3.PNG - Google Drive</a>[<a href="https://drive.google.com/file/d/1OH2J3AmsUzcNEmV5TVRV9tJtpsQUgU1G/view?usp=sharing" target="_blank" title="New Window">^</a>]
{% for vr in adduser.adduser.all %} {% csrf_token %} Edit Contact Data ×
<div class="form-row"> <div class="form-group col-md-6"> <label for="FirstName">First Name<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="firstname" id="firstname" placeholder="Type FirstName here...." value="{{vr.f_name}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-6"> <label for="LastName">Last Name<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="lastname" id="lastname" placeholder="Type LastName here...." value="{{vr.l_name}}" required /> </div> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="Address">Address Line1<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="addln1" id="addln1" placeholder="Type Address here...." value="{{vr.add_ln1}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-6"> <label for="Address">Address Line2</label> <input type="text" class="form-control" name="addln2" id="addln2" placeholder="Type Address here...." value="{{vr.add_ln2}}" /> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="Country">City<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="city" id="city" placeholder="Type city here...." required value="{{vr.city}}" /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-4"> <label for="Country">Country<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="country" id="country" placeholder="Type Country here...." value="{{vr.country}}" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-group col-md-4"> <label for="Country">Zip Code<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="zip" id="zip" placeholder="Type zipcode here...." value="{{vr.zip}}" required /> </div> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> <div class="form-row"> <div class="form-group col-md-6 smsForm_edit"> <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label> <input type="tel" class="form-control" name="smsno_edit" id="smsno_edit" value="{{vr.sms_no}}" placeholder="SMS No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid contact no.</div> </div> <div class="form-group col-md-6 whatsappForm_edit"> <label for="contact2">WhatsApp No.<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="whtspno_edit" id="whtspno_edit" value="{{vr.whtsp_no}}" placeholder="WhatsApp No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid contact no.</div> </div> </div> <script> const phoneInputField_edit = document.querySelector("#smsno_edit"); const phoneInputField2_edit = document.querySelector("#whtspno_edit"); const phoneInput_edit = window.intlTelInput(phoneInputField_edit, {}); const phoneInput2_edit = window.intlTelInput(phoneInputField2_edit, {}); $(document).ready(function () { $('.smsForm_edit .iti__flag-container').click(function () { var countryCode = $('.smsForm_edit .iti__selected-flag').attr('title'); var countryCode = countryCode.replace(/[^0-9]/g, ''); $('#smsno_edit').val(""); $('#smsno_edit').val("+" + countryCode + $('#smsno_edit').val()); }); $('.whatsappForm_edit .iti__flag-container').click(function () { var countryCode = $('.whatsappForm_edit .iti__selected-flag').attr('title'); var countryCode = countryCode.replace(/[^0-9]/g, ''); $('#whtspno_edit').val(""); $('#whtspno_edit').val("+" + countryCode + $('#whtspno_edit').val()); }); }); </script> <div class="form-row"> <div class="form-group col-md-6"> <label for="email">Email<span style="color:#ff0000">*</span></label> <input type="email" class="form-control" name="email" id="email" placeholder="Type email here...." value="{{vr.e_mail}}" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required /> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please enter valid email address.</div> </div> <div class="form-group col-md-6"> <label for="Department">Department Name<span style="color:#ff0000">*</span></label> <select class="form-control" name="deptnm" id="deptnm" required readonly> <option>{{vr.dept_nm}}</option> </select> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label>Broadcast list<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" id="brdctlst" name="brdctlst" value="{{adduser.brl_name}}" readonly> </select> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">Please fill out this field.</div> </div> </div> <!--Form End--> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button href="{% url 'broadcastlist' %}" id="UpdateUser" type="submit" class="btn btn-primary">Update</button> </div> </form> <div class="alert alert-info" style="display: none;"></div> </div> </div> </div> {% endfor %} <!--Edit Model End From Here-->
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)