Question

我有多组动态字段需要添加到表单中，我使用了一个示例来使主位工作，但我需要将javascript设置为＆＃39; target＆＃39;具体的

您可以看到，单击添加按钮时，它会在文件控件div中添加[clones]一个新字段。当点击添加按钮时，我需要以某种方式检测父[well，4th predecessor] div的类。

这是怎么做到的？

HTML：

<form id="form" name="form" method="post" class="form" role="form" action="[[~[[*id]]]]" enctype="multipart/form-data">

    <input type="hidden" name="id" value="[[+id]]">


    <div class="row">

      <div class="form-group col-sm-6 [[!+fi.error.expires:notempty=` has-error`]]">
        <label for="expires">Expires</label>
        <select name="expires" class="form-control">
          <option value="24">24 hours</option>
          <option value="48">48 hours</option>
          <option value="72">72 hours</option>
          <option value="96">96 hours</option>
        </select>
      </div>

      <div class="form-group col-sm-6 [[!+fi.error.origin:notempty=` has-error`]]">
          <label for="origin">Origin</label>
          <input name="origin" type="text" id="origin" value="" class="form-control">
      </div>

    </div>

    <div class="row">

      <div class="col-sm-12"><label>Tag numbers: </label></div>

      <div class="tag-controls"> 

        <div class="entry col-sm-4">
          <div class="input-group">
            <input class="form-control" name="fields[]" type="text" placeholder="Type something">
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

    </div>

    <div class="row">

      <div class="col-sm-12"><label>Photos: </label></div>

      <div class="image-controls"> 

        <div class="entry col-sm-4">
          <div class="input-group">
            <input class="form-control" name="fields[]" type="text" placeholder="Type something">
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

    </div>   

    <div class="row">

      <div class="col-sm-12"><label>Files: </label></div>

      <div class="file-controls"> 

        <div class="entry col-sm-4">
          <div class="input-group">
            <input class="form-control" name="fields[]" type="text" placeholder="Type something">
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

    </div>

    <div class="form-group">
        <button type="submit" name="submit" id="submit" value="submit" class="btn button-sm btn-primary">Add Special Offering</button>
    </div>

</form>

使用Javascript：

// dynamic add form fields
$(function(){

    $(document).on('click', '.btn-add', function(e){

        console.log('button clicked');
        e.preventDefault();

        var controlForm = $('.file-controls'),
        currentEntry = $(this).parents('.entry:first'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);

        console.log(controlForm);
        console.log(currentEntry);
        console.log(newEntry);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-success').addClass('btn-info')
        .html('<span class="glyphicon glyphicon-minus"></span>');
        }).on('click', '.btn-remove', function(e)
        {

        $(this).parents('.entry:first').remove();

        e.preventDefault();
        return false;

    });

});

Answer 1

按钮点击事件中的以下jquery将找到4前身：

$(this).parent().parent().parent().parent().attr('class');

使用更独特的类标记这些父级可能更好一点，然后使用此类名作为jquery中的选择器获取$(this).parents(...)的集合。下面是您需要的html更改和jquery的片段

    //jquery

    console.log($(this).parents('.addBtnCntr').attr('class'));

    <!--html-->    
    <div class="tag-controls addBtnCntr">     
        <div class="entry col-sm-4">
          <div class="input-group">
            <input class="form-control" name="fields[]" type="text" placeholder="Type something">
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

Answer 2

你可以给你的容器DIV（＆＃34;图像控件＆＃34;，＆＃34;标签控件＆＃34; ...）另一个类来识别它们作为groupcontainer ...喜欢＆＃34;的 myformgroup ＆＃34;

用$（this）.closest（identifier）...
来接近它
例如：

<div class="tag-controls myformgroup"> <div class="entry col-sm-4"> <div class="input-group"> <input class="form-control" name="fields[]" type="text" placeholder="Type something"> <div class="input-group-btn"> <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus">add</span></button> </div> </div> </div> </div>

在你的JS中：

var container = $(this).closest(".myformgroup"); var classNames = $(container).attr("class"); var className = classNames.replace("myformgroup", ""); alert(className.trim());

但是现在你只能使用你的控件名和＆＃34;标识符＆＃34;作为控件包装器的类。

我建议使用＆＃34; data-target＆＃34;按钮：

<div class="row"> <div class="col-sm-12"><label>Tag numbers: </label></div> <div class="tag-controls"> <div class="entry col-sm-4"> <div class="input-group"> <input class="form-control" name="fields[]" type="text" placeholder="Type something"> <div class="input-group-btn"> <button class="btn btn-success btn-add" data-target="tag-controls" type="button"><span class="glyphicon glyphicon-plus">add</span></button> </div> </div> </div> </div> </div>

JS：

alert($(this).data()["target"]);

Answer 3

更简单的方法是：

$(".formClass").append("<input id=3 />");

如何使用jquery＆amp; amp;将多个动态字段添加到表单bootstrap 3.1

3 个答案: