form button onclick

[fakerer]

Hallo,
ich versuche in einem Formular einen Link wie einen Button aussehen zu lassen.
Damit das ganze in allen Browsern möglichst gleich aussehen dachte ich ich versuch mal die Links über Button zu realisieren.
Da <a><button></button></a> nicht so ganz geht (ich dachte ich versuchs einfach mal) dachte ich ich mach das ganze über
<button onclick="return false; window.location.href='/steite2/';">Seite 2</button>
zu versuchen da hab ich das Problem das immer das Formular abgeschickt wird.

Frage ist gibts da eine Lösung dachte eigentlich das return flase löst das Problem aber irgendwie tut es nicht so ganz wie ich es gern hätte.

Oder sollte man das ganze ohnehin anders angehen?
Link als a und mit css formatieren klappt zwar auch genauso wie input tyle=button" und so aber da gibts immer wieder Probleme in den unterschiedlichsten Browsern. Daher bin ich einfach mal am rumpobieren.

[Fugel]

Du solltest auf jeden Fall mit CSS arbeiten, wenn du dabei Probleme hast das es in verschiedenen Browsern unterschiedlich angezeigt wird, so musst du deinen CSS-Code besser anpassen.

[elyion_g2]

das ich das richtig verstehe - du versuchst in einem formular einen button einzufügen der .... was machen soll? ..... und das ohne das formular abzusenden...


edit: so wie ich es verstehe:

kannst im css doch einfach:


form a{
background: #ccc;
padding: 5px;
text-decoration: none;
color: #000;
border: 1px solid #666;
outline: none;
}

form a:hover{
background: #fff;
padding: 5px;
text-decoration: none;
color: #000;
border: 1px solid #ccc;
outline: none;
}

*ungetestet.... irgendwie so...

[Fugel]

Nein ich glaube er will den Button als Navigation verwenden.

[elyion_g2]

Zitat von Fugel

Nein ich glaube er will den Button als Navigation verwenden.

In einem Formular oder wie? .. den ansonsten ist ein solcher Button einfach:

<input name="" type="button" value="bla.html" />

den kann man mit css auch bearbeiten (anstatt form a, und form a:hover -> input a, und input a:hover ... *ungetestet)

[fakerer]

ich will einen vorwärt und rückwärtsbutton auf jeder seite oben sozusagen in der headernavi.

manchmal wird dann dabei ein formular abgeschickt manchmal einfach nur auf eine andre seite weiterverlinkt.

ich hätte gern das die buttons in allen browsern ab ie7+ gleich aussehen egal ob ein link oder ein submit.
Problem ist das ich da schon über eine Seite css hatte um einfach ein a und input type=submit zu formatieren und da dachte ich mir dann das muss doch auch einfacher gehen und daher wollte ich nun gleiche elemente nehmen.

<a href="{$href}"><input type="button" class="button" value="{t}{$bezeichnung}{/t}" /></a>
<input type="submit" class="button" value="{t}{$bezeichnung}{/t}" />

hätte zb schon mal ganz gut im ff geklappt aber nicht im ie obwohl es eigentlich laut http://de.selfhtml.org/html/referenz...nline_elemente erlaubt ist ein input in an a tag zu stecken.

und wenn ich das ganze mit onclick versuche hab ich immer probleme wenn der andre button ein submit ist also die ganze seite in einem <form > steckt

danach hab ich es mut <button > versucht hat auch nicht geklappt daher dachte ich frag ich mal Leute die sich besser auskennen

[elyion_g2]

http://www.web-toolbox.net/webtoolbo...erweise-go.htm
http://www.crowderassoc.com/javascript/backbutton.html

also sowas wie in diesen links...

etwas anderes kenn ich auch nicht.. dass die ganzen formular-css-formatierungen in jedem browser anders aussehen liegt unter anderem an den neuen browsern wie google chrome etc... die html5 und css3 unterstützen ... die behandeln von haus aus ein input anders als ein IE9 (der kein css3 oder nur ansatzweise html5 kann) oder IE8 der das gar nicht hat...

