Below is my code and i am trying to get value of the above text box when click on the <a> which is in same div. I mean to say if i click on second "add to cart" link than it will give me "test2" as per my screenshot.
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(".ProductActionAdd a").click(function(){
alert($('.ProductActionAdd a').prevAll(".ProductActionAdd a:first").attr('value'));
})
});
</script>
</head>
<body>
<div class="ProductActionAdd">
<input type="text" value=""/>
<a class="button" href="#">Add To Cart</a>
</div>
<div class="ProductActionAdd">
<input type="text" value=""/>
<a class="button" href="#">Add To Cart</a>
</div>
<div class="ProductActionAdd">
<input type="text" value=""/>
<a class="button" href="#">Add To Cart</a>
</div>
</body>
</html>
but not getting success.
Please suggest me solution.
Below is my code and i am trying to get value of the above text box when click on the <a> which is in same div. I mean to say if i click on second "add to cart" link than it will give me "test2" as per my screenshot.
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(".ProductActionAdd a").click(function(){
alert($('.ProductActionAdd a').prevAll(".ProductActionAdd a:first").attr('value'));
})
});
</script>
</head>
<body>
<div class="ProductActionAdd">
<input type="text" value=""/>
<a class="button" href="#">Add To Cart</a>
</div>
<div class="ProductActionAdd">
<input type="text" value=""/>
<a class="button" href="#">Add To Cart</a>
</div>
<div class="ProductActionAdd">
<input type="text" value=""/>
<a class="button" href="#">Add To Cart</a>
</div>
</body>
</html>
but not getting success.
Please suggest me solution.
Share Improve this question edited Dec 5, 2013 at 11:50 Jalpesh Patel asked Dec 5, 2013 at 11:40 Jalpesh PatelJalpesh Patel 3,18810 gold badges46 silver badges68 bronze badges7 Answers
Reset to default 5You can use prev() to get the textbox
$( document ).ready(function() {
$(".ProductActionAdd a").click(function(){
alert($(this).prev().val());
alert($('.ProductActionAdd a').prevAll(".ProductActionAdd a:first").attr('id'));
});
});
Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector, reference.
Given a jQuery object that represents a set of DOM elements, the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that can be passed to the $() function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector, reference.
the input is the previous sibling element of the clicked anchor element so use .prev() ($(this).prev())
Also to get the value of the element use .val()
$(document).ready(function () {
$(".ProductActionAdd a").click(function () {
alert($(this).prev().val());
})
});
Demo: Fiddle
$(".ProductActionAdd a").click(function(){
alert($(this).closest(':input').val());
});
Try this
$(".ProductActionAdd a").click(function(){
alert($(this).prev().val());
})
Yes, you can do this task using jquery $(this). There are more than one way exist to achieve this task.
You can try jquery .prev() :
$(".ProductActionAdd a").click(function(){
alert($(this).prev().val());
});
Or you can also try to find input into parent container, using jquery .parent()
$(".ProductActionAdd a").click(function(){
alert($(this).parent().find('input[type="text"]').val());
});
Try also in jsfiddle
Try this
$(".ProductActionAdd a").click(function(){
alert($(this).closest('div').find('input').attr('id'));
});
http://jsfiddle.net/BmkL8/
Check this:
$(".ProductActionAdd a").click(function(){
$(this).prev("input[type=text]").val();
});