CODEWITHSUNDEEP
javascriptjqueryhtmldom
Jalpesh Patel
Jalpesh Patel

Reputation: 3188

How to get Previous textbox value when click on <a>?

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. this is my project image

Please suggest me solution.

Upvotes: 5

Views: 4102

Answers (7)

Mr.G
Mr.G

Reputation: 3569

Check this:

$(".ProductActionAdd a").click(function(){

    $(this).prev("input[type=text]").val();
});

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

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

Upvotes: 2

renuka
renuka

Reputation: 549

Try this

$(".ProductActionAdd a").click(function(){
alert($(this).closest('div').find('input').attr('id'));
});

http://jsfiddle.net/BmkL8/

Upvotes: 1

Sirikon
Sirikon

Reputation: 426

Try this

$(".ProductActionAdd a").click(function(){
    alert($(this).prev().val());
})

Upvotes: 3

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

$(".ProductActionAdd a").click(function(){    
    alert($(this).closest(':input').val());
});

Upvotes: 4

Adil
Adil

Reputation: 148180

You 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.

Upvotes: 5

Arun P Johny
Arun P Johny

Reputation: 388436

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

Upvotes: 4

Related Questions