da diese scripts noch so "neu" sind, wissen auch viele (mich eingeschlossen) noch nicht wie man es umformatieren muss..

anders als mit den links kann ich dir leider nicht weiterhelfen. tut mir leid ...

[fakerer]

das nix mit den vorwärts rückwerts des browsers zu tun.
hab das nur geschrieben dachte damit mehr verständnis zu erzeugen
mir gehts nur um die formatierung

auch herr googel hat da nicht wirklich ne antwort was ich gefunden hätte sind javascrtip frameworks wie jquery ui oder yui (von yahoo) bei denen es fast klappt aber auch nicht 100%.
Im Netz sind soche Probleme fast immer mit fixen Bildern, oder sogar auch gleich der Text im Bild gelöst aber das wollte ich nicht mal sehen was draus wird vielleicht hat ja noch jemand ne Idee
ansonst schon mal vielen dank für eure Antworten.

[mindraper]

hi.

zunächst mal:
return kann nur innerhalb einer function genutzt werden in javascript. der click auf einen button mit registriertem onclick-handler würde also statt

<button onclick="return false"...

so geschrieben

<button onclick="function(){ return false; }"...

dann:
sobald du window.location.href einen wert zuweist, ruft der browser den übergebenen wert auf. das ist auch vollkommen korrektes browserverhalten.

sofern du nur eine seite ( bzw. in der history einen punkt ) zurückspringen willst, passiert das über window.history.back(). oder kürzer: history.back()

weiterhin:
einen button in ein <a>-tag zu stecken, das via href-attribute auf eine location verweist hindert den browser ebenfalls nicht daran, diese seite aufzurufen – selbst dann nicht, wenn du tatsächlich auf den button klickst und dessen standartverhalten unterdrückst ( also via return false, event.preventDefault() oder event.returnValue = false ).
dieses verhalten wird als event-propagation bzw. ( im ie ) als event-bubbling bezeichnet. das bedeutet, dass ein event ( im falle des event-bubblings beispielsweise ) das DOM vom geklickten element beginnend nach oben durchläuft, bis es am window-object ankommt. event-propagation lief im netscape genau anders herum, mittlerweile tut es beides ( also erst von oben nach unten zum ziel, dann von dort wieder nach oben ).

korrekt wäre also sowas ( zumindest nach DOM-Level 1 ):

<!-- Im head -->
<script type="text/javascript">
//<![CDATA[
// unterdrückt das aufrufen von urls bei beispielsweise click
function preventClick( e ){
    if( !e ){
        e = window.event;
        e.returnValue = false;
        e.cancelBubble = true;
    } else {
        e.preventDefault();
        e.stopPropagation();
    }
}
//]]>
</script>
...
...
<!-- im formular -->
<button onclick="preventClick"...

eleganter und zu trennung von code und struktur ist allerdings das hier dem oberen vorzuziehen:

in einer script-datei ( javascript )

PHP-Code:

function preventClick( e ){
    if( !e ){
        e = window.event;
        e.returnValue = false;
        e.cancelBubble = true;
    } else {
        e.preventDefault();
        e.stopPropagation();
    }
}

var buttons = [ document.getElementById( 'forwardButton' ), document.getElementById( 'backwardButton' ) ];

for( var i = 0; i < buttons.length; i = i+1 ){
    buttons[i].onclick = preventClick;
} 


im html:

<button id="forwardButton">Vorwärts</button>
<button id="backwardButton">Zurück</button>

noch ein kleiner hinweis:
das ist nicht genau der code den du brauchst. allerdings habe ich eigentlich alles nötige im post beschrieben – nur zusammenfriemeln musst du noch selber. sorry, aber ansonsten lernt man ja nix

hoffe das hilft