SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help Me to Click This Button

    I am working on a simple shoutbox for a website. I am trying to use ajax for not refreshing the page every time a user sends a message.

    Everything works fine except this problem I have yet to solve.

    Well because I use ajax I don't use a <form> element and instead I used:

    -a simple textbox to enter message
    -a <button> element for sending message.

    When you click the button it works, but not when you type your message and hit return/enter (Because the button is not located in a <form> element and has no type attribute).

    I know there are some solutions, like adding a keypress event handler for the return key, but I wonder if this is the proper method to solve this.

    How do you guys would handle such an issue?

    Btw, is it standards compliant to use <button> outside of a <form> element?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would just use the <form> element and return false... Just easier that way...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    I would just use the <form> element and return false... Just easier that way...
    But doesn't it refresh the page when you click the button (or hit enter)?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not if you return false: (or... use the preventDefault() method)

    Code JavaScript:
    document.getElementById('form1').onsubmit = function() {
       return false;
    }

    So you'll have to use the "onsubmit" event...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm glad I asked before dealing with all that keypress handling stuff Thanks Jimmy, it works.

  6. #6
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tested and it seems IE7 disables the return key if I use an onsubmit function I will try preventDefault() method. Hope this works for FF and IE...

  7. #7
    SitePoint Member spazz896's Avatar
    Join Date
    Mar 2007
    Location
    Canada
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can see the shoutbox?

  8. #8
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spazz896 View Post
    I can see the shoutbox?
    I prefer not to disclose it at this stage, but it works fine (except return key in IE).


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
  •