I'm having trouble submitting forms using the enter key in IE 6 & 7 where the form was hidden. I have pages that need to be hidden when loading and are then displayed when they are fully loaded. Some of these pages contain forms. These forms will not submit when the enter key is pressed because the form was hidden.
Apparently this has nothing to do with the current display status of the form. I've tried a number of work arounds including:
- Using visibility vs. display
- Removing the attribute from the body tag and applying the style with javascript following the tag in the document
- Applying the style with a class attribute
- Using an input element of type submit in the form
- Setting the height of the body to 0px then expanding on load (this doesn't work because the content forces the height to expand so the display is not hidden)
In every case, the form will not submit once it has been hidden, regardless of the current display state of the form. I suspect that it is some security feature that is not smart enough to determine the current display status of the form. This works fine in Firefox.
Does anyone have any suggestions on how I can hide the page while it is loading, display it following loading, and submit the contained form with the enter key in IE 6 & 7. I'm including some code below that will help you test this. Alternately, comment out the two body tags to see the difference.
___________________________________________________________
<html>
<body id="hideThenShow" style="display:none;" onload="doOnload();">
<!--body id="hideThenShow" onload="doOnload();"-->
<script>
function resetForm()
{
document.sampleForm.field1.value = "";
document.sampleForm.field2.value = "";
document.sampleForm.check1.checked = false;
document.sampleForm.radio[0].checked = false;
document.sampleForm.radio[1].checked = false;
}
function doOnload()
{
var obj = document.getElementById("hideThenShow");
if ("none" == obj.style.display)
{
alert("The docuemnt loaded, hidden and about to display.");
}
obj.style.display = "block";
// Register Events
var formObj = document.getElementById("sampleForm");
addEvent(formObj, "submit", doSubmit, false);
}
function doSubmit(event)
{
var alertMsg = "The submit event was fired.\n\n";
alertMsg += "The form values are as follows:\n\n";
alertMsg += "Field 1 = [" + document.sampleForm.field1.value + "]\n";
alertMsg += "Field 2 = [" + document.sampleForm.field2.value + "]\n";
alertMsg += "Checkbox = [" + (document.sampleForm.check1.checked "CHECKED" : "NOT CHECKED" ) + "]\n";
alertMsg += "Radio 1 = [" + (document.sampleForm.radio[0].checked "SELECTED" : "NOT SELECTED") + "]\n";
alertMsg += "Radio 2 = [" + (document.sampleForm.radio[1].checked "SELECTED" : "NOT SELECTED") + "]\n";
alertMsg += "Hidden Value = [" + document.sampleForm.hiddenValue.value + "]\n";
alert(alertMsg);
if (!event) event = window.event;
if (event.stopPropagation)
{
event.stopPropagation();
event.preventDefault();
}
else
{
event.cancelBubble = true;
event.returnValue = false;
}
return false;
}
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent)
{
var r = elm.attachEvent("on" + evType, fn);
return r;
}
}
</script>
<form id="sampleForm" action="Sample.html" method="post" name="sampleForm" autocomplete="off">
<input type="hidden" name="hiddenValue" value="true">
<b>Sample Form</b>
<br><br>Field 1: <input type="text" name="field1" value="" size="20" maxlength="40">
<br>Field 2: <input type="text" name="field2" value="" size="20" maxlength="40">
<br>Checkbox: <input type="checkbox" name="check1" value="true">
<br>Radio 1: <input type="radio" name="radio" value="radio1">
<br>Radio 2: <input type="radio" name="radio" value="radio2">
<br><input type="image" tabindex="-1" name="SearchImg" src="">
<!--The preceeding element should enable form submission when the enter key is pressed.
Reference a transparent 1x1 gif image if you don't like the broken image in the page.-->
</form>
</body>
</html>
IE 6 & 7 Will Not Submit Forms with the Enter Key when the Form WAS Hidden
KingKoo
Thank you for your assistance. It was most helpful.
I don't know what IE was doing, but if it was trying to implement security for hidden forms, then not only is it insensitive to the dynamic nature of Web pages, but it has a few gaping holes.
I did a little digging on the Internet and found some clues to update my code. Here's the code I used. My production code will simply change styles, but this gets the job done in Firefox and IE.
Change the body tag in the previous code as follows:
<body id="hideThenShow" style="opacity:0; filter:alpha(opacity=0); -moz-opacity:0;" onload="doOnload();">
Change the doOnload function as follows:
function doOnload()
{
var obj = document.getElementById("hideThenShow");
alert("The docuemnt loaded, hidden and about to display.");
obj.style.display = "block"; // no longer needed
obj.style.filter = "";
obj.style.opacity = "";
obj.style.mozOpacity = "";
// Register Events
var formObj = document.getElementById("sampleForm");
addEvent(formObj, "submit", doSubmit, false);
}
zz2
instead of hiding the window, you can