SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting the focus off the submit button

    I have a form with quite a lot of inputs. The submit button is not an image. Once the user clicks anywhere within the form the focus goes onto the submit button. If the user presses return the form is submitted. I should prefer the form to only be submitted if the user actually presses the button itself. Is there a way of achieving that?

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2007
    Posts
    566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe something like
    Code:
    var btn=document.getElementById('submitBtn');
    btn.onfocus=blur();
    Which unfocus the button each time it's focused.
    I think it should still work with the mouse...

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tripy. My page is (I hope Kev is not reading) enclosed in a big table and that is enclosed by the form tags. Clicking anywhere within the table brings the focus to the submit button. I tried turning your code into a function and calling it when the table got the focus, but that did not work. Presumably that code you suggest has to be called in some way.

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2007
    Posts
    566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Presumably that code you suggest has to be called in some way.
    Of course, I've let it open for you to adapt.
    First, you have to put an id on the form button.
    Second, you have to adapt the id into the snippet I gave you to follow your id
    Third, you have to call that javascript after the button has been added to the page

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the default function in most browsers that the Enter key in any text field etc activates the (first) submit button.

    You may try to capture keypress events (with JavaScript) and prevent the default behaviour for the Enter key, although this is likely to annoy at least some of your visitors.

    A better solution might be to add client-side (JavaScript) form validation and attach it to the form's onsubmit handler.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, thank you for further replies gentlemen. My form validation is all by PHP, so I prefer to follow Tripy's line. I am afraid that while I do use Javascript this seems to be taking me into a corner I have so far avoided. Tripy, you wouldn't like to spell it out a little more for me would you please? My submit button now says

    <input id='submitBtn' type=submit name=submit value='Submit to the EIBA'>

    but I am not sure how to link that id to your Javascript snippet

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not suggesting that you replace your server-side validation with client-side validation; only that you add client-side validation to enhance usability.
    Birnam wood is come to Dunsinane


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
  •