ansaurus

Question

lock all submit button before page fully rendered

Answer 1

+4 A:

By default, you have your submit buttons have the disabled attribute set to true:

<input type="submit" disabled="disabled" />

Then, once the page loads, you can do:

$('input').removeAttr('disabled');

Mike Sherov 2010-07-06 02:56:50

It's actually disabled="disabled"

Marko 2010-07-06 03:03:15

your code will do the opposite to the OP want.It will enable the element..

Kai 2010-07-06 03:04:45

Edited the answer to show disabled="disabled" - it's an otherwise good answer.

thomasrutter 2010-07-06 03:05:39

@Kai, no, it's exactly what the OP wants, which is enable the elements once the page is fully rendered.

Mike Sherov 2010-07-06 03:08:52

opp! yes..my mistake..!

Kai 2010-07-06 03:10:20

@Marko, actually, disabled will work with any value, even "false"! But still, the correct value IS "disabled", so +1 on your comment.

Mike Sherov 2010-07-06 03:11:56

Thanks Mike, I usually just do <input type="button" disabled />. You can omit the value of that attribute :)

Marko 2010-07-06 03:16:15

@Marko, yes, that's why it's value is unimportant and you have to do removeAttr

Mike Sherov 2010-07-06 03:18:47

Answer 2

+1 A:

<input id="form-submit" type="submit" disabled="disabled" value="Submit" />

$(document).ready(function() {
    $("#form-submit").removeAttr('disabled');
});

Marko 2010-07-06 03:04:51

Answer 3

+1 A:

jQuery

$(document).ready(function(){
  $(":button,:submit").removeAttr("disabled");  
});

HTML

<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">

Gert G 2010-07-06 03:05:43

Answer 4

+4 A:

Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:

<script>
   // Keep all submit buttons from working
   $('input:submit').live('click', function () {
      return false;
   });

   // After everything loads, remove the restriction
   $(window).load(function(){
       $('input:submit').die();
   });
</script>

Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).

Doug Neiner 2010-07-06 03:12:36

However, this is still dependent on jquery loading before the page is fully rendered!

Mike Sherov 2010-07-06 03:17:15

If jQuery is in your <head> it *will* load before the page is rendered. In fact, page rendering will halt while it loads.

Doug Neiner 2010-07-06 03:18:13

Well then, if the jQuery is in the head, then the rest of the exercise is useless. :)

Mike Sherov 2010-07-06 03:20:07

@Mike how is the rest of the exercise useless? In this use case, rendering a page with all the controls disabled is bad idea unless the app forces the user to have JS enabled. Loading JS in the <head> is the right choice to avoid rendering a useless page to those w/o JS enabled.

Doug Neiner 2010-07-06 03:23:02

I was just joking around, meaning that the exercise looked like it was calling for non-blocking code.

Mike Sherov 2010-07-06 03:27:22

@Mike Haha... its possible ;) Well, between the two of us we have the OP covered!

Doug Neiner 2010-07-06 03:38:59

Answer 5

A:

Couldn't you do something like

window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}

I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.

qw3n 2010-07-06 03:58:36

ansaurus

tags:

views:

answers:

lock all submit button before page fully rendered

related questions