nicht angemeldet
Rolf BHallo Hartmut,
da scheine ich dann doch auf dem falschen Weg gewesen zu sein. Wenn ich oben "Volkswagen" und "Golf" auswähle und dann auf "Neuheiten" klicke, dann soll man nur die VW Golf-Neuheiten sehen?
Das ist für den Nutzer und für deine Server ggf. eine mühsame Sache. Ich wähle "VW" aus. Es gibt einen Postback und der Server liefert eine Trefferseite für alle VWs. Dann wähle ich "Golf". Es gibt noch einen Postback und der Server liefert eine Trefferseite für alle VW Golf. Dann drücke ich Bremensien, und ich finde alle VW Golf Produkte, die brementypisch sind (z.B. ein VW-Symbol, das grün-weiß ist und nach Fisch riecht)?
die Textfelder nehmen immer den ersten Button mit.
Den Grund dafür hatte ich Dir um 12:29 genannt: Du drückst ENTER. Das tust Du bei den Dropdown-Selektionen nicht. Und das führt zu einem Submit des Forms über den ersten Button. Works as specified.
Ist ein weiterer Button "Suchen", der an erster Stelle steht, da nicht doch sinnvoller als Auto-Postbacks? Dieser Button würde dann auch das Textfeldproblem lösen.
Ohne diesen Button bräuchtest Du wohl eine Prise clientseitiges JavaScript, um die ENTER-Taste im Textfeld daran zu hindern, den Default-Submit auszulösen. Und zwar einen keydown-Handler am form. Ich mach's mal mit
<form id="suchform" action="#" method="GET">
<label>Suchbegriff:<br>
<input type="text" name="bar" onchange="this.form.submit()">
</label>
<button name="shortcut" value="neu">Neuheiten</button>
<button name="shortcut" value="jahr">Rund ums Jahr</button>
<button name="shortcut" value="fisch">Bremensien</button>
</form>
<script>
document.getElementById("suchform")
.addEventListener("keydown", function(event) {
if (event.code == "Enter") {
event.preventDefault();
event.target.form.submit();
}
});
// Erweiterung: Ersetzt alle onchange-Attribute an den <select>
// und <input> Elementen
document.getElementById("suchform")
.addEventListener("change", function(event) {
event.target.form.submit();
});
</script>
Das <script> Element muss hinter dem <form> stehen, sonst brauchst Du noch einen ready-Handler. Am besten setzt Du es an das Ende des <body> (aber VOR das </body> Tag).
Der erste Eventhandler reagiert auf das Drücken der ENTER Taste und verhindert, dass das Form daraufhin seine Default-Aktion auslöst: den ersten Button als Default-Button setzen und sich dann abschicken. Statt dessen wird nur submitted.
Für den zweiten Eventhandler kannst Du Dir überlegen, ob Du das willst. Events über onXxxx Attribute zu registrieren ist nämlich eigentlich etwas, was veraltet ist. Man verwendet addEventListener, um auf einem DOM Element einem Event eine Funktion zuzuordnen. Die bekommt dann auch gleich einen Parameter: das event-Objekt.
Events werden nicht nur auf dem Objekt gemeldet, auf dem sie ausgelöst werden. Die meisten von ihnen "blubbern" in der Elementhierarchie nach oben, und das change-Event gehört dazu (unser Wiki weiß, welche Events blubbern und welche nicht). Wenn Du also bei jedem Eingabeelement auf change reagieren willst und das auch noch für alle Elemente gleich, dann kannst Du Dich auf das form setzen, die change-Events zu Dir hin blubbern lassen und sie dort behandeln. Das onchange-Attribut auf den <select> und <input> Elementen entfällt dann und dein HTML ist sauberer. Man nennt diese Technik "unaufdringliches JavaScript".
Rolf
sumpsi - posui - obstruxi
Der Martin
MudGuard