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>