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.

Nick Craver · Accepted Answer · 2010-04-08 11:16:41Z

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

answered Apr 8, 2010 at 11:16

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amy B · Accepted Answer · 2010-04-08 11:14:30Z

0

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

answered Apr 8, 2010 at 11:14

Amy B

18k12 gold badges67 silver badges83 bronze badges

2 Comments

joar Over a year ago

Need to be said that this is jQuery code. Get jQuery at jquery.com. Get started at docs.jquery.com/Downloading_jQuery. jQuery documentation is at api.jquery.com. EDIT: Since this was tagged jQuery the author is likely to know jQuery, but i'm letting the information persist.

Amy B Over a year ago

The question is tagged as jQuery. Pointless comment.

tvanfosson · Accepted Answer · 2010-04-08 11:16:03Z

0

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

answered Apr 8, 2010 at 11:16

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

jerjer · Accepted Answer · 2010-04-08 11:17:40Z

0

try:

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

answered Apr 8, 2010 at 11:17

jerjer

8,77634 silver badges36 bronze badges

Collectives™ on Stack Overflow

Adding value to an Input field on click

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related