Raketenwilli: Auch ein versteckter Submit-Button feuert „onEnter“

Beitrag lesen

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>