Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

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

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    The variable "prop" needs to get its value from $(this), not whatever you're using.

  • Users who have thanked Fumigator for this post:

    arysal (08-26-2009)

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.)

  • Users who have thanked Fumigator for this post:

    arysal (08-26-2009)

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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

  • #6
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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:

    Code:
    $("p").attr("value")
    http://docs.jquery.com/Attributes/attr#name

  • Users who have thanked Fumigator for this post:

    arysal (08-26-2009)

  • #7
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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

  • #8
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Since you want the "this" <p> tag (the one that got clicked on), use the $(this) selector.

    Code:
    $(this).attr("value")

  • Users who have thanked Fumigator for this post:

    arysal (08-26-2009)

  • #9
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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

  • #10
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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.

    Code:
    <!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>

  • Users who have thanked Fumigator for this post:

    arysal (08-26-2009)

  • #11
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Solved

    Thanks for the help what I did was change it completely you are right it is a simple process.
    Code:
    $(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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •