adding value to text box on click

Question

I am trying to insert an address into an input field upon clicking a button that is its sibling.

HTML

 <label for="to">To:</label>
 <input type="text" id="to" name="to" required="required" placeholder="An address" size="30" />
 <a id="to-link" href="#" class="button">Get my position</a>
 <a id="to-home" href="#" class="button">Home</a>

 <label for="from">From:</label>
 <input type="text" id="from" name="from" required="required" placeholder="Another address" size="30" />
 <a id="from-link" href="#" class="button">Get my position</a>
 <a id="from-home" href="#" class="button">Home</a>

Jquery

 jQuery("#from-home, #to-home").click(function(event) {
      event.preventDefault();

      jQuery(this).prev("input").val("123 my street, 12345 Gotham");

    });

I don't know what I'm doing wrong but I don't get anything if I console.log(jQuery(this)); Sorry if this is a dumb question I'm just starting to get my head around "this" (or at least I thought I was.)

James Montagne · Accepted Answer · 2013-11-05 21:24:21Z

prev() looks for the previous item not previous items. since previous item of your $(this) is <a>, it wont be setting your input field. In that case, you can either do:

$(this).prev().prev("input").val("123 my street, 12345 Gotham");

which I do not recommend. Better way of doing this would be by adding wrapper for your address groups:

<div>
  <label for="to">To:</label>
  <input type="text" id="to" name="to" required="required" placeholder="An address" size="30" /> <a id="to-link" href="#" class="button">Get my position</a>
  <a id="to-home" href="#" class="button">Home</a>

</div>
<div>
  <label for="from">From:</label>
  <input type="text" id="from" name="from" required="required" placeholder="Another address" size="30" /> <a id="from-link" href="#" class="button">Get my position</a>
  <a id="from-home" href="#" class="button">Home</a>
</div>

and for your javascript:

$("#from-home, #to-home").click(function (event) {
  event.preventDefault();
  $(this).siblings("input").val("123 my street, 12345 Gotham");
});

Here you can see the working example: http://jsfiddle.net/436qA/

Karl Anderson · Accepted Answer · 2013-11-05 21:20:11Z

1

If you introduce two outer DIVs to your markup, then you can use the jQuery .prevAll() function, like this:

Markup:

<div>
    <label for="to">To:</label>
    <input type="text" id="to" name="to" required="required" placeholder="An address" size="30" /> <a id="to-link" href="#" class="button">Get my position</a>
    <a id="to-home" href="#" class="button">Home</a>
</div>
<div>
    <label for="from">From:</label>
    <input type="text" id="from" name="from" required="required" placeholder="Another address" size="30" /> <a id="from-link" href="#" class="button">Get my position</a>
    <a id="from-home" href="#" class="button">Home</a>
</div>

JavaScript:

jQuery("#from-home, #to-home").click(function (event) {
    event.preventDefault();

    jQuery(this).prevAll("input").val("123 my street, 12345 Gotham");
});

Check out this jsFiddle.

Read jQuery .prevAll() documentation for more information.

answered Nov 5, 2013 at 21:20

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

2 Comments

mantis Over a year ago

Thanks, it was a tossup between yours and the answer I choose. Both work so I went with the first come. Unless .prevAll()is more efficient?

Karl Anderson Over a year ago

@mantis - no worries, glad you got an answer that works for you. :-) Feel free to up-vote my answer if you have not already.

bunndan · Accepted Answer · 2013-11-05 21:23:18Z

1

If you just want the single previous <input>, you can use the .prevAll() command:

$("#from-home, #to-home").click(function(event) {
    event.preventDefault();

    $(this).prevAll("input").eq(0).val("123 my street, 12345 Gotham");
});

The .eq(0) reduces the matched elements you are looking for (thus, the second Home button will only find the <input> tag right before it).

answered Nov 5, 2013 at 21:23

bunndan

2,8873 gold badges21 silver badges20 bronze badges

2 Comments

James Montagne Over a year ago

Interesting approach. Given the order that the elements are returned, the one you want will always be first. Probably not a great idea if there are a large number of siblings since it will have to search through them all and then get filtered to just one.

bunndan Over a year ago

Yes, but this will also ensure that it only changes one of the input fields, rather than .sibling() or .prevAll() without .eq(0) which could get multiple ones

James Montagne · Accepted Answer · 2013-11-05 21:10:41Z

0

Your usage of this should be fine. Your issue is with prev. prev only gets the preceding sibling. In this case, the preceding sibling is a anchor and not an input. As a result, .prev("input") will not find anything since the previous sibling does not match the selector.

answered Nov 5, 2013 at 21:10

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

Daymon Schroeder · Accepted Answer · 2013-11-05 21:16:36Z

0

Extending off of Jame's answer

"Your usage of this should be fine. Your issue is with prev. prev only gets the preceding sibling. In this case, the preceding sibling is a anchor and not an input. As a result, .prev("input") will not find anything since the previous sibling does not match the selector."

.prev()'s selector is exclusionary. In this specific case you can daisy-chain prev() to select what you want.

jQuery("#from-home, #to-home").click(function(event) {
  event.preventDefault();

  jQuery(this).prev().prev().val("123 my street, 12345 Gotham");

});

Will allow you to select what you want. What makes more sense to me, however, is to select the element by id.

answered Nov 5, 2013 at 21:16

Daymon Schroeder

6921 gold badge6 silver badges23 bronze badges

Collectives™ on Stack Overflow

adding value to text box on click

5 Answers 5

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related