Insert a value in clonable form text field using javascript

Question

I have a text field called. It can be cloned. Also there is a link available to select the value.

I have created a js fiddle to show you.

Full page view: http://jsfiddle.net/ZpEK9/embedded/result/

Source: http://jsfiddle.net/ZpEK9/

As you can see there, if you click the "select a name" link it will popup a window. That window has names and a link to select the name.

I want to insert that name in the text field when the user clock "insert name" link. Can anyone help me with jquery code..

PS: Form fields are clonable.

This is how my code look like..

<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>​

Thanks

Answer 1

I forked your JSFiddle here with a working solution:

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

Added 'select-name' class to the link:

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

Added bindings to the link:

    $('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');
    });

Added data-value attributes to the buttons, example:

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

Because you're using plugins to do some magic, it's a bit less of an elegant solution but really the only change to what you're currently doing is I'm manually triggering the modal open / close so that I can hook onto the click event of the "Select Name" link.

Answer 2

Try this. I've changed the input name and added option class to each <a>.

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

FIDDLE