• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Formular - Felder erst nach Buttonklick aktivieren

S

smag

New member
Hallo zusammen,

leider konnte ich über die Suche nichts passendes finden.

Ich habe per HTML und PHP ein Formular erstellt, mit dem Daten in eine Datenbank gespeichert werden.

Ich möchte nun, dass die input-Felder zunächst deaktiviert angezeigt werden (grau), und erst nach Klick auf einen Button sollen die Felder aktiviert (weiß) werden. Wie kann ich das machen?

Viele Grüße,
smag
 
Ich habe noch nichts ausprobiert. Ich programmiere fast ausschließlich mit HTML und PHP und habe bei JS fast keine Ahnung. Dass es aber mit readonly und onClick zu tun haben muss, hab ich mir schon gedacht. Aber ich weiß nicht, 1. wie ich mit einem Button mehrere input-Felder ansteuern kann und 2. wie ich dann das Attribut readonly raus bekomme...
 
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>für smag</title>
	<style type="text/css">
		body { font-family: 'Arial'; }
		input { width: 200px; }
		.Status { padding-left: 10px; }
	</style>
</head>
<body>

<script>
	"use strict";
	function toggle_sperre(wert) {
		['feld1','feld2'].forEach(function(elem,ind,arr) {
			document.formular.elements[elem].readOnly = wert;
			document.getElementById('stat_'+elem).innerHTML = (wert ? 'gesperrt' : 'frei');
		});
	}
</script>

<form name="formular">
	<input type="text" name="feld1" value="Wert1" readonly><span class="Status" id="stat_feld1">gesperrt</span><br>
	<input type="text" name="feld2" value="Wert2" readonly><span class="Status" id="stat_feld2">gesperrt</span><br>
	<br>
	<input type="button" value="Entsperren" onclick="toggle_sperre(false);"><br>
	<br>
	<input type="button" value="Sperren" onclick="toggle_sperre(true);">
</form>

</body>
</html>
 
Hey,

vielen Dank für die Antwort. Das ist genau das, was ich suche.

Eine Änderungsanfrage hätte ich da aber noch. Mein Wunsch wäre es, dass nicht nebenan ein Text (gesperrt oder frei) angezeigt wird, sondern dass die Input-Felder zu Beginn normalfarbig sind und nach Anklicken auf Entsperren grün hinterlegt sind, z.b. mit einem #XXXXXX Code...

Geht das auch?

Viele Grüße,
Sebastian
 
Du hast vielleicht Wünsche! :)
Dachte, du könntest Änderungen jetzt selbst einbauen. Hast du es denn wenigstens versucht?

Im IE 11 klappt das hier, musst mal die anderen Browser auch probieren, manchmal sind Eingabefelder etwas hakelig in den Browsern.
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>für smag</title>
	<style type="text/css">
		body { font-family: 'Arial'; }
		input { width: 200px; }
		.Status { padding-left: 10px; }
		.gruen { background-color: #00FF00; }
		.rot { background-color: #FF0000; }
	</style>
</head>
<body>

<script>
	"use strict";
	function toggle_sperre(wert) {
		['feld1','feld2'].forEach(function(elem,ind,arr) {
			document.formular.elements[elem].readOnly = wert;
			document.formular.elements[elem].className = (wert ? 'rot' : 'gruen');
			document.getElementById('stat_'+elem).innerHTML = (wert ? 'gesperrt' : 'frei');
		});
	}
</script>

<form name="formular">
	<input type="text" name="feld1" value="Wert1" readonly class="rot"><span class="Status" id="stat_feld1">gesperrt</span><br>
	<input type="text" name="feld2" value="Wert2" readonly class="rot"><span class="Status" id="stat_feld2">gesperrt</span><br>
	<br>
	<input type="button" value="Entsperren" onclick="toggle_sperre(false);"><br>
	<br>
	<input type="button" value="Sperren" onclick="toggle_sperre(true);">
</form>

</body>
</html>
Macht 3 Euro 80, wohin geht die Rechnung? :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben