Question

我有一个动态添加字段的动态表单。我不知道在哪里为＆＃34; maxdynamicfields创建规则：10，＆＃34;

这是javascript：

<script type="text/javascript">
    var rowNum = 0;
    function addRow(frm) {
        rowNum++;
        var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
    }
</script>

Answer 1

虽然您已经有一个计数rowNum，但您可以在函数中使用它来检查计数。或者你可以使用这样的东西：

var count = $('p[id^=rowNum]').length;
    if(count >= 10) {
    // meaning there are atleast 10 dynamic elements created
    }

Answer 2

您可以避免使用rowNum变量污染全局命名空间，并使用以下条件：

$('#itemRows > p > input').length >= 10

或简单的方法：

rowNum >= 10

其次，你的回答 - 最好的地方是addRow函数：

<script type="text/javascript">
    var rowNum = 0;
    function canAddRow(){
        return $('#itemRows input').length >= 10 / /max row count is 10 here.
    }

    function addRow(frm) {
        if(canAddRow()) 
            return;
        rowNum ++;
        var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]"       size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }

    function removeRow(rnum) {
        jQuery('#rowNum'+rnum).remove();
    }
</script>

Answer 3

您可以将rowNumber变量用于此目的

<script type="text/javascript">
    var rowNum = 0;
    function addRow(frm) {
    if(rowNumber == 10) 
      return;
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]"       size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}
</script>

Answer 4

您可以添加＆＃34; if＆＃34;函数声明：

<script type="text/javascript">
  var rowNum = 0;
  function addRow(frm) {
    if (rowNum <10) {
      rowNum++; //only increase rowNum up to 10
      var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]"       size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
      jQuery('#itemRows').append(row);
      frm.add_qty.value = '';
      frm.add_name.value = '';
    }
  }

  //Other functions
</script>

Answer 5

您可以定义最大值并对其进行测试，如下所示：

<script type="text/javascript">
  var rowNum = 1;
  var MAX = 10;

  function addRow( frm ) {

    if (rowNum > MAX ) {
         resetQtyName( frm );
         return;
    }
    else
    {
      var row = '<p id="rowNum'+rowNum+'">Item quantity: <input type="text" name="qty[]"       size="4" value="'+frm.add_qty.value+'"> Item name: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
      jQuery('#itemRows').append(row);

      // prepare for next invocation
      resetQtyName( frm );
      rowNum++; 
    }
  }

function removeRow(rnum) {
    rowNum -= 1;
    jQuery('#rowNum' + rnum).remove();
}
function resetQtyName( frm ){
      frm.add_qty.value = '';
      frm.add_name.value = '';

}
</script>

如何只允许添加10个动态字段javascript

5 个答案: