I have the following code and I'm trying to get the value of the input field "basketQuantity" when anchor tag is clicked.

 

<div class="basketItemMiddle">
   <h4>Item name</h4>
   <label for="basketQuantity">Quantity</label><input type="text" name="basketQuantity" class="basketQuantity" value="2" />
   <a href="" id="increase_123" class="basketIncreaseQuantity"><img src="images/plus.png" alt="Increase quantity" /></a>
</div>

 

At the moment I am trying to do this in jQuery, so I am trying to go back to the parent element "basketItemMiddle" and then get the input field but it isn't working.

 

var basketQuantity = $(this).parent("#add-to-basket-quantity").val();

 

Thanks for any help.

You're using the .parent() function when the element you're trying to access isn't a parent. You need to use the .prev() function to access the previous.

 

Here's a quick jsfiddle I threw together to show you:

 

http://jsfiddle.net/kGE92/

Awesome! Thanks for your help. Although if I was the insert another element between the anchor tag and the input field would that script break?

Well, it wouldn't break. It would still work but thinking about it logically, the prev() function will take into account the element previous to the one you clicked.

 

Check out the jQuery API, it's not much good me just doing the script for you. I've given you a little pointer, the next stage is going onto the jQuery docs and looking up DOM traversal to do what you wish

Can't you just select the basket input directly?

 

$('.basketQuantity').val();

Edited November 28, 201114 yr by Pedro