SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Ignores "onclick" With Return Key - FF OK. How to Fix?

    Hi All,

    I've got a page with a simple single text-field form. I have the submit button setup with an onclick function call. When a user types in the field and hits the return key, the page reloads correctly but skips the function call in the onclick event in IE7. If the user clicks with their mouse it works correctly. In Firefox 2, either the mouse click or return key has the desired result. How can I get the return key to work as desired in IE?

    Here's the HTML/Javascript
    <code>
    function setCookie(NameOfCookie, id, expiredays) {
    var ExpireDate = new Date();
    var field = document.getElementById(id);
    var value = field.value;
    ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
    document.cookie = NameOfCookie + "=" + value +
    ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
    alert('The page will now reload to show '+value);
    }
    <form name="getuser" id="getuser" action="#" method="get" target="_self">
    <input type="text" name="userid" size="25" maxlength="25" value="" id="userid"></input>
    <input onclick="setCookie('userid','userid','365'); window.location.reload()" type="submit" value="Enter"/>
    </form>

    PS - If you see anything in my code that sucks, please feel free to suggest how to improve it! Thanks!

    Korak

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your best off telling IE to ignore the enter/return key in your textfields.

    ie..

    <input type="text" onkeydown="return handleIEReturn(event);" />

    Code:
                function handleIEReturn(e) {
                    if(!e) e = window.event;
                    var kCode = (e.which) ? e.which : e.keyCode;
                    if(navigator.userAgent.indexOf('MSIE') == -1)
                        return true;
                    if(kCode == 13)
                        return false;
                    return true;
                }


  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use an onclick event handler on submit buttons. Use an onsubmit event handler on the form instead.

    It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.

    Try this: (I made it be valid XHTML 1.0 Strict.)
    Code:
    <script type="text/javascript">/* <![CDATA[ */
    window.onload = function(){
      document.getElementById('getuser').onsubmit = function(){
        setCookie('userid','userid','365');
        window.location.reload();
      }
    }
    /* ]]> */</script>
    <form id="getuser" action="#" method="get"><div>
      <input type="text" name="userid" size="25" maxlength="25" value="" id="userid" />
      <input type="submit" value="Enter" />
    </div></form>
    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
  •