Get the input value of "ANY" element <p> tag

[arysal]

Hi Guys,

I am having difficulty getting the value of a specific value contained in a <p> tag. What is happening is that it retrieves the value of the first <p> tag value and not the on the user clicks.

What I need is to retieve the value from the <p> tag the user click.

Snippet code:

$(document).ready(function() {    
                    
   $("p").click(function () { 
   var prop = $("#property_links").val(); 
   $.post("n10-shortlist-connector.html", { web_AGENT_REF: prop}); 
         var htmlStr = "Added to Compare Tool"; 
       $(this).text(htmlStr); 
                     }); 
                         
                  });    


<p><a style="cursor:pointer; color: #900">  Add to Compare Tool <input type="hidden" id="property_links" value="<? echo $AGENT_REF; ?>"/></a></p>      //    many of these tags on the page

view page: http://nwbeta.itproz.co.uk/residenti...tion=Liverpool
If viewing the site when you click "add to compare list" it will change to "Added to compare list"

All help appreciated,
Thanks in advance.

[Fumigator]

The variable "prop" needs to get its value from $(this), not whatever you're using.

[arysal]

Hi Fumigator,

Thanks for the pointer, I tried this and still this does not work.

WAS: var prop = $("#property_links").val();
Now var prop = $(this).val();

could you help explain further what you meant or show me an example that I can learn from please.

Thanks

[Fumigator]

Is it really the "value" of the <p> tag you're after? Typically the only elements that have a "value" are form elements such as <input> and <select>. What exactly do you need to extract from the <p> tag? (I'd assume it's some sort of unique identifier but I can't see your html so I don't know how you have that organized.)

[arysal]

Hi Fumigator,

I have an input form nested within the <p> tags with the ID "property_links" and Value "obtained via php". Code for this shown on last line in "===Code===".

Why I need the Value of the input form is because it is needed for a compare list, the php variable passed in Value="" is the property reference number


===== code====
$(document).ready(function() {

$("p").click(function () {
var prop = $("#property_links").val();
$.post("n10-shortlist-connector.html", { web_AGENT_REF: prop});
var htmlStr = "Added to Compare Tool";
$(this).text(htmlStr);
});

});


<p><a style="cursorointer; color: #900"> Add to Compare Tool <input type="hidden" id="property_links" value="<? echo $AGENT_REF; ?>"/></a></p> // many of these tags on the page

===== code====

I hope this has answered your queries.

Thanks Ary

[Fumigator]

Ahhh I did not notice that last line of code in your first post... ok I'm with you now. You're using the "value" attribute on a paragraph, which won't validate, but does actually work. To access that attribute's value, use attr() like this:

$("p").attr("value")

http://docs.jquery.com/Attributes/attr#name

[arysal]

I tried what you said and still same issue,

I also tried
var prop =$("p").attr("value");
var prop =$("property_links").attr("value");
var prop =$("#property_links").attr("value");
var prop = $(this).find("#property_links").val();
var prop = $("p").click("#property_links").val();

But still it will only pick up the first element it finds?!?

To explain this further, I use the p tags to find the element then I retrieve the input form value, once this is done I overwrite everything in the p tag using

"var htmlStr = "Added to Compare Tool";
$(this).text(htmlStr);"

So If I click the first 5 properties they will all add correctly. However if I pick the first 5 and then the 7th one, it mistakenly adds the first 6 not adding the 7th one. This is happening because after the first 5 no matter which property I click on, the 6th one is always added, as it is the first found match (the previous p tags 1 to 5 have been overwritten with above code, hence property entries do not repeat on my compare list).

Thanks for all the help so far

[Fumigator]

Since you want the "this" <p> tag (the one that got clicked on), use the $(this) selector.

$(this).attr("value")

[arysal]

I tried what you mentioned unfortunately still did not work. I also added, alert($(this).find("property_links").val()) to see if the values where passing properly, even when the values were not passed properly (alert showed undefined) it still worked with undefined for some.

From my testing I can see it still wants to add the first in the list, so I did some research and figured out that Classes and ID can cause issues if used incorrectly, So I change my method of using IDs to Classes and still produced the same output.

In the end all that is required is to extrapolate the value which is the property ID when the visitor clicks on Add to compare list, maybe my method of using hidden input forms is wrong, so i am asking now, do you know of any other method which may give a successful result ?

Thanks for the continued support, much appreciated

[Fumigator]

Yeah... I don't know what's happening with your script, because in principle this is a very simple task. Here is an example of what your script should be doing. You can run run this from your hard drive and it will work (as long as the jquery file is present). You click on a <p> tag, it gets the "value" attribute from the <p> tag, displays it in an alert, then changes the <p> tag's text.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="generator" content="HAPedit 3.1">
	<script type="text/Javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/Javascript">
	$(function() {
		$("p").click(function() {
			alert("The value of the <p> tag clicked is " + $(this).attr("value"));
			$(this).text("CLICKED")
		});
	});
	</script>

</head>
<body>
<div id="container">
<p value='1'>click me</p>
<p value='2'>click me</p>
<p value='3'>click me</p>
<p value='4'>click me</p>
<p value='5'>click me</p>
<p value='6'>click me</p>
<p value='7'>click me</p>
</div>
</body>
</html>

[arysal]

Thanks for the help what I did was change it completely you are right it is a simple process.

$(document).ready(function() {	
						  
	$('.my_property').click(function () {
									
					var prop =$(this).attr("name");
		
		
	$.post("n10-shortlist-connector.html", { web_AGENT_REF: prop});
	var htmlStr = "Added to Compare Tool";
	$(this).text(htmlStr);
	$(this).attr("style","color: #666");
	
      
							});
							   
					   });	

....


<a class="my_property" style="cursor:pointer; color: #900" name="<? echo $AGENT_REF; ?>">Add to compare list</a>

Thanks again for all your help, much appreciated