SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable submit button after click

    Is it possible to disable the submit button after being clicked once?

    I keep receiving several e-mails of the same thing and this has been increasing lately as visitors have been increasing.

    Thanks for your help.

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Darin, this is simple enough to do with javascript (with the obvious caveat that it won't work in non-javascript browsers and if the user has disabled javascript intentionally). all you need is an "onsubmit" part in your form's opening tag. here's a small example:

    Code:
    <form name="testform" method="post" action="process_form.php" onsubmit="this.elements['submit'].disabled=true;">
      <input type="submit" name="submit" value="send this off...">
    </form>
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Guru
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What if I already have another "onsubmit" tag in there? I use it to check that the fields are completed.

    How would I put both of them in there?

    This is what I have now:

    Code:
    <form method="POST" action="linkadded.php" onsubmit="return formCheck(this);">

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be able to just chain the onsubmit commands together, so that first it runs the form check, and then disables the submit button.

    Code:
    <form method="POST" action="linkadded.php" onsubmit="return formCheck(this); this.elements['submit'].disabled=true;">
    one word of caution, though: i don't know what your formCheck function does, but what if the check returns false ? does your page pop up a javascript alert or something, saying "you haven't filled in this or that" ?

    in that case, we might need to modify the onsubmit code to only disable the submit button if the form check has been passed first.

    Code:
    <form method="POST" action="linkadded.php" onsubmit="if (formCheck(this)) { this.elements['submit'].disabled=true; } else { return false; }">
    to break it down, this is what it does: first, it runs formCheck. this will presumably return a true if the check was successful, or false if there was some problem (a compulsory field not filled in, or whatever). now, if the check returned true, javascript disables the submit button and lets the browser carry on with the form submission. if the check failed, however, the javascript will only execute "return false" which has the effect of telling the browser NOT to process the form as normal, i.e. not to proceed to linkadded.php

    hope this was clear enough. let me know if it all worked.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Guru
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, my Internet connection is too fast for me to determine. When I click on the submit button, I don't have time to see if it gets disabled or not, the page changes right away.

    I don't think it is working however, because I did get a object not supported error at one time, but couldn't get it to come up again.

    Check it out for your self, feel free to submit the form, don't worry.

    http://www.foodsfortrade.com/database/add2.php

  6. #6
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cryptically enough, the name of your submit button is "B1".
    try changing my code to
    Code:
    <form method="POST" action="linkadded.php" onsubmit="if (formCheck(this)) { this.elements['B1'].disabled=true; } else { return false; }">
    for testing purpouses (since your connection is too fast), use this code (make sure to replace it with the one above before going live with it again)
    Code:
    <form method="POST" action="linkadded.php" onsubmit="if (formCheck(this)) { this.elements['B1'].disabled=true; return false; } else { return false; }">
    what this does is: after (hopefully) disabling the submit button, it will do a "return false", indicating to the browser NOT to process the form. this way you'll see if the button gets disabled properly or not, as your form won't jump to the next page.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  7. #7
    SitePoint Guru
    Join Date
    Sep 2001
    Location
    Vancouver
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help! I really appreciate it.

    It worked like a charm.

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anytime, mate...i love it when a plan works out (or whatever hannibal in the a-team always says)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Silly Brit...

    "I love it when a plan comes together."
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm german actually, but grew up in italy...and watched the a-team on the swiss french channel...so there creole
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Santa Cruz, Aruba
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=redux;589526]cryptically enough, the name of your submit button is "B1".

    That's because MS FrontPage makes buttons like that. The next button would be named B2.


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
  •