JavaScript to enable "submit" button (doesn't work)

Question

I need the button "submit" to be disabled unless JavaScript is on.

I tried:

1.

<input onLoad="this.disabled=false" id="post-comment" type="submit" 
value="Post Your Comment" disabled="disabled"/>

2.

<input onLoad="this.removeAttribute('disabled');" id="post-comment" type="submit"
value="Post Your Comment" disabled="disabled"/>

3.

<input onLoad="document.getElementById('post-comment').removeAttribute('disabled');"
id="post-comment" type="submit" value="Post Your Comment" disabled="disabled"/>

Doesn't work. I'm new to JavaScript, but can't find answer on the net.

nickf · Accepted Answer · 2010-03-17 23:28:26Z

4

The problem is that input elements don't have an "onload" event. The spec shows the available events as:

  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  onclick     %Script;       #IMPLIED  -- a pointer button was clicked --
  ondblclick  %Script;       #IMPLIED  -- a pointer button was double clicked--
  onmousedown %Script;       #IMPLIED  -- a pointer button was pressed down --
  onmouseup   %Script;       #IMPLIED  -- a pointer button was released --
  onmouseover %Script;       #IMPLIED  -- a pointer was moved onto --
  onmousemove %Script;       #IMPLIED  -- a pointer was moved within --
  onmouseout  %Script;       #IMPLIED  -- a pointer was moved away --
  onkeypress  %Script;       #IMPLIED  -- a key was pressed and released --
  onkeydown   %Script;       #IMPLIED  -- a key was pressed down --
  onkeyup     %Script;       #IMPLIED  -- a key was released --

Since it doesn't appear as though any of those will help you, you're probably best off to add the event to the onload of the body element (or through a more robust means, like jQuery's document ready function). Here's the quick hack way to do it:

<body onload="document.getElementById('post-comment').disabled=false">

answered Mar 17, 2010 at 23:28

nickf

548k199 gold badges660 silver badges727 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Buhake Sindi Over a year ago

That won't work...The asker wants the button disabled until JS is active, and onload requires JS enabled.

Eli Grey · Accepted Answer · 2010-03-18 02:14:57Z

2

You want this:

<input id="post-comment" type="submit" value="Post Your Comment" disabled="disabled"/>
<script type="text/javascript">
document.getElementById("post-comment").disabled = false;
</script>

To everyone else: Why are you waiting for onload?

answered Mar 18, 2010 at 2:14

Eli Grey

36k14 gold badges80 silver badges96 bronze badges

Comments

Chris Knight · Accepted Answer · 2010-03-17 23:34:08Z

1

How about:

<script> 
function enableInput(){
    document.getElementById('post-content').disabled=false;
}
</script>
<body onload="enableInput();">
...
<input id="post-comment" type="submit" 
    value="Post Your Comment" disabled="true"/>

This will load the input button disabled by default and execute the javascript to enable it on load of the web page (which of course will only happen with javascript enabled.

answered Mar 17, 2010 at 23:34

Chris Knight

25.2k24 gold badges92 silver badges137 bronze badges

Comments

Buhake Sindi · Accepted Answer · 2010-03-17 23:34:52Z

1

Based on your sample code

<input id="post-comment" type="submit" value="Post Your Comment" disabled="disabled" />

then on javascript

<script type="text/javascript">
   window.onload = function() {
     document.getElementById('post-comment').disabled=false;
   }

   //OR using JQuery
   $(document).ready(function() {
      document.getElementById('post-comment').disabled=false;
   });
</script>

//That's it really.

Hope this helps.

answered Mar 17, 2010 at 23:34

Buhake Sindi

89.4k30 gold badges176 silver badges234 bronze badges

Comments

Vishal Seth · Accepted Answer · 2010-03-18 02:31:20Z

1

By "unless javascript is on", do you mean that a form's submit should be disabled unless JS is supported on that browser?

If yes, you should make the submit button disabled by default. Write your JS code to enable the submit button in comment block (). Also use the <noscript> tag to inform the client that functionality is not available until JS is made enabled on the client browser.

answered Mar 18, 2010 at 2:31

Vishal Seth

5,0487 gold badges29 silver badges29 bronze badges

Comments

Kevin Crowell · Accepted Answer · 2010-03-17 23:18:38Z

0

You can force the submit button to call a javascript function that actually does the submit.

answered Mar 17, 2010 at 23:18

Kevin Crowell

10.2k4 gold badges37 silver badges51 bronze badges

Comments

Mike Pollitt · Accepted Answer · 2010-03-17 23:27:43Z

0

The onload parameter to the submit element is a Javascript event handler. Therefore, if the user does not have Javascript turned on, this event will not fire.

I suggest the following:

Instead of having a submit button in the page, have an image which is of a greyed out button. Then, do something like this:

<img onLoad="enableSubmit()" .../>

The onLoad event handler will only fire if Javascript is enabled. In your enableSubmit() function (defined elsewhere), you can replace the img tag with an input type="submit".

answered Mar 17, 2010 at 23:27

Mike Pollitt

2,0571 gold badge17 silver badges13 bronze badges

Collectives™ on Stack Overflow

JavaScript to enable "submit" button (doesn't work)

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related