Click here to Skip to main content
15,867,937 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
XML
<div id="display_flat_details">
    <div class="flat_no" id="104"><h3>104</h3></div>
    <div class="flat_area" id="1650 Sq.ft"><h3>1650 Sq.ft</h3></div>
    <div class="flat_price" id="75,34,544"><h3>75,34,544</h3></div>
    <div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div>

        </div>

XML
<div id="display_flat_details">
    <div class="flat_no" id="104"><h3>104</h3></div>
    <div class="flat_area" id="1650 Sq.ft"><h3>1650 Sq.ft</h3></div>
    <div class="flat_price" id="75,34,544"><h3>75,34,544</h3></div>
    <div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div>

        </div>



When I click on the button, I should get the value of flat_no of that respective row?How can I get this?Please help me out!
Posted
Comments
Janardhanam Julapalli 16-Dec-14 5:17am    
please have a look at my fiddle http://jsfiddle.net/6o7rahmt/

1 solution

If you can change your markup slightly it will be more "correct" - you should not use numeric values in the id attribute.. as this id is meta data you should really use data-id="104"

If you don't want to change to data-id, simply change the JS below from .attr('data-id') to .attr('id')

HTML
<div id="display_flat_details">
	<div class="flat_no" id="104"><h3>104</h3></div>
	<div class="flat_area" id="1650 Sq.ft"><h3>1650 Sq.ft</h3></div>
	<div class="flat_price" id="75,34,544"><h3>75,34,544</h3></div>
	<div class="flat_details"><input type="button" class="view_flat_details_3bhk" value="View details"></div>
</div>


And the JS

JavaScript
$(document).ready(function(e){
	$('.flat_details input').on('click',function(e){
		var flat_no = $(this).parent().siblings('.flat_no').attr('id');

		console.log(flat_no); // outputs to your console
       // alert(flat_no); // uncomment to see the flat number alerted
	});
});


This JS stores a variable called flat_no
 
Share this answer
 
v3
Comments
Janardhanam Julapalli 16-Dec-14 5:33am    
can I replace the "id" as "data-id" when I am generating it dynamically in jQuery
Chubby Ninja 16-Dec-14 5:50am    
That's fine - I've accounted for that in my answer, just change data-id in the HTML back to id and the javascript too
Chubby Ninja 16-Dec-14 5:50am    
See my updated answer :-) - the HTML and JS is back to id's for you
Janardhanam Julapalli 16-Dec-14 5:56am    
When I click I am getting the required number.But I have 'n' number of such details.When I click on each item I should get that particular no.I am getting the same no. as alert here with this.
Chubby Ninja 16-Dec-14 7:29am    
Are you sure? please check my http://jsfiddle.net/6o7rahmt/1/ - it is working as expected, please make sure you change both the id and the h3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900