www.webdeveloper.com
Results 1 to 6 of 6

Thread: How do I pass a value onclick with jquery?

  1. #1
    Join Date
    Apr 2007
    Posts
    1,664

    How do I pass a value onclick with jquery?

    I'm drawing a list of letters and numbers with PHP and am passing the value with Xajax so once it in a form element it's easy to use. The following code is just an example to clarify my question.

    I can pass a value with javascript onclick simply (and this is what I want to do with jquery)

    HTML Code:
    <html>
    <head>
    </head>
    <body>
    
    <form name="letters" id="letters">
        <input type="text" name="letter" id="letter">
    </form>
    <a href="#" onclick="test('a')">a</a>
    <a href="#" onclick="test('b')">b</a>
    <a href="#" onclick="test('c')">c</a>
    
    <script type="text/javascript">
    function test(filter){
        document.getElementById("letter").value=filter;
        //xajax call here
    }
    </script>
    
    </body>
    But I'm confused how jquery knows what I clicked on if the click is bound.

    HTML Code:
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
    </head>
    <body>
    
    <form name="numbers" id="numbers">
        <input type="text" name="number" id="number">
    </form>
    
    <div id="number_filters">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </div>
    
    <script type="text/javascript">
        $("#number_filters a").bind("click", function() {
            //?
            return false;
        });
    </script>
    
    </body>
    Would appreciate a pointer in the right direction.
    Last edited by SyCo; 10-01-2010 at 05:52 PM.

  2. #2
    Join Date
    Jul 2007
    Location
    Québec
    Posts
    61
    In the bind callback function, you can use:

    $( this ).html() or anyother function like attr(), css() ...

    to get the value you want ..

  3. #3
    Join Date
    Apr 2007
    Posts
    1,664
    sorry, I don't get your answer. Could you show me an example.

  4. #4
    Join Date
    Jul 2007
    Location
    Québec
    Posts
    61
    For example you could do something like this:

    Code:
    <script type="text/javascript">
        $("#number_filters a").bind("click", function() {
            var value = $( this ).attr( 'href' );
            return false;
        });
    </script>
    In this case the $( this ) selector will refer to the <a> that was clicked.

  5. #5
    Join Date
    Apr 2007
    Posts
    1,664
    Ahhh cool. So the value of the link itself is the value. I can work with that

    Thanks Nihiliste, this works.

    HTML Code:
    <html>
    <head>
    <script type="text/javascript" src="/bin/online/js/jquery/jquery-1.3.2.min.js"></script>
    </head>
    <body>
    <form name="numbers" id="numbers">
        <input type="text" name="number" id="number">
    </form>
    
    <div id="number_filters">
        <a href="1">1</a>
        <a href="2">2</a>
        <a href="3">3</a>
    </div>
    
    <script type="text/javascript">
        $("#number_filters a").bind("click", function() {
            var value = $(this).attr( 'href' );
            $('#number').val(value);
            return false;
        });
    
    </script>
    </body>
    Last edited by SyCo; 10-01-2010 at 06:18 PM.

  6. #6
    Join Date
    Feb 2006
    Location
    I'm right here
    Posts
    103
    Or this....

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#number_filters a").click(function() {
            	$("#number").val($(this).text());
            	return false;
        	});
    	});
    </script>
    <title></title>
    </head>
    
    <body>
        <form name="numbers" id="numbers">
        	<input type="text" name="number" id="number">
        </form>
    
    <div id="number_filters">
        <a href="1">1</a>
        <a href="2">2</a>
        <a href="3">3</a>
    </div>
    </body>
    </html>
    The text inside the link would become your value

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles