wie kann ein input submit passiv geschaltet werden?

[Linuchs]

Hallo,

in einem Formular kann ich Daten neu eingeben oder ändern.

Per javascript schalte ich die Neueingabe-Schaltfläche mit display:none aus und die Änder-Schaltfläche mit display:inline-block ein.

Wenn ich aber wie gewohnt mit Enter abschließe, wird die ausgeschaltete Naueingabe-Schaltfläche genutzt, weil sie im DOM eher steht.

Wie kann ich die mit javascript deaktivieren?

Gruß, Linuchs

[JJ]

Hallo Linuchs,

in einem Formular kann ich Daten neu eingeben oder ändern.

Per javascript schalte ich die Neueingabe-Schaltfläche mit display:none aus und die Änder-Schaltfläche mit display:inline-block ein.

Wenn ich aber wie gewohnt mit Enter abschließe, wird die ausgeschaltete Naueingabe-Schaltfläche genutzt, weil sie im DOM eher steht.

Wie kann ich die mit javascript deaktivieren?

Bist Du sicher, dass das eine Aufgabe des Clients ist?
Es ist userfreundlich, den Button umzubenennen, aber eigentlich unwichtig. Der Button könnte auch "Daten absenden" heißen. Der Rest ist dann Aufgabe des serverseitigen Scripts, und dieses entscheidet dann auch, ob der Datensatz upgedatet oder neu eingetragen wird.

JJ

[Linuchs]

Bist Du sicher, dass das eine Aufgabe des Clients ist?

Ja, in meinem Projekt wird das Erstellen eines neuen Satzes mit grün signalisiert, Änderung gelb und Löschen rot.

In diesem Fall steht das Formular auf grün, wird aber gelb, wenn eine Position aus der darüber liegenden Liste zu ändern ist.

[JJ]

Bist Du sicher, dass das eine Aufgabe des Clients ist?

Ja, in meinem Projekt wird das Erstellen eines neuen Satzes mit grün signalisiert, Änderung gelb und Löschen rot.

Wann?
Doch wohl erst nachdem der Server gearbeitet hat, oder?

In diesem Fall steht das Formular auf grün, wird aber gelb, wenn eine Position aus der darüber liegenden Liste zu ändern ist.

Also doch vorher.
Warum steht das Formular denn auf grün, wenn Du den Buttontext per JS bereits auf "ändern" gestellt hast?
Liest sich derzeit noch etwas seltsam und nicht ganz zuende gedacht.
Seis drum, der Server entscheidet über "insert" oder "update", der Client (und Dein JS) über Farbe und Textinhalt Deines Buttons.

Gruß, JJ

[Gunnar Bittersmann]

@@Linuchs

Per javascript schalte ich die Neueingabe-Schaltfläche mit display:none aus und die Änder-Schaltfläche mit display:inline-block ein.

Wenn ich aber wie gewohnt mit Enter abschließe, wird die ausgeschaltete Naueingabe-Schaltfläche genutzt, weil sie im DOM eher steht.

Wo wir gerade kollektiv der Wir-vermissen-Cheatah-Melancholie verfallen sind, hab ich mal ein hier passendes Zitat von ihm rausgesucht:

„Erkläre Dich bitte so, dass man sich außerhalb Deines Kopfes befinden darf, um es zu verstehen.“

Hab ich zum Blues dazu noch ein Déjà-vu?

🖖 Живіть довго і процвітайте

[Peter]

Das Zitat ist mir sogar noch in Erinnerung. Rückblickend muss man wohl zugeben, dass die Diskussionskultur hier sich wesentlich verbesser hat und Einiges wohl hart an der Gürtellinie gekratzt hat, z.B. diese Bilder im Sinne einer Alert-Box mit Inhalten wie "Bist Du vielleicht ein bisschen dumm?" o.Ä.

Cheatah durfte sich in dieser Hinsicht wohl auch ein bisschen mehr rausnehmen als jemand, der hier nicht so präsent war. Im Augenblick gibt es jedenfalls niemanden, den ich so stark mit dem Forum und den dortigen Gepflogenheiten assoziieren würde.

Gruß Peter

[Rolf B]

Hallo Linuchs,

