Adding value to an Input field on click

Question

I have this structure on form,

<input type="test" value="" id="username" />

<span class="input-value">John Smith</span>

<a href="#" class="fill-input">Fill Input</a>

when user click on the Fill Input ,

the data from span which has class input-value will be added to value, after clicking a tag the code should be look like this,

 <input type="test" value="john Smith" id="username" />

    <span class="input-value">John Smith</span>

    <a href="#" class="fill-input">Fill Input</a>

there are many forms element/input on the single page.

Answer 1

$('a.fill-input').click(function() {
    $('#username').val($('.input-value.').text());
});

Answer 2

This should suffice for all inputs that you have so structured. It doesn't depend on the names of the elements. Note that prevAll returns the elements in reverse order so you need to look for the first input, not the last in the preceding inputs.

$('.fill-input').click( function() {
    var $input = $(this).prevAll('input[type=test]:first');
    var $value = $(this).prev('span.input-value');
    $input.val($value.text());
});

Answer 3

You can do it like this:

$('a.fill-input').click(function() {
   $(this).prevAll("input:first").val($(this).prev(".input-value").text());
});

Instead of looking only for the classes, this looks for the span and input just before the button you clicked...this means it works no matter how many of these you have on the page.

Unlike your example though, the value will be John Smith, with the same casing as it has in the span, if you actually want lower case, change .text() to .text().toLowerCase().

Answer 4

try:

$('a.fill-input').click(function(e){
  $('#username').val($('span.input-value').text());
   e.preventDefault();
   return false;
});