✔ js style Problem

M

mmhhh

Grünschnabel
Hallo alle zusammen,

also ich habe noch ein Problem.
Ich habe einen Ok -Button, der nach anklicken seinen Text in "Bitte warten..." ändert.
Der wie folgt definiert ist:

<p style="padding-left:65px">
<input id="buttonOK" type="submit" value="OK" onClick="javascript:processing('buttonOK','form')"/>
<br/>
</p>

Das mit dem padding soll, wenn es der OK-Button ist so bleiben. Aber wenn processing(...) angelickt wird soll das Aussehen verändert werden und zwar so:

<script type="text/javascript">
function processing(Button, formu) {
document.forms[formu].elements[Button].style.fontWeight="bolder";
document.forms[formu].elements[Button].style.fontSize="14px";
document.forms[formu].elements[Button].style.padding="4px";
document.forms[formu].elements[Button].style.paddingLeft="1px";
document.forms[formu].elements[Button].style.paddingRight="1px";
document.forms[formu].elements[Button].disabled = true;
document.forms[formu].elements[Button].value = "bitte warten...";
document.forms[formu].submit();
}
</script>

Nun folgendes Problem der Browser erkennt js style nicht
Gibt es auch andere Alternativen zu style? Freu mich über jede Anregung.

Grüße mmhhh
 
Frage
Wieso sprichst Du den Button mit "document.forms[formu].elements[Button]." an?
Du übergibst doch der Funktion direkt die ID des Buttons.

document.getElementById(Button).style ...

Außerdem würde ich deinem Forumlar ebenfalls eine ID geben.
Das macht das Ansprechen der Elemente sehr viel einfacher.

<form id="myFormular">

Sprich deine Funktion würde dann wie folgt aussehen:

function processing(Button, formu) {
document.getElementById(Button).style.fontWeight="bolder";
document.getElementById(Button).style.fontSize="14px";
document.getElementById(Button).style.padding="4px";
document.getElementById(Button).style.paddingLeft="1px";
document.getElementById(Button).style.paddingRight="1px";
document.getElementById(Button).disabled = true;
document.getElementById(Button).value = "bitte warten...";
ducument.getElementById('myFormular').submit();
}
 
Es geht auch noch einfacher :)
Da es ja der zu ändernde Button selbst ist, der angeklickt wird, kannst du den Zeiger auf selbigen per this übergeben:
Code: 
<input type="submit" value="OK" onClick="processing(this)"/>


<script type="text/javascript">
function processing(Button) {
Button.style.fontWeight="bolder";
Button.style.fontSize="14px";
Button.style.padding="4px";
Button.style.paddingLeft="1px";
Button.style.paddingRight="1px";
Button.disabled = true;
Button.value = "bitte warten...";
}
</script>
(das submit() ist dabei unnötig, das geht von alleine)
 
Danke für eure Antworten erstmal.

@SkTnOnAmE
Außerdem würde ich deinem Forumlar ebenfalls eine ID geben.
<form id="myFormular">
Zum Vergrößern anklicken....
die ID meiner Form heißt form.ich weiß ungünstig gewählt.

@SkTnOnAmE und @Sven Mintel

ich weiß das es normalerweise diese einfacheren und kürzeren Wege gibt, allerdings wenn ich diese verwende zeigt mir es der Browser nicht an.

Nunja und ich habe mir gedacht, wenn ich es geschafft habe, dass das Schrift ändern und ausblenden, auf diese umständliche weise gezeigt wird, dass es dann auch eine Möglichkeit geben wird das auch mit dem style irgendwie hinzumoglen.

Aber wie das möglich wäre weiß ich halt nicht, da ich sonst immer diese leichteren Möglichkeiten verwendet habe und auch nichts anderes kenne.

Nochmals vielen Dank für eure Antworten.

Hat noch jemand Ideen?

Gruß
 
mmhhh hat gesagt.:
ich weiß das es normalerweise diese einfacheren und kürzeren Wege gibt, allerdings wenn ich diese verwende zeigt mir es der Browser nicht an.
Zum Vergrößern anklicken....
Naja, es ist ein Submit-Button, wenn man den betätigt, wird das dazugehörige Formular gesendet, was idR. mit einem Verlassen der aktuellen Seite verbunden ist...dieser Effekt wäre also nur kurz zu Sehen.

Bei mir funktioniert auch die "einfache" Methode problemlos:
Code: 
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type="button" value="OK" onClick="processing(this)"/>
</form>
<script type="text/javascript">
function processing(Button) {
Button.style.fontWeight="bolder";
Button.style.fontSize="14px";
Button.style.padding="4px";
Button.style.paddingLeft="1px";
Button.style.paddingRight="1px";
Button.disabled = true;
Button.value = "bitte warten...";
}
</script>
</body>
</html>
(Hab den type des Buttons mal auf "button" gesetzt, damit man es besser sieht )
 
Vielen dank nochmal. Aber das klappt bei mir auch nicht.....
Das liegt wahrscheinlich wieder am Mobile..... Naja dann verzichte ich halt drauf....

Nochmal vielen dank....

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück