Question

我正在尝试实施一个解决方案，用户可以参考他们的朋友详细信息和数据将存储在DB

中

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='jquery121min.js'></script>

  <style type='text/css'>
    .extraPersonTemplate {
    display:none;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(function(){
 $(document).ready(function () {
     $('<div/>', {
         'class' : 'extraPerson', html: GetHtml()
     }).appendTo('#container');
     $('#addRow').click(function () {
           $('<div/>', {
               'class' : 'extraPerson', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');

     });
 })
 function GetHtml()
{
      var len = $('.extraPerson').length;
    var $html = $('.extraPersonTemplate').clone();
    $html.find('[name=friendname]')[0].name="friendname" + len;
    $html.find('[name=friendemail]')[0].name="friendemail" + len;
    $html.find('[name=friendmob]')[0].name="friendmob" + len;
    return $html.html();    
}
});//]]>  

</script>


</head>
<body>
<input class="span3" placeholder="Your Name" type="text" name="yourname">
 <input class="span3" placeholder="Your Email" type="text" name="youremail">
<input class="span3" placeholder="Your Mobile" type="text" name="yourmob">
  <div class="extraPersonTemplate">
    <div class="controls controls-row">
        <input class="span3" placeholder="Friend Name" type="text" name="friendname">
        <input class="span3" placeholder="Friend Email" type="text" name="friendemail">
        <input class="span3" placeholder="friend Mobile" type="text" name="friendmob">
    </div>
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another Friend</p></a>

</body>

</html>

代码工作正常在点击链接上它会添加额外的记录

现在在DB中我有以下字段

YourName, YourMobile, YourEmail, F1name,F1mob,F1email ....... f10name,f10mob,f10email

所以现在我想限制上面的代码只有最多10个条目，

所以我想仅为10个朋友的详细信息限制动态表单元素。

先谢谢

Answer 1

尝试：

$('#addRow').click(function () {        
    $('<div/>', {
        'class': 'extraPerson',
        html: GetHtml()
    }).hide().appendTo('#container').slideDown('slow');
    var len = $("#container").find(".extraPerson").length;
    if(len == 10){
        $('#addRow').hide();
    }
});

DEMO here.

Answer 2

使用长度检查：

$('#addRow').click(function () {
    if($('#container .extraPerson').length >= 10) return;
    $('<div/>', {
        'class': 'extraPerson',
        html: GetHtml()
    }).hide().appendTo('#container').slideDown('slow');

});

Answer 3

如果我理解你的问题......

您已经知道在GetHtml中添加朋友的字段数：

var len = $('.extraPerson').length;

所以你需要做的就是把它加入你的#addRow .click函数。

$('#addRow').click(function () {
    if($('.extraPerson').length <= 10) {
        $('<div/>', {'class' : 'extraPerson', html: GetHtml() }).hide().appendTo('#container').slideDown('slow');
    } else {
        //Add some means of notification that they can't add more people
    }
 });

限制动态表单元素最多10条记录

3 个答案: