0

Working on Jquery clone where in large device like desktop and tablet user can clone more but in mobile I have to restrict user to clone 10. Is this possible to restrict user to clone

Here is the jquery code

    var i = 1;
$(document).on("click", ".btn_more", function () {
    $(".cloned-row:first").clone().insertAfter(".cloned-row:last").attr({
        'id': function(_, id) {
            return id + i
        },
        'name': function(_, name) {
            return name + i
        },
        'class': "add_pn_grp"
            //'value': ''
    }).end().find('[id]').attr({
        'id': function(_, id) {
            return id + i
        }
    });

    if(i < $('.cloned-row1').length){
        $(this).closest(".edu_add_button").removeClass('btn_more edu_add_button').addClass('btn_less btn_less1');
    }   
    i++;
});
$(document).on('click', ".btn_less", function () {
    $(this).closest(".cloned-row").remove();
});

Here is the html code

                        <div id ="phone_div" class="col-xs-12 col-sm-9 col-md-9 col-lg-9 ">
                         <!--Phone information Help pop up-->
                                <div class="modal-dialog" role="document" id="phonehint" align="center">
                                    <div class="modal-content">
                                        <div class="modal-header text-center" >
                                            <h4 id="myModalLabel" class="modal-title" style="color:black;">Help - Phone</h4>
                                        </div>
                                        <div class="modal-body" >
                                            <h5 style="color:black;" align="left"> Provide number <br/>Provide your phone number along with the country code.</h5>                                                  
                                        </div>
                                    </div>
                                </div>
                                <!--Contact information Help pop up Ends-->
                     <label>Phone</label>&nbsp;&nbsp;<i class="fa fa-question-circle help_icon" onclick="showphonehint()" onmouseout="hidephonehint()"></i>
                      <div class="em_pho cloned-row">
                         <select id="sel_phntype" name="sel_phntype" class="sslt_Field">
                            <option selected='selected' value="">Phone Type</option>
                            <option value="BUSN">Business</option>
                            <option value="CAMP">Campus</option>
                            <option value="CELL" >Cellphone</option>
                            <option value="CEL2">Cellphone2</option>
                            <option value="FAX">FAX</option>
                            <option value="HOME">Home</option>
                            <option value="OTR">Other</option>
                         </select>
                         <span class = "ph-inline">
                            <input type="text" class="cc_field" placeholder="Country Code" id="txt_CC" maxlength="3" name="txt_CC" /> 
                            <input type="text" class="pn_field" placeholder="Phone Number" id="txt_Pno" name="txt_Pno" />
                            <input type="radio" name="preferred" id="rad_Prf" value="preferred">
                            <label class="radio-label">Preferred</label>
                            <!--<button class="btn_more" id="buttonvalue"></button>-->
                            <input type="button" class="btn_more" id="buttonvalue"/>
                         </span>
                      </div>
                    </div>

I have created variable count I have assigned the count as 10 but how to restrict in mobile I am confused like anything.

Kindly help me

Thanks in advance Mahadevan

Mr.M
  • 1,217
  • 1
  • 19
  • 51
  • possible duplicate of [What is the best way to detect a mobile device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery) – Wesley Smith Sep 09 '15 at 17:00
  • @DelightedD0D actually i want only the user to restrict 10 to add in mobile device using clone not the one which you showed – Mr.M Sep 09 '15 at 17:02
  • You stated **"I have created variable count I have assigned the count as 10 but how to restrict in mobile I am confused like anything."** If that is true, all you need is to know how to detect if the device is "mobile" which that question thoroughly discusses. Once you work that out, it's trivial to work in the logic for your counter so it only applies to mobile or uses a different value for mobile – Wesley Smith Sep 09 '15 at 17:08

1 Answers1

0

you could prevent execution in those cases, isMobile and size > 9, using a relatively effective one-liner.

edit

as suggested in another post on the topic, you could check for mobile with matchMedia.

$(document).ready(function() {
  $(".btn_add").click(function() {
      if ( $('.cloned_row').size() > 9 && isMobile() ) return;
      
      // cloning logic
  });
});

function isMobile() { return window.matchMedia("only screen and (max-width: 760px)").matches; }
Community
  • 1
  • 1
Todd
  • 5,014
  • 3
  • 26
  • 45