I have a form which needs javascript to be enabled for validation, is there a way to disable submit button when javascript is disabled and warn user to enable it first ?
-
7Sanity checking of data client side can only ever be a convenience for the user. It cannot provide you with any security. Malicious clients can submit whatever data they like. Perform you checks on the server. Then you won't need to worry about the user having JS enabled or not.Quentin– Quentin2009-12-27 00:30:58 +00:00Commented Dec 27, 2009 at 0:30
-
1Is there a business reason for this? Just FYI (if you're new to this) all validation done by JavaScript can easily be circumvented - you should always validate form data on the server.John Rasch– John Rasch2009-12-27 00:31:11 +00:00Commented Dec 27, 2009 at 0:31
-
reason for this is i have multiple forms which calculate price on many items, when javascript is disabled validation wont work (i am using jquery plugin for validation), it wont work and when user submit it , form will send empty fieldsdatisdesign– datisdesign2009-12-27 00:37:04 +00:00Commented Dec 27, 2009 at 0:37
-
1Client side validation not taking place will not cause forms to fail to submit data. You are either misdescribing or misdiagnosing the problem. Either way the solution is "Make it work without JS" not "Try to force people to use JS".Quentin– Quentin2009-12-27 00:52:28 +00:00Commented Dec 27, 2009 at 0:52
-
its something like this page : psd2html.com/order-now.html if you disable javascript, the forms wont work !datisdesign– datisdesign2009-12-27 00:57:17 +00:00Commented Dec 27, 2009 at 0:57
|
Show 1 more comment
6 Answers
Disable it by default and use JavaScript to enable it.
<input type="submit" value="Submit" id="submitBtn" disabled />
<script type="text/javascript">
var _onload = window.onload || function()
{
document.getElementById('submitBtn').disabled = false;
}
_onload();
</script>
That way, if JavaScript is disabled then the button will also remain disabled.
jQuery version:
<script type="text/javascript">
$(function(){
$('#submitBtn').attr('disabled', false);
});
</script>
2 Comments
Christian C. Salvadó
Just be careful with the
_onload function, because if the window.onload property has been previously set, your function will never run. Actually, since the script block is defined after the input, you can assume that getElementById will find it because when the script is evaluated, the input is already in the DOM...
Darrell Brogdon
@CMS Right. Which is why I prefer jQuery.
Have it disabled by default and if there is javascript, then enable it.
Comments
Don't define an HTML form action, but rather define only an onSubmit javascript event handler. If javascript is not enabled, the onSubmit will not fire, but since there is no form action, the submit button won't do anything either.
You could also opt to have the HTML form action go to an error page explaining that javascript must be enabled, so that the user has some sort of feedback.
Alternatively you can start with the button disabled (as other posters suggested). If you do that, you should also consider a message on the form indicating why the button is disabled. Remove that message with javascript if it is enabled at the same time you re-enable the button.
Comments
Because disabling a button programmatically depending on the environment and alerting him are both tasks depending on some kind of a scripting language ( like JavaScript ), the answer is no :-/
3 Comments
John Rasch
Well you could have it disabled by default and then enable it with JavaScript
moritz
right! i didn't think of that, but anyways, I'm not a big fan of javascript dependencies...
Jon
is the question not to be dependant on javascript?
You got solution for enabling part. For Alerting part you can use good old tag. (-:
<noscript>
<H1> It Wont work w/o javascript. Please Enable</h1>
</noscript>
Comments
Excuse the late reply but this got me thinking on how to tackle this as I have a similar issue and it led me here. You should always program your site without javascript and add it after to enhance it, but in my case using things like lightbox are being used as input, which if javascript is disabled, doesn't work right (especially since mine passes values to its parent).
My suggestion is that hopefully you have PHP enabled, so you can simply put at the top of your document
<?php if (isset($_POST)) {
//redirect to page, or set a message variable saying "no results saved"
header('some_page');
$message = "We've detected you do not have " .
"javascript enabled. No results saved";
} ?>
From there, you will have to set all buttons on your page to say
<input name="button" id="button" type="submit" onclick="return false;" />
or you could more simply go
<form name="my_form" id="my_form" method="post" action="" onclick="return false;" />
Hope this helps!
