将动态表单元素限制为最多10个记录 - Limit Dynamic Form elements upto 10 Records

Limit Dynamic Form elements upto 10 Records

本文关键字：10个记录动态表单元素 | 更新日期: 2024-01-12

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

<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个好友详细信息。

提前感谢

尝试：

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

此处演示

使用长度检查：

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

如果我能正确理解你的问题。。。。

你已经知道你在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
    }
 });