Per javascript schalte ich die Neueingabe-Schaltfläche mit display:none aus und die Änder-Schaltfläche mit display:inline-block ein.

Wie JJ schon sagte: Ist das die richtige Idee? Ist immer nur einer der beiden Buttons sichtbar?

In dem Fall mach nur einen Button und schalte per JavaScript Text und Wert um. Mit dem button-Element geht das einfacher als mit einem submit-Input, weil bei button-Element value und Anzeigetext getrennt gesetzt werden können.

<form name="xyForm" ...>
   <button name="speichern" value="neu">Neu anlegen</button>
</form>

let button = forms.xyForm.speichern;
if ( /* neu anlegen */) {
  button.value = "neu";
  button.textContent = "Neu anlegen";
} else {
  button.value = "aendern";
  button.textContent = "Ändern";
}

Wenn es Fälle gibt, wo Du wirklich beide Buttons brauchst, aber in dem Fall, wo der erste Button inaktiv ist, ihn nicht als Default-Button willst, ändere seinen type auf "button". Wird er aktiviert, ändere den type auf "submit".

Nur submit-Buttons reagieren auf ENTER.

Mit input type="submit" geht das nicht so einfach. Ein input-Element mit name wird immer submitted, da müsstest Du auch noch das name-Attribut entfernen um das zu verhindern.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Nur submit-Buttons reagieren auf ENTER.

Ich glaube, es ist noch ein bisschen anders: Nur der erste Submit-Button reagiert auf ENTER.

Nimm ein Formular mit mehreren Submit-Buttons, setze den ersten auf disabled, drücke ENTER → Das Formular wird nicht abgeschickt.

Nimm das disabled beim ersten wieder raus, beim zweiten rein, drücke ENTER → Das Formular wird abgeschickt.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Nimm ein Formular mit mehreren Submit-Buttons, setze den ersten auf disabled, drücke ENTER → Das Formular wird nicht abgeschickt.

Dann hab ich eben was falsch gemacht. Bei mir wurde es - trotz disabled - mit name/value des ersten Buttons abgeschickt. Oder Chrome verhält sich anders als Safari oder Firefox.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Nimm ein Formular mit mehreren Submit-Buttons, setze den ersten auf disabled, drücke ENTER → Das Formular wird nicht abgeschickt.

Dann hab ich eben was falsch gemacht. Bei mir wurde es - trotz disabled - mit name/value des ersten Buttons abgeschickt. Oder Chrome verhält sich anders als Safari oder Firefox.

Bei

<button type="submit" name="action" value="1" disabled>action</button>
<button type="submit" name="action" value="2">mo’ action</button>

kann ich auch im Chrome so oft ENTER drücken wie ich will – es apssiert nichts.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

tjaaa - keine Ahnung was ich da gestern gemacht habe. Ich teste das gerade mit Edge 108 und es ist so wie Du sagst.

Das name-Attribut zu entfernen hilft auch nichts, dann gibt's nur einen Submit ohne Button-Referenz.

Bleiben also diese Fragen offen:

• müssen es zwei Buttons sein oder kann man sie zu einem zusammenlegen, den man je nach Kontext konfiguriert?
• weiß der Server über den Kontext eh Bescheid, so dass eine Button-Konfiguration gar nicht nötig ist und ein "Speichern" Button hinreicht?
• ist "Speichern" vielleicht ohnehin die richtige Beschriftung, und man muss lediglich das value-Attribut des button-Elements anpassen?

Ja, Linuchs, <button>, nicht <input type="submit">. Allein schon deshalb, weil sich für einen <button> value-Eigenschaft und dargestellter Text separat festlegen lassen!

Rolf

[JJ]

Hallo Rolf,

Bleiben also diese Fragen offen:

• müssen es zwei Buttons sein oder kann man sie zu einem zusammenlegen, den man je nach Kontext konfiguriert?
• weiß der Server über den Kontext eh Bescheid, so dass eine Button-Konfiguration gar nicht nötig ist und ein "Speichern" Button hinreicht?
• ist "Speichern" vielleicht ohnehin die richtige Beschriftung, und man muss lediglich das value-Attribut des button-Elements anpassen?

Sind diese Fragen wirklich offen?
Nur mal meine Meinung dazu:

1. Wenn es dasselbe Formular ist, das der User zum Eintragen oder Ändern ausfüllt, dann darf es IMHO nur ein einziger Button sein. (Wenn es zwei verschiedene Formulare sind, sollte das Problem des TO sowieso obsolet sein)

2. Selbst wenn der Server es zum Zeitpunkt des Absenden des unausgefüllten Formulars zum User nicht weiß (was ich bezweifle), sollte es IMHO nur ein Button sein. Ich verstehe den Mehrwert eines zweiten Button ganz und gar nicht. Entweder kennt der server den Kontext, dann schickt er nur ein Formular mit dem entsprechend beschrifteten Button oder er kennt den Kontext nicht, dann muss er diesen entweder zuvor ermitteln oder aber er schickt dennoch genau ein Formular mit einem "Speichern" oder "Daten absenden" Button. An meinem nachfolgend genannten Punkt 3 kommt der TO sowieso nicht vorbei.

3. Da der TO nie weiß, was der (womöglich auch noch böse) User ihm schickt, muss sowieso der Server entscheiden, was mit den Daten passiert. Im besten Fall ein INSERT oder ein UPDATE, im schlimmsten Fall "ab in den Müll" damit.

JJ

[Rolf B]

Hallo JJ,

Sind diese Fragen wirklich offen?

Ja. Es ist Linuchs' Anwendung, und es ist sein Design.

Wir mögen andere Ideen dazu haben, aber wir können das nicht für ihn entscheiden.

Der Sinn der offenen Frage ist zumindest, dass Linuchs darüber nachdenkt und zum Ergebnis kommt: "Jau, so ist das besser". Oder Gegenargumente nennt.

Rolf

[JJ]

Hi Rolf,

Der Sinn der offenen Frage ist zumindest, dass Linuchs darüber nachdenkt und zum Ergebnis kommt: "Jau, so ist das besser". Oder Gegenargumente nennt.

Ok. Meine Pro-Argumente liegen schonmal auf dem Tisch. :D

JJ

[Raketenwilli]

Ich habe auf Grund einer Idee gerade mal schnell versucht, ob ein Tabindex was ändert.

Tut er nicht.

Mit

1. input, tabindex=1
2. submit,tabindex=3,value=1,disabled
3. submit,tabindex=2,value=2

geschieht beim Drücken von Enter: nichts.

Gegenprobe ohne disabled. Mit

1. input, tabindex=1
2. submit,tabindex=3,value=1
3. submit,tabindex=2,value=2

feuert beim Drücken der mit value 1. Die Spec selbst ist an dieser Stelle nicht konsequent, legt nur fest, dass deaktivierte Buttons beim Tabindex übergangen werden - nicht aber, dass der laut Tabindex nächste Button „onenter“ feuert.

Hm. Gegenprobe mit button type=button. Mit

1. input, tabindex=1
2. button,tabindex=3,value=1,disabled
3. submit,tabindex=2,value=2

geschieht beim Drücken von Enter: nichts.

Das folgende krude Zeug (mit dem ich mir auch keine weitere Mühe gegeben habe) will ich nicht als Lösung betrachtet oder bezeichnet wissen:

„Reihenfolge der Inputs ändern, und/aber deren angezeigte Postion durch float zurück-ändern“.

<!Doctype html>
<html>
<form>
<input type="text" name="text" value="egal"> irgendwas
<br>
<div style="width:8rem">
	<div>
		<button type="submit" name="action" 
     value="2" style="float:right">mo’ action</button>
		<button type="sunmit" name="action"
     value="1"  style="float:right" disabled>action</button>
	</div>
</div>
</form>
</html>

Zumindest mit meinem Chrom feuert „mo’ action“, wenn man auf die Enter-Taste einprügelt: test.html?text=egal&action=2

Hat jemand eine bessere Idee als das ganze Formular mit JS derart krass umzuschreiben?

[Raketenwilli]

Hat jemand eine bessere Idee als das ganze Formular mit JS derart krass umzuschreiben?

Hm. Ich selbst. Und das sieht auch besser aus.

Auch ein versteckter Submit-Button feuert „onEnter“. Man gebe diesem kurzerhand den Value des Buttons, der scheinbar „onEnter“ feuern soll.

Ich hab das mal zusammen mit Buttons und zugehörigen JS-Funktionen notiert, welche auch mehrere Formularelemente abschalten/einschalten können.

<!Doctype html>
<html>
<form>

	<input type="text" name="text" value="egal"> irgendwas
		<!-- Versteckter Button: Value des ersten Submits setzen -->
		<button type="submit" id="hiddenButton" name="action" value="action" style="display:none"></button>

	<div style="margin-top: .5rem">
		<button type="submit" id="action1" name="action" value="action">action</button>
		<button type="submit" id="action2" name="action" value="mo’ action">mo’ action</button>
	</div>
	<div style="margin-top: .5rem">
	   <button type="button" id="btn1_btn2_btn2">Deaktiviere „action“</button>
	   <button type="button" id="btn2_btn1_btn1">Deaktiviere „mo’s action“</button>

	</div>
</form>
<script>
	function ActivateButton( b ) {
		if ( b ) {
			b.disabled = false;		
		}
	return true;	
	}
	
	function DeactivateButton( b ) {
		if ( b ) {
			b.disabled = true;		
		}
	return true;	
	}		

	function disableActivateButtons( arBtnD, btnSV, arBtnA ) {
		
		// btnD  = Button(s), der(die) deaktiviert werden sol(en).
		// btnSV = Button, dessen Wert "onEnter" gesendet werden soll
		// arBtnA = Button(s), der(die) aktiviert werden sol(en).

		if ( Array.isArray(arBtnD) ) { 
			arBtnD.forEach( DeactivateButton )
		} else {
			DeactivateButton( arBtnD );
		}
		
		btnH.value = btnSV.value;
	
		if ( Array.isArray(arBtnA) ) { 
			arBtnA.forEach( ActivateButton );
		} else {
			ActivateButton(arBtnA);
		}
	}		
	
	let btnH = document.getElementById("hiddenButton");
	let btn1 = document.getElementById("action1");
	let btn2 = document.getElementById("action2");

	document.getElementById("btn2_btn1_btn1").addEventListener(
		'click',
		function async () {
			disableActivateButtons( btn2, btn1, btn1 );
		}
	);
		
	document.getElementById("btn1_btn2_btn2").addEventListener(
		'click',
		function async () {
			disableActivateButtons( btn1, btn2, btn2 )
		}
	);

</script>
</html>

[Linuchs]

Hallo Rolf,

herzlichen Dank für deinen Lösungsvorschlag. So habe ich es umgesetzt.

Der erste Button-Name ist nicht mehr „submit_neu_termin“, sondern nur „submit_termin” und als value wird „neu“, „aen“ und „loe“ eingetragen. Dann kann man das Formular mit Enter abschicken.

Das Formular ist wegen der Übersichtlichkeit zunächst verborgen.

Der zweite Button dient zum Abbrechen, der muss dann gezielt geklickt werden.

Ich habe mal einen Muster-Verein zum Spielen angelegt, hier ist der Zugangscode für Kater Carlo:

remso.eu?gmc=c1b420ee.38

Wenn du auf den Stift beim Namen tippst, wird es ein Änder-Button mit Übergabe der Daten,

<td><img class="ic_kl cur_pointer" onclick="
document.querySelector('#gruppenmitglied_id').value           = '[gruppenmitglied_id]';
document.querySelector('#vname').value                        = '[vname]';
document.querySelector('#nname').value                        = '[nname]';
document.querySelector('#submit_gruppenmitglied').className   = 'aen';
document.querySelector('#submit_gruppenmitglied').value       = 'aen';
document.querySelector('#submit_gruppenmitglied').innerHTML   = '&nbsp;id [gruppenmitglied_id] ändern&nbsp;'; 
document.querySelector('#form_gruppenmitglied').style.display = 'block'
document.querySelector('#nname').focus()
"
src="/img/icon_bearbeiten.png" alt="B" title="[vname] bearbeiten" /></td>

beim Tippen auf [neue Person] ein Neu-Button.

Die kurze Adresse ist besonders smartphone-freundlich, denn es können Visitenkarten mit QRC und Klartext gedruckt werden.

Gruß, Linuchs

[Linuchs]