My website forms not working in Mozilla
I have a rather "weird" problem with Mozilla web browser.
I created a website which contains many basic forms, built with HTML5 (for example : simple login form, which asks for a user's login and password).
It's a very simple and basic login form; it is submitted when the user clicks the "submit" button.
Here is the code :
<form id="myform" action="login.php" method="post"> Username : <input type="text" name="username" minlength="4" required/> Password : <input type="password" name="password" minlength="8" required /> <input type="submit" name="submit" id="submit" value="Log In"/>
The problem I am having is with Mozilla Firefox browser.
My form works with EVERY browser out there : Chrome, Safari, Opera, IE, etc
When I open the form in other browsers, the cursor is blinking in the "Username" field, of course. As it should be.
But, when I open this form in Mozilla, there is no cursor blinking. I cannot write anything in the username or password fields. (It is as though the fields have been DISABLED, or set to READ-ONLY)
But, when I click on the "Log In" button, then an error-alert message pops up, saying : "Username is a required field" (obviously).
Then --- and only then --- the cursor finally appears in the Username text-box, and I am able to provide the login credentials.
I find this rather amusing. But, it certainly won't be amusing to someone who is trying to log into my website with Mozilla Firefox!
What could the problem be?
I know there is nothing wrong with my code, because the form works in ALL browsers. It even works in Mozilla, too...........but only AFTER I have clicked on the "submit" button, and then I am prompted to input the login credentials.
All Replies (20)
UPDATE
I finally found the cause of this problem!
One word : "Javascript"!
As weird and downright ludicrous as this seems, the reason why my forms are behaving this way is because : Javascript is ENABLED.
Once I disable Javascript in Mozilla, the forms work perfectly!
(And, it's not just my LOGIN form. It's every form in my website : login, registration, selection, drop-down menus, etc)
To call this "ludicrous" is an understatement. Why would any browser work properly only if JS was disabled ?? Almost 100% of anything done on the web these days requires that JS be enabled !
I don't even know how to begin to address this problem.
Should I paste a warning on my website, telling my users about this, and letting them know that : to use any of my website's forms in Mozilla, they need to first click on ANY random button (to get the form to "wake-up" from it's Javascript-induced coma ?? )
It sounds that some JavaScript is running that prevents access to the input field.
Can you reach these fields via the Tab key?
You can right-click and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer) with this element selected to check out what element gets selected and its attributes and possible onclick events.
cor-el said
It sounds that some JavaScript is running that prevents access to the input field. Can you reach these fields via the Tab key? You can right-click and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer) with this element selected to check out what element gets selected and its attributes and possible onclick events.
No, I cannot reach the fields via the Tab Key. First I have either click on LOGIN or CANCEL (any button on the form), to get a reaction from the form. Only then I am able to input data.
I noticed somewhere online that someone else had a similar problem, when he tried to input his password into a form on Mozilla
Apparently he solved the problem by simply disabling Pop-up Blocker
I tried that also. And it did not work
I think that you are right; must be a JavaScript running. But, I dont know which, and I dont know WHERE ((
What element gets selected in the Inspector if you right-click an input field?
cor-el said
What element gets selected in the Inspector if you right-click an input field?
This is what happens when I right-click on the "Username" field :
In the "Inspector" Tab, under "Input", I get the following line from my HTML form :
<input type=text" required="" size=40 autocomplete="off" name="login"></input>
(Not sure if this means anything, but the "required" attribute is NOT how I wrote it in my form. In my form, I simply put "required"..........not "required="")
Then, on the right-hand side, under "Rules", I get this :
element {
}
inherited from body#body-color
body {
line-height: 1;
}
html, body, article, footer, nav {
font-size: 100%;
}
(in my CSS file, body-color is simply :
#body-color{ background-color:white; } )
Modified by cor-el
Is there an 'ev' button appended to that input field that indicates that JavaScript in tied to that element?
cor-el said
Is there an 'ev' button appended to that input field that indicates that JavaScript in tied to that element?
No, there isn't.
I'm trying to attach a screen-shot here, but this forum keeps rejecting my attachment as "invalid"
hey can you please tell the code for your form. I tried and it works fine in my browser.
Thank you regards kushagra
kushagra said
hey can you please tell the code for your form. I tried and it works fine in my browser. Thank you regards kushagra
Hi,
the full code is in my initial post.
But, here it is again :
<fieldset><legend style="font-size: 120%; text-align:center"><b>Please log in :</b></legend> <form method="post" action="login"> <br> <b>Username</b> <br><input type="text" name="login" size="40" autocomplete="off" required><br><br> <b>Password</b> <br><input type="password" name="password" size="40" autocomplete="off" required> <br><br> <input type="submit" name="submit" value="Log In" class="myButton"> <input type="button" value="Cancel" onclick="location.href='/example.com/cancel.php'" class="myButton"> <br><br><br> <a href="/example.com/forgot_username.php" target="_blank"><b>Forgot your Username ?</b></a> <br><br> <a href="/example.com/forgot_password.php"><b>Forgot your Password ?</b></a> </form> </fieldset>
Modified by cor-el
hey thanks for providing with your code again. Your code works absolutely fine in my FF browser(v. 38.0.5). I can write in user name as a text, in pass as password the button are also working in proper format.
i just simply copied your code in between <body> </body> tag followed by the syntax
i don't find any problem as you mentioned
Modified by kushagra
What scripts are running on your page?
kushagra said
hey thanks for providing with your code again. Your code works absolutely fine in my FF browser(v. 38.0.5). I can write in user name as a text, in pass as password the button are also working in proper format. i just simply copied your code in between <body> </body> tag followed by the syntax i don't find any problem as you mentioned
Thank you Kushagra.
If my form is working on your FF browser, it means the problem lies with my own browser.
I am using the latest version of FF : 39.0
Most people who have tested my code, also have the same problem. And they are also using the latest versions of FF
Is it possible that the new FF versions have something which is blocking my code??
cor-el said
What scripts are running on your page?
You asked this question before. I don't have any scripts running on my page
As I mentioned earlier : if there are any scripts running somewhere, I don't know what, and I don't know where to look for them. :(
The main point is : FF is the ONLY browser where I am having this problem. So, obviously, the problem is the browser, not my code.
Also, as I mentioned at the beginning, when I disabled Javascript on Mozilla, the problem vanished.
Which concludes that : the issue is with Javascript
But, which script ?? and where??
You wrote above that it works with JavaScript disabled.
Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
- Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
- Do NOT click the Reset button on the Safe Mode start window
I will again check this code on the FF browser (v 39.0) and get back to you with the possible solution i can make through it. This will take few min is that be fine.
cor-el said
You wrote above that it works with JavaScript disabled. Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
- Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
- Do NOT click the Reset button on the Safe Mode start window
When I start FF in safe mode, all Add-ons and Extensions are disabled.
The only Extension I have (which is disabled right now) is the Anti-virus Browser safety) which I am using (Avira)
Modified by paulhraines
kushagra said
I will again check this code on the FF browser (v 39.0) and get back to you with the possible solution i can make through it. This will take few min is that be fine.
Sure, no problem
Thanks
hey paulhraines The code also runs without any error in FF(v39.0) on mac and on windows. I dont found any sort of problem in code as well as in browser. Please check all the syntaxes once again. might your problem gets resolve.
Thank you.
if not fell free to contact us.
kushagra said
hey paulhraines The code also runs without any error in FF(v39.0) on mac and on windows. I dont found any sort of problem in code as well as in browser. Please check all the syntaxes once again. might your problem gets resolve. Thank you. if not fell free to contact us.
Thanks. I have checked each and every which way
I simply have no clue as to why this is happening.
If it was just me, I would guess that there is something wrong with my own browser............or even my laptop
But, everyone else who has tested this form, all told me the same thing : the form does not work for them, either. It prevents you from inputing any data, unless you first CLICK one of the buttons on the form