Hallo,
ich habe eine Art Tab/Registerreiter-Formular für eine Suche. Dabei werden nicht sichtbare Formularelemente deaktiviert. Das verhindert erstens, dass der POST-Request unnötig groß wird (brauche ich, da ich diesen Speichere) und zweitens, damit ich kein Entscheidungsproblem habe, wenn alle Formularelemente aller Tabs ausgefüllt werden.
Das Problem ist nun, dass durch die Deaktivierung offenbar das Abschicken per ENTER nicht mehr möglich ist. Im ersten Tab, der von Anfang an sichtbar ist geht das, bei den restlichen nicht.
(getestet Firefox)
Kann mir jemand das erklären? Es kann ja offenbar nicht daran liegen, dass dieser "Event" (Abschicken per Enter) durch die Deaktivierung des Feldes verloren geht, da ja der erste Tab immer geht, also auch, wenn seine Felder einmal deaktiviert wurden, weil Tab2 geöffnet wurde.
Zum Testen habe ich mal die Flags useJQuery und useDisable eingebaut. Bei useDisable = true gibt es das erwähnte Problem, bei false tritt das Problem nicht aus. Das Umbauen ist leider nicht möglich, ich muss also deaktivieren
ich habe eine Art Tab/Registerreiter-Formular für eine Suche. Dabei werden nicht sichtbare Formularelemente deaktiviert. Das verhindert erstens, dass der POST-Request unnötig groß wird (brauche ich, da ich diesen Speichere) und zweitens, damit ich kein Entscheidungsproblem habe, wenn alle Formularelemente aller Tabs ausgefüllt werden.
Das Problem ist nun, dass durch die Deaktivierung offenbar das Abschicken per ENTER nicht mehr möglich ist. Im ersten Tab, der von Anfang an sichtbar ist geht das, bei den restlichen nicht.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
div#two {
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var useJQuery = true;
var useDisable = true;
if (useJQuery) {
function show1() {
var one = $("#one");
one.show();
if (useDisabled) {
one.find("input").removeAttr("disabled");
}
var two = $("#two");
two.hide();
if (useDisabled) {
two.hide().find("input").attr("disabled", "disabled");
}
}
function show2() {
var two = $("#two");
two.show();
if (useDisabled) {
two.find("input").removeAttr("disabled");
}
var one = $("#one");
one.hide();
if (useDisabled) {
one.hide().find("input").attr("disabled", "disabled");
}
}
} else {
function show1() {
var one = document.getElementById("one");
one.style.display = "block";
if (useDisable) {
var elements = one.getElementsByTagName("INPUT");
for (var i = 0, x = elements.length; i < x; ++i) {
elements[i].disabled = false;
}
}
var two = document.getElementById("two");
two.style.display = "none";
if (useDisable) {
elements = two.getElementsByTagName("INPUT");
for (var i = 0, x = elements.length; i < x; ++i) {
elements[i].disabled = true;
}
}
}
function show2() {
var two = document.getElementById("two");
two.style.display = "block";
if (useDisable) {
var elements = two.getElementsByTagName("INPUT");
for (var i = 0, x = elements.length; i < x; ++i) {
elements[i].disabled = false;
}
}
var one = document.getElementById("one");
one.style.display = "none";
if (useDisable) {
elements = one.getElementsByTagName("INPUT");
for (var i = 0, x = elements.length; i < x; ++i) {
elements[i].disabled = true;
}
}
}
}
</script>
</head>
<body>
<form action="" method="post">
<div id="one">
1
<input type="text" />
<input type="submit" />
</div>
<div id="two">
2
<input type="text" />
<input type="submit" />
</div>
<div>
<input type="button" onclick="show1();return false" value="show 1" />
<input type="button" onclick="show2();return false" value="show 2" />
</div>
</form>
</body>
</html>
Kann mir jemand das erklären? Es kann ja offenbar nicht daran liegen, dass dieser "Event" (Abschicken per Enter) durch die Deaktivierung des Feldes verloren geht, da ja der erste Tab immer geht, also auch, wenn seine Felder einmal deaktiviert wurden, weil Tab2 geöffnet wurde.
Zum Testen habe ich mal die Flags useJQuery und useDisable eingebaut. Bei useDisable = true gibt es das erwähnte Problem, bei false tritt das Problem nicht aus. Das Umbauen ist leider nicht möglich, ich muss also deaktivieren
Kommentar