SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "onclick="this.disabled=true;" doesn't work

    Hello guys,

    I have a form on some pages and I'm trying to make submit button disabled when user submits form.

    I googled for it and found this solution:

    HTML Code:
    onclick="this.disabled=true;
    But it doesn't work. How can I make this code work?

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Indonesia - Bali
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont know much about this keyword i'am little confuse use that keyword if not used at oop coding.

    have a read to this tutorial
    http://www.w3schools.com/htmldom/dom_obj_form.asp

    that is enough easy for navigating the form as you like after reading the tutorial

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try onsubmit

    Try the onsubmit event of the form.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Event Delegation</title>
    	<script type="text/javascript">
    	
    	window.onload = function() {
    		var frm = document.getElementById("formId");
    		frm.onsubmit = function() {
    			document.getElementById("btnSubmit").disabled = true;
    			return false;
    		}
    	}
    	</script>
    </head>
    <body>
    <form action="" method="post" id="formId">
    <input type="submit" value="Submit" name="btnSubmit" id="btnSubmit" />
    </form>
    </body>
    </html>
    Don't leave 'return false' in there, it stops the form submitting.

  4. #4
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. This code works.

    Don't leave 'return false' in there, it stops the form submitting.
    What do you mean? I should remove line "return false" from the code?

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Perhaps you've just forgotten the closing quotation mark.
    HTML Code:
    <input type="submit" value="Submit" onclick="this.disabled=true;">
    Although I agree with r51 in that javascript should be kept outside the HTML, in the <head>.

  6. #6
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Perhaps you've just forgotten the closing quotation mark.
    HTML Code:
    <input type="submit" value="Submit" onclick="this.disabled=true;">
    Although I agree with r51 in that javascript should be kept outside the HTML, in the <head>.
    Quotation mark is there, but onclick="this.disabled=true;" doesn't work.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think returning false should have no effect on the form submission. If you were to want to stop it submitting you would have to use preventDefault() for non-IE browsers and window.event.returnValue = false for IE.

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <input type="submit" onclick="this.disabled=true">
    This works for me in Firefox. I clicked and it disabled itself. Don't see why it shouldn't work in other browsers.

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure 'return false' at the end of the onsubmit event handler prevents submission. It certainly does for the code I posted.
    I think when you start to use the more flexible event model with listeners, then you need to start working with preventDefault etc.

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You use return false when it's an inline event handler and the others when it isn't. That's how it is with onclick and onmouseover at least, so I would expect it to be the same for onsubmit.


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
  •