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

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().