Absendebutton disablen

[juergen]

Hallo Forum,

ich habe ein Formular und überprüfe es mit JS

<script language="JavaScript">
  <!--
function chkBewerten() {

// Headline
if (document.kontakt.headline.value == "") {
alert("Hinweistext");
document.kontakt.headline.style.backgroundColor = '#ff0000';
document.getElementById("headline").style.color = '#ff0000';
document.getElementById("headline").style.fontWeight = "bold";
document.kontakt.headline.focus();
return (false);
}

// Submit Button deaktivieren

function Localize(pStr){return pStr;}

var ProcessingText = Localize("<?echo $_binbutton_text; ?>");
var cnt=0;
function doValidate(f){
f.BIN_button.value=ProcessingText;
f.BIN_button.disabled=true;
if (cnt==0)f.submit();
cnt++;
}
}
//-->
</script>

Mein Formular habe ich so definiert.

<form name="kontakt" method="post" action="eintragen.php" onsubmit="return chkBewerten();">

Wenn ich nun das Formular absende obwohl das Feld "headline" leer ist so wird mir das auch in der Alertbox angezeigt und der Absendebutton wird deaktiviert. Sobald ich die Alertbox bestätige wird das Formular dennoch abgesendet.
Kann mir einer sagen warum das Formular abgesendet wird und die Funktion chkBewerten() das nicht verhindert? Der Button soll erst deaktiviert werden wenn alle Felder geprüft und richtig sind.

Ich bin für jeden Tip dankbar.

[Andes]

Mich wundert, dass deine Funktion überhaupt anspringt. In der Funktion/Bedingung heißt dein Formular 'bewerten' obwohl du im Form-Tag den Namen 'kontakt' definiert hast.

[juergen]

Hallo Andes,

nur ein Schreibfehler hier im Forum. Ich habe es berichtigt. So ist das JS auch bei mir im richtigen Leben. Kannst Du mir weiterhelfen?

[juergen]

Ich habe nun mal etwas geändert. Um die Funktion function Localize(pStr) überhaubt auszuführen muß der Wert disbutton auf true sein. Nun wird die Überprüfung durchgefürt aber die Funktion function Localize(pStr) wird nicht ausgeführt selbst wenn der Wert true ist.

<script language="JavaScript">
  <!--
function chkBewerten() {

disbutton = true;

// Headline
if (document.kontakt.headline.value == "") {
alert("Hinweistext");
document.kontakt.headline.style.backgroundColor = '#ff0000';
document.getElementById("headline").style.color = '#ff0000';
document.getElementById("headline").style.fontWeight = "bold";
document.kontakt.headline.focus();
disbutton = false;
return (false);
}

// Submit Button deaktivieren

if (disbutton == true) {

function Localize(pStr){return pStr;}

var ProcessingText = Localize("<?echo $_binbutton_text; ?>");
var cnt=0;
function doValidate(f){
f.BIN_button.value=ProcessingText;
f.BIN_button.disabled=true;
if (cnt==0)f.submit();
cnt++;
}
}
return disbutton;
}
//-->
</script>

Nun wird die Funktion function Localize(pStr) nicht mehr aufgerufen wenn das Feld leer ist. Das Formular wird nicht abgesendet solange ein Feld leer ist. Wenn es nicht leer ist wird die Funktion function Localize(pStr) aber auch nicht mehr ausgeführt! Der Submitbutton wird nicht disabled.
Ist das überhaubt möglich eine Funktion inerhalb einer anderen Funktion auszuführen?

Danke für Eure Hilfe.

[Andes]

Ich versteh den zweiten Teil nicht wirklich. Dazu müsstest du mal noch etwas erklären.
Für was soll die Funktion Localize gut sein? Die gibt doch nur den Wert zurück, den du bei Funktionsaufruf übergibst. Da kannst du auch gleich den Wert in der Variable 'ProcessingText' speichern.
Wann wird die Funktion doValidate() aufgerufen und wo kommt 'f' her?
Ja man kann eine Funktion innerhalb einer anderen Funktion aufrufen. Kommt halt darauf an wie du sie aufrufen möchtest. Wenn du doValidate() von außen aufrufen möchtest, müsstest du das ganze als ein Objekt/Klasse definieren.

Edit:
Mehrere return-Aufrufe sind etwas Sinnfrei. Du sendest am Ende den Status von disbutton, der true oder false sein kann. Da brauchst du nicht den return innerhalb der ersten Bedingung, da du ja dort den Status von disbutton änderst.
So wie ich den zweiten Teil sehe, ist der auch etwas überflüssig. Du setzt dort den Status auf true und somit würde das Formular gesendet, was die Ausgabe des Textes und das 'disabled' des Button überflüssig macht. Es wird eh nicht mehr angezeigt.
Auch, wenn du auf der Seite bleibst nach dem Senden würde das keinen Sinn ergeben. Da Javascript nur so lange gültig ist, wie die Seite geladen ist.

[Raketenmann]

Nimm doch einfach mal die Klammer beim 'return (false);' weg.

Ich notiere immer 'return false;' und SelfHTML z.B. macht es auch so...


Oder gib dem Absendebutton statt 'type="submit"' den 'type="button"'. Dann passiert erstmal gar nichts, wenn du ihn klickst. Absenden kannst du nach Eingabeprüfung in deinem JavaScript mit der 'submit()' Methode des Formulars.

[juergen]

Hallo Andes,

zunächst mal wird ist der Sendebutton noch einige Zeit aktiv zu sehen wenn man Ihn angeklickt hat. PHP muß die Übertragenden Felder (52 Felder) in eine Datenbank schreiben. Da gehen schon mal 10 - 20 Sekunden dahin. User die es nicht erwarten können klicken dann schon mal mehrmals auf den Button. Das will ich vermeiden. Im Grunde wäre mir schon geholfen wenn der Butten einfach verschwinden würde. hidden?

Leider bin ich nicht so gut in JS aber die Funktion soll den Text auf dem Button ändern und ihn dann disablen. Macht sie auch wenn man sie in die Funktion chkBewerten() einfach einbaut. siehe Code oben. Dann wird aber obwohl das Formular Fehler hat trotzdem abgesendet. Deshalb habe ich die
if (disbutton == true) { eingebaut um erst den Button zu deaktivieren wenn die Überprüfung disbutton = true; ergibt mit dem Resultat das jetzt nicht mehr disablet wird obwohl die Funktion true ergibt und das Formular auch abgesendet wird. Ich habe zur Kontrolle mal eine alertbox eingebaut. Die wird mir auch angezeigt.
Eventuell hast Du ja eine andere Idee! Wie gesagt es kann auch der Butten verschwinden.

Kann ich eigendlich im Submitbutten einen onclick einbauen? Ich glaube nicht oder? Leider kann ich es im Augenblick nicht probieren. Bin nicht zuhause.

Danke für Deine Hilfe.

if (disbutton == true) {

function Localize(pStr){return pStr;}

alert("Testtext");// wird aufgerufen aber die Funktion nicht

var ProcessingText = Localize("<?echo $_binbutton_text; ?>");
var cnt=0;
function doValidate(f){
f.BIN_button.value=ProcessingText;
f.BIN_button.disabled=true;
if (cnt==0)f.submit();
cnt++;
}
}
return disbutton;
}

[Raketenmann]

Man kann in einen Button, der den 'type="button"' hat, ein 'onclick()' einbauen...

Deinen Button verschwinden lassen, kannst du auch über den 'style' 'display'.

[Andes]

Du kannst auf jedes HTML-Element den Event onclick anwenden.

Ich hab deine Funktion mal etwas umgeschrieben und sie Funktioniert.

function chkBewerten() {

	var disbutton = true;	
	var elm = document.getElementById("headline");
	var ProcessingText = "warten"; //Hier musst du halt noch dein PHP einsetzen.
	var but = document.kontakt.BIN_button;
	// Headline
	if (elm.value == "") {
		alert("Hinweistext");
		with(elm.style) {
			backgroundColor = '#ff0000';		
			color = '#fff';
			fontWeight = "bold";
		}
		elm.focus();
		
		disbutton = false;
	}
	
	// Submit Button deaktivieren

	if (disbutton == true) {

		but.value = ProcessingText;
		but.disabled = true;
	}
	alert(but.value); //Test ob Text und Status geändert wurde
	return disbutton;
}

Versteh zwar nicht wieso das Formular noch so lange angezeigt wird. PHP arbeitet ja erst nach dem Senden und ist entweder eine andere Seite aufgerufen oder dieselbe ist leer bis PHP fertig ist.

[juergen]

Hallo Andes,

das ist die Lösung. Vielen Dank
Funktioniert super wie ich es wollte.
Nochmals vielen Dank.