使用javascript在可克隆表单文本字段中插入值

Question

我有一个名为的文本字段。它可以被克隆。还有一个链接可用于选择值。

我创建了一个 js fiddle 给你看。

完整页面查看：http://jsfiddle.net/ZpEK9/embedded/result/

来源：http://jsfiddle.net/ZpEK9/

如您所见，如果您单击“选择名称”链接，它将弹出一个窗口。该窗口有名称和选择名称的链接。

当用户时钟“插入名称”链接时，我想在文本字段中插入该名称。任何人都可以帮助我使用 jquery 代码..

PS：表单字段是可克隆的。

这就是我的代码的样子..

<form>
    <div class="control-group success">

  <div class="controls">
      <p class="clone"><input type="text" name="name[]"><span class="help-inline"><a data-toggle="modal" href="#myModal">Select a name</a></span></p>
    <span class="help-inline"><a href="#" class="add" rel=".clone">Add More</a></span>
  </div>
</div>
</form>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
           <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Sam</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Linda</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Lucy</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <div class="caption">
                    <h3>Jenifer</h3>
                    <p><a href="#" class="btn btn-primary">Insert name</a></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          </div>​

谢谢

Answer 1

我在这里用一个可行的解决方案分叉了你的 JSFiddle：

http://jsfiddle.net/jg5C7/3/

在链接中添加了“选择名称”类：

    <span class="help-inline">
        <a class="select-name" href="#myModal">Select a name</a>
    </span>

为链接添加绑定：

    $('a.select-name').click(function() {
        $('#myModal').data('current-input', $(this));
        $('#myModal').modal('show');
    });

    $('#myModal .btn').click(function() {
        $('#myModal').data('current-input').closest('p').find(':text').val($(this).data('value'));
        $('#myModal').modal('hide');
    });

为按钮添加数据值属性，例如：

    <p><a href="#" data-value="Sam" class="btn btn-primary">Insert name</a></p>

因为您使用插件来做一些魔术，所以它不是一个优雅的解决方案，但实际上对您当前所做的唯一改变是我手动触发模式打开/关闭，以便我可以挂钩到“选择名称”链接的点击事件上。

Answer 2

试试这个。我更改了输入名称并将option 类添加到每个<a>。

$('a.option').on('click', function() {
  $('input[name="name"]').val($(this).parent().parent().find('h3').text())
  $('.modal').toggle()
});​

FIDDLE