jQuery disabled form is submitted on enter

Question

I have one jQuery form in which I am disabling the submit of form till the jQuery is initialized.

Code looks something like this

<form id="loginForm" role="form" class="form-horizontal col-md-8" action="">
   <input type="email"/>
   <input type="password"/>
   <input type="submit" class="disabled">
</form>

(code is bit simplified.) Notice class 'disabled'

On jQuery side, I'm doing this

$().ready(function() {
    $("#loginBtn").removeClass("disabled"); // This ensures that javascript was loaded before button is pushable
});

The problem is when the page is loading button is disabled and user is not allowed to click on it. But when button is disabled and user fills up the form and press enter. The form is getting submitted.

I want to stall submission of form (via any means) till the jQuery is properly loaded.

How can I achieve this?

Input has set properly id attribute? Why you dont't use disabled attribute instead of disabled class? — mgamon, Feb 13 '15 at 09:30
Look up : [Submitting a form on 'Enter' with jQuery?][1] [1]: http://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery?rq=1 — jupeter, Feb 13 '15 at 09:30
@mgamon I tried doing that. And on form submit action I tried to return false but it seems not working. — Ganesh Satpute, Feb 13 '15 at 10:02
@wit_peter Unfortunately jQuery cannot be used. Sole reason of this problem is that jQuery is not initialized. — Ganesh Satpute, Feb 13 '15 at 10:03

Bhushan Kawadkar · Answer 1 · 2015-02-13T10:02:51.217

0

Try this : modify your login form submit button as below

$("#loginForm").submit(function() {
   if($("#loginBtn").hasClass("disabled")) return false;
   //rest of your code as it is
      .....
}

NOTE - as per your html, submit button don't have id="loginBtn", please add it.

edited Feb 13 '15 at 10:02

answered Feb 13 '15 at 09:29

Bhushan Kawadkar

28,279
5
35
57

I just tried writing alert in that function it is not getting executed at all.. I have one function `$("#loginForm").submit(function() { // some code}`. Is it happening because of this? – Ganesh Satpute Feb 13 '15 at 09:59
Thanks for your efforts, Bhushan. But can't use jQuery as it being not initialized causing the problem. – Ganesh Satpute Feb 13 '15 at 10:06
jquery should get initialised first, you should include jquery and script in `` or before `` tag. Please share jsfiddle with your problem statement. – Bhushan Kawadkar Feb 13 '15 at 10:07

score 0 · Answer 2 · answered Feb 13 '15 at 09:33

0

You know that setting class="disabled" on a button, doesn't actually disable it, right? ;-)

I think that you need something like this:

<form id="loginForm" role="form" class="form-horizontal col-md-8" action="">
   <input type="email"/>
   <input type="password"/>
   <input type="submit" disabled>
</form>

$(function() {
    $("#loginForm input[type=submit]").attr("disabled", null); 
});

See JSFiddle here

answered Feb 13 '15 at 09:33

jcarrenog

199
1
3

As I mentioned in the question, **jQuery is not initialized at this point** So this won't work. If jQuery is initialized my code works perfectly fine – Ganesh Satpute Feb 13 '15 at 10:00
The point is the "disabled" attribute, not jQuery. If your problem is that the form is being submitted when the button is disabled, my code works. – jcarrenog Feb 13 '15 at 11:52

score 0 · Accepted Answer · answered Feb 13 '15 at 11:46

0

Just added onsubmit="return false"And it worked.

<form id="loginForm" role="form" class="form-horizontal col-md-8" action="" onsubmit="return false">

answered Feb 13 '15 at 11:46

Ganesh Satpute

3,664
6
41
78

jQuery disabled form is submitted on enter

3 Answers3