Question

我的工作是在http://formvalidation.io/examples/adding-dynamic-field/

找到的一个例子

在示例中，他们在表单中使用隐藏模板添加字段html，并使用aclass addButton来执行javascript addButton函数。隐藏的模板看起来像我传递的变量：

 <div class="form-group hide" id="itemTemplate">
    <label class="col-xs-3 control-label"profile_id="7" id="23" gid="100">New friend (23)</label>
    <div class="_col-xs-offset-2 col-xs-3">
        <input class="form-control  saveFname" type="text" name="fname[]" profile_id="7" id="23" gid="100"/>
    </div>
    <!-- REMOVE BUTTON -->
    <div class="col-xs-2">
        <button type="button" class="btn btn-default removeButton" profile_id="7" id="23" gid="100"> <i class="fa fa-minus"></i> </button>
    </div>
</div>

实际生成上述html的表单中的php代码是：

<!-- HIDDEN TEMPLATE with REMOVE BUTTON  DYNAMICALLY ADDED-->
<div class="form-group hide" id="itemTemplate">
  <label class="col-xs-3 control-label"profile_id="<?php echo $profile_id; ?>" id="<?php echo $id ; ?>" gid="<?php echo $gid; ?>">New friend (<?php echo $id ; ?>)</label>
  <div class="_col-xs-offset-2 col-xs-3">
    <input class="form-control  saveFname" type="text" name="fname[]" profile_id="<?php echo $profile_id; ?>" id="<?php echo $id ; ?>" gid="<?php echo $gid; ?>"/>
  </div>
  <!-- REMOVE BUTTON -->
  <div class="col-xs-2">
    <button type="button" class="btn btn-default removeButton" profile_id="<?php echo $profile_id; ?>" id="<?php echo $id ; ?>" gid="<?php echo $gid; ?>"> <i class="fa fa-minus"></i> </button>
  </div>
</div>
<!-- END HIDDEN TEMPLATE with REMOVE BUTTON  DYNAMICALLY ADDED-->

javascript addButton函数：

// Add button click handler
.on('click', '.addButton', function () {
    var $template = $('#itemTemplate'),
        $clone = $template.clone()
            .removeClass('hide')
            .removeAttr('id')
            .insertBefore($template),
        $item = $clone.find('[name="item[]"]');
    $('#form').formValidation('addField', $item);

    var PROFILE_ID = $(this).attr('profile_id');
    var GID = $(this).attr('gid');
    var dataString = 'profile_id=' + PROFILE_ID + '&gid=' + GID;
    $.ajax({
        type: "POST",
        url: "addGroup.php",
        data: dataString,
        cache: false // ,
    })
})

这适用于它执行php脚本 addGroup.php 并在mysql表中插入一个新条目，但是它失败了，因为隐藏的模板继承了相同的$ID表单模板，而它需要为每个添加的新字段增加模板使用的$ID。

<input class="form-control  saveFname" type="text" name="fname[]" profile_id="7" id="23" gid="100"/>

由于模板是在页面加载并生成id="23"时生成的，因此相同的id会传递给javascript函数，而需要递增到24,25,26等，具体取决于有多少字段添加，以便可以编辑（或删除）新字段，而无需重新加载页面。观看演示：

http://dottedi.us/test/index.php

如何让它增加$id？

变更/思想：

固有的问题是，当您加载页面时，会生成静态$ id并将其传递给隐藏模板。我设置了一个简单的mysql语句，这样第一次加载模板时，ID会占用mysql表中的下一个可用字段ID。

$result = mysql_query("SHOW TABLE STATUS LIKE 'fieldgroup_values2'");
$row = mysql_fetch_array($result);
$nextID = $row['Auto_increment'];

点击第一次添加，然后获取一个ID，可以使该字段可以使用第一个Add进行编辑。后续添加将失败，因为它们也将采用相同的$ nextID。

这是saveName / saveData.php函数隐藏字段的新html：

<div class="_col-xs-offset-2 col-xs-3">
    <input class="form-control  saveFname" type="text" name="fname[]" profile_id="<?php echo $profile_id; ?>" id="<?php echo $nextID ; ?>" gid="<?php echo $gid; ?>"/>
</div>

有没有办法通过javascript在每次点击按钮时增加id =“”增量？

或者是否有更好的jQuery方法来设置带有可编辑，可保存字段的Add？

如何将ajax php脚本中的增量ID传递回表单模板？

0 个答案: