使用javascript在可複製表單文本字段中插入值

Question

我有一個名爲的文本字段。它可以被克隆。還有一個可用於選擇值的鏈接。

我已經創建了一個js小提琴向您展示。

整頁視圖：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