SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event for .val() filled form fields

    I have the following code

    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {  
    	$("input[id='test']").keyup(function() {
    		$('#test_output').val('My Message');
    	});
    	
    	$("input[id='test_output']").live('change', function() {
    		$('#test2_output').val('My Message 2');
    	});
    });
    </script>
    
    </head>
    
    <body>
    <input type="text" name="test" id="test"/> 
    <input type="text" id="test_output" /> 
    <input type="text" id="test2_output" />
    </body>
    </html>
    Basically, when I type something in "test", I want "My Message" to appear in "test_output". This is working. I also would like to fill "My Message 2" in "test2_ouput" whenever "test_output" is filled using the .val();, this is not working, even though I am using .live().

    How can I solve this?

    Thank you

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zeez View Post
    Basically, when I type something in "test", I want "My Message" to appear in "test_output". This is working. I also would like to fill "My Message 2" in "test2_ouput" whenever "test_output" is filled using the .val();, this is not working, even though I am using .live()
    So you've found that jQuery's .val() method doesn't trigger a change event.

    You can either trigger it manually, or you can add a wrapper to the .val() method so that it automatically triggers the change event.

    Here's the first solution. You don't need to use the live method, that's only for when you require an element that's added to a page to have an event.

    I've also simplified the selectors in this example to just the identifiers.

    Code javascript:
    $(function() {  
    	$('#test').keyup(function () {
    		$('#test_output').val('My Message').trigger('change');
    	});
     
    	$('#test_output').change(function () {
    		$('#test2_output').val('My Message 2');
    	});
    });

    The other way where you take over the .val method, is a bit more complex but can help to simplify the rest of your code.

    Code javascript:
    $(function() {  
        $.fn._val = $.fn.val;
        $.fn.val = function () {
            var obj = $.fn._val.apply(this, arguments);
            if (arguments.length > 0) {
                obj.trigger('change');
            }
            return obj;
        }
     
        $('#test').keyup(function () {
            $('#test_output').val('My Message');
        });
        $('#test_output').change(function () {
            $('#test2_output').val('My Message 2');
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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