SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to submit a form with javascript "Force Click" script

    I have a form that needs to use an Image as a button, there fore I can't use a standard form to submit the data.

    I created a "ForceClick" script. I can't get it to work in both FF and IE - I can get it to work in one but not the other, and visa versa. Here's the script

    Code:
    /* ForceClick version 2.0 */
    function forceClick(e, elemId)
    {
        var keyPressed;
        var elem = $(elemId); 
    
        if (document.all) { //  IE 6+
            keyPressed = e.keyCode;
        } 
        else { // Firefox 
            keyPressed = e.which;
        }
        //13 = ASCII code for Enter key
        if (keyPressed == 13) { 
            if(elem == null)
                alert('Button not found!');
            else {
                // elem.click();  - this is old, now using mousevevnts
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,false, false, false, 0, null);
                elem.dispatchEvent(evt);  
               } 
        } 
    }
    The FF script (I changed it to use Mouse Events) works looks like this:

    Code:
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,false, false, false, 0, null);
    elem.dispatchEvent(evt);
    This doesn't work in IE - the IE version is what I started with (and much simpler)

    Code:
    elem.click();
    I attach the function to the onclick event in the xhtml:

    Code:
    div>
    <label for="username">username:</label>
    <div class="text"><input name="username" type="text" id="username" onkeydown="forceClick(event, 'btnLogin');" /></div>
    </div>
    
    <div>
    <label for="password">password:</label>
    <div class="text"><input name="password" type="password" id="password" onkeydown="forceClick(event, 'btnLogin');" /></div>
    </div>
    Should I just use the IE conditional tag or is there some other method that will work in all browser that I don't konw about??

    Thank you!!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE isn't the only browser that supports document.all, so don't use it to check if a browser is IE or not. Try this:
    Code:
    var keyPressed = e.which||e.charCode||e.keyCode;
    initEvent() is better supported cross-browser than initMouseEvent(). IE doesn't support either.

    I have a form that needs to use an Image as a button, there fore I can't use a standard form to submit the data.
    I don't see how how using an image as the submit button means that you can't use a <form>.

    I am concerned that your code may not be following JavaScript Best Practices. I recommend you read up on them.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •