SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Newcastle, England
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    addevent on form field

    Hi,

    I'm trying to use the addevent() method to add an event to a form field.

    I.E.
    This is the form field I want to apply my event to:
    Code HTML4Strict:
    <input type="text" name="site_search" id="site_search" value="">

    This is the javascript what applies the event:

    Code JavaScript:
    container = document.getElementById('site_search');
    addEvent(container,'click',applyCapsLockEvent(),false);

    This is just a couple of lines of my code, I've simplified it slightly to get to the point. It kicks out an error on this line:

    Code JavaScript:
    elm.addEventListener(evType, fn, useCapture);

    of the addevent() function.

    Any ideas of how to solve this please?

    Ta very much

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've used applyCapsLockEvent() in the addEvent function.
    Should that be applyCapsLockEvent without the brackets?

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    ^ yep

    with the brackets you call the function/handler when attaching the listener. In this case the handler/function is getting called when the page loads and the listener is added.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Newcastle, England
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for your replies,

    I should have posted my original code instead of simplifying - I'm using an object. Heres how it looks:

    Code JavaScript:
    // Create an object
    capslock = {
     
    	// Set variable ('site_search' is text input field on form)
    	textinputID:'site_search',
     
      	init:function()
      	{
    		container = document.getElementById(capslock.textinputID);
    		// Add the onclick event behaviour to the field (applyCapsLockEvent function)
    		capslock.addEvent(container,'click',container.applyCapsLockEvent,false);
      	},
     
      	// Run something
      	applyCapsLockEvent:function()
    	{
    		alert ('test');
        },
     
        addEvent: function(elm, evType, fn, useCapture)
    	{
    		if (elm.addEventListener) 
    		{
    			elm.addEventListener(evType, fn, useCapture);
    			return true;
    		} else if (elm.attachEvent) {
    			var r = elm.attachEvent('on' + evType, fn);
    			return r;
    		} else {
    			elm['on' + evType] = fn;
    		}
    	}
    }
    // capslock object is used on the search box to highlight it when the caps lock is pressed
    capslock.addEvent(window, 'load', capslock.init, false);

    addevent initialises the capslock object - which assigns an event to the input with an id of 'site_search'.

    I can assign events to href links but the code does not let me assign the event (applyCapsLockEvent) to a form field. Strange.

    Any ideas?

    Thanks

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible that your browser doesn't recognise click events on certain form fields? Try focus, change or mousedown events and see what happens.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Newcastle, England
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks r51,

    I've chcked this but no joy. In firebug the error displayed is:

    Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame ::......

    Not sure what that means. It's like it can't recognise the 'container' of this line:

    capslock.addEvent(container,'click', container.applyCapsLockEvent,false);

    Can you even use addevent() on a form field.

    I'm on a mac using Firefox but have tested in Safari also and always the same message.

    Cheers

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    capslock.addEvent(container,'click',container.applyCapsLockEvent,false);
    Should the third argument be capslock.applyCapsLockEvent?

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Newcastle, England
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What a numpty!!

    I can't believe I didn't see that - I shall consider a career change.

    Many thanks r51, you have saved me much time


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
  •