I have an HTML form in my site, and for whatever reason I am unable to enter text in the inputs when viewing the site in Firefox (and only Firefox). My form is set up as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<form action="/MyAction/" method = "post" id="register">
<div class="registerField">
<label for="signupFirstName" class="registerLabel">First Name</label>
<input type="text" name="signupFirstName" id="signupFirstName" />
</div>
<div class="registerField">
<label for="signupLastName" class="registerLabel">Last Name</label>
<input type="text" name="signupLastName" id="signupLastName" />
</div>
<div class="registerField">
<label for="signupPassword" class="registerLabel">Enter Password</label>
<input type="password" name="signupPassword" id="signupPassword" autocomplete="off" />
</div>
<div class="registerField">
<label for="retypeSignupPassword" class="registerLabel">Re-enter Password</label>
<input type="password" name="retypeSignupPassword" id="retypeSignupPassword" autocomplete="off" />
</div>
<div>
<div id="registerButtons">
<label for="signupButton">
<input type="submit" value = "Create Account" name = "registerButton" id="signupButton"/>
</label>
</div>
</div>
</form>
I had a callback attached to the keyup event on the form (which did indeed register the event), but that has since been disabled and I still have this problem. Also, when I right-click and select “Inspect Element” on any of the input elements to launch Firebug, everything works. Thanks in advance for any and all advice.
EDIT: Thanks to everyone who’s commented so far. Below is the Javascript method off of the controller we use to coordinate the form:
if (this.view.hasClass("readyToSubmit"))
{
return true;
}
else
{
var email = viewState.userState.user.EmailAddress;
var password = $("#signupPassword").val();
var passwordConfirm = $("#retypeSignupPassword").val();
var firstName = $("#signupFirstName").val();
var lastName = $("#signupLastName").val();
var isOrg = false;
if (!isValidEmail(email))
{
this.registerStatusController.set("Invalid email");
return false;
}
if ((password == null) || (password == undefined) || (password.length < 6))
{
this.registerStatusController.set("Please enter a total of at least 6 letters, numbers, and symbols for your password");
return false;
}
if (!(password == passwordConfirm))
{
this.registerStatusController.set("Your passwords do not match");
return false;
}
if (firstName == '' || lastName == '')
{
this.registerStatusController.set("You must provide a first and last name.");
return false;
}
requestController.post("/Home/MyAction",
{
username: email,
password: password,
passwordConfirm: passwordConfirm,
firstName: firstName,
lastName: lastName,
timeOffset: -(new timezoneJS.Date()).getTimezoneOffset(), //Our tzo is negative of server side tzo
isOrganization: isOrg
},
$.scope(this.callbackRegistered, this),
function (XMLHttpRequest, textstatus, errorThrown)
{
this.registerStatusController.set("A system error has occurred. Please try again later.");
});
return false;
}
this.callbackRegistered = function (data, textStatus)
{
if (data == 0)
{
viewState.userState.isProvisional = false;
this.registerStatusController.set("New account created");
this.view.addClass("readyToSubmit");
// $("#register").submit();
// Run the post-registration action and then clear it.
if (this.postRegisterAction)
{
this.postRegisterAction();
this.postRegisterAction = null;
}
this.hide();
}
else
{
$('body').css("cursor", "auto");
if (data == 1)
{
this.registerStatusController.set("You are already logged in");
}
else if (data == 3)
{
this.registerStatusController.set("Your account is already registered");
}
else if (data == 4)
{
this.registerStatusController.set("Your invitation code is not valid");
}
else
{
this.registerStatusController.set("The system is not available at this time. Please try again later.");
}
}
}
No CSS has been defined on these inputs.
One other thing: this form is stored in a pop-over div that overlays the entire page. Its CSS is defined below:
#registerPopOver
{
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100%;
}
The form resides in a div within #registerPopOver:
#registerPopOverInner
{
margin: auto;
background-color: white;
width: 300px;
margin-top: 20%;
border: 1px #CCC solid;
padding: 4px;
}
Thank you all again for your advice.
We found the problem. Turns out a javascript-based calendar was stealing our focus. Thanks to everyone who responded!