Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

lock all submit button before page fully rendered

may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?

like image 432
cometta Avatar asked Jul 06 '10 02:07

cometta


People also ask

How do you disable submit button until all fields are entered?

Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty.

How do you disable a button in react until form is filled?

To disable a button when an input is empty with React, we can set the input's value as a state's value. Then we can use the state to conditionally disable the button when the state's value is empty. to create the name state with the useState hook.


4 Answers

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 by returning false from onclick handlers
   $('input:submit').live('click', function () {
      return false;
   });

   // After everything loads, remove the the "live" restriction via "die"
   $(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).

like image 176
Doug Neiner Avatar answered Nov 15 '22 21:11

Doug Neiner


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');
like image 31
Mike Sherov Avatar answered Nov 15 '22 21:11

Mike Sherov


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">
like image 45
Gert Grenander Avatar answered Nov 15 '22 20:11

Gert Grenander


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

$(document).ready(function() {
    $("#form-submit").removeAttr('disabled');
});
like image 21
Marko Avatar answered Nov 15 '22 19:11

Marko