Archivlink: javarea.de Forum > JavaScript > Formularfelder deaktiviern/aktivieren
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Formularfelder deaktiviern/aktivieren

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von AlexD am 07.05.2009 - 14:06
Hallo,

ich brauch wieder mal Eure Hilfe.

Und zwar möchte ich Formularfelder die "wechselwiese" von einander abhängen entsprechen aktivieren bzw. deaktivieren um Falscheingaben zu vermeiden.

Kurze Erläuterung des Formulares.
Es geht um ein Formular in dem man seine Trainingseinheiten (Laufsport) eintragen kann. Über ein DropDown-Menü kann man seien Standartstrecken auswählen. Es kann jedoch vor kommen, dass man keine Standartstrecke läuft (z.B. im Urlaub) und diese dann trotzdem eingeben möchte.
Siehe angeängtes Bild.

Nun möchte ich, wenn die Checkbox angewählt wird das DropDown-Menü deaktiviert und die individuellen Eingabefelder aktiviert werden.

Soweit funktioniert das auch schon, das Problem ist jetzt nur, wenn man auf die Seite mit dem Formular kommt alle Felder aktiviert sind. Es soll aber nur das DorpDown-Menü aktiviert sein und die Eingabefelder deaktiviert.
Wie erreiche ich es, dass diese standartmäßig deaktiviert sind und erst wenn gewünscht aktiviert werden.

Hier mal die Funktion:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 

function feldaktivierung () {
  if (document.training.individual.checked == true) {
    document.training.strecken_id.disabled = true;
    document.training.strecken_bezeichnung.disabled = false;
    document.training.distanz.disabled = false;
    document.training.runde.disabled = false;
  } else {
    document.training.strecken_id.disabled = false;
    document.training.strecken_bezeichnung.disabled = true;
    document.training.distanz.disabled = true;
    document.training.runde.disabled = true;
  }
}

geschrieben von zippy am 07.05.2009 - 19:31
Ohne kompletten Quelltext verstehe ich das schwer. Warum werden diese drei Elemente nicht gleich standardmäßig (also bereits im html-Quelltext des Formulars) ausgegraut (Attribut disabled bzw. disabled="disabled")? So willst du es doch, oder?

geschrieben von AlexD am 08.05.2009 - 00:53
Hi,

also wie im Anhang zu erkennen, soll das DopDown-Menü standartmäßig aktiviert sein. Die 3 Formularfelder, die danach kommen um eine individuelle Strecke einzugeben, mit der "Streckenbezeichnung, Hin-/Rückweg, Runde/Streckenlänge" sollen erst mal deaktiviert.

Wenn man nun die Checkbox abhakt, so das man eine individuelle Strecke eintragen möchte, so soll das DopDown-Menü gesperrt und die 3 Formularfelder aktiviert werden.

Das Problem ist eben, dass wenn die Seite geladen wird alles aktiviert ist. Wunsch ist, nur das DopDown-Menü und die Formularfelder deaktiviert.
Sobald einmal auf die Checkbox geklickt wurde, funktioniert es wie es soll.

hier das Formular:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

<head>
 <script language="JavaScript" type="text/javascript" src="./js/functions.js"></script>
</head>
<p style="border-bottom:1px solid"><span style="font-weight:bold">neue Trainingseinheit eingeben</span></p>
<form class="form" name="training" method="POST" action="process.php">
 <label class="formular">Datum:&nbsp;</label><?php echo date_selectbox($tag,$monat,$jahr,$y_start,$y_end,0);?><br><br>
 <label class="formular">&nbsp;</label>&nbsp;<input type="checkbox" name="individual" value="1" onclick="feldaktivierung();"> individuelle Laufstrecke angeben<br><br>
 <label class="formular">Laufstrecke:&nbsp;</label><?php echo $sel_laufstrecke;?> <a href="index.php?page=laufen&loc=mein_training&action=neue_strecke">>>neue Laufstrecke eintragen<<</a><br><br>
 <label class="formular">individuelle&nbsp;<br> Laufstrecke:&nbsp;</label><input class="input" type="text" name="strecken_bezeichnung" value="" size="35"> Streckenbezeichnung<br><br>
 <label class="formular">&nbsp;</label><input class="input" type="text" name="distanz" value="" size="4"> <strong>km</strong> Hin- <u>und</u> R&uuml;ckweg (wenn schon zur Laufrunde gelaufen wird)<br><br>
 <label class="formular">&nbsp;</label><input class="input" type="text" name="runde" value="" size="4"> <strong>km</strong> Strecken-/Rundenl&auml;nge (ohne Hin-/R&uuml;ckweg!!)<br><br>
 <label class="formular">Runden:&nbsp;</label><?php echo $sel_runden;?><br><br>
 <label class="formular">Trainingstype:&nbsp;</label><?php echo $sel_trainingstype;?><br><br>
 <label class="formular">Laufzeit:&nbsp;</label><input class="input" type="text" name="std" value="<?php echo $std;?>" size="2"> : <input class="input" type="text" name="min" value="<?php echo $min;?>" size="2"> : <input class="input" type="text" name="sec" value="<?php echo $sek;?>" size="2"> hh:mm:ss<br><br>
 <label class="formular">&nbsp;</label><input type="hidden" name="trainings_id" value="<?php echo $_GET['trainings_id'];?>">
  <?php echo $button;?>
</form>

geschrieben von AlexD am 08.05.2009 - 01:02
Alles klar....

Problem gelöst!
Hatte das mit "disable" im HTML-Code schon versucht, jedoch wollte es nicht klappen.
Musste wohl einen Fehler irgendwo gehabt haben, denn jetzt funktioniert es so wie es sollte mit dem "disable" im HTML-Code! ;)

geschrieben von zippy am 08.05.2009 - 01:06
Zitat von: AlexD am 07.05.2009 - 22:53
 
Hi,

also wie im Anhang zu erkennen, soll das DopDown-Menü standartmäßig aktiviert sein. Die 3 Formularfelder, die danach kommen um eine individuelle Strecke einzugeben, mit der "Streckenbezeichnung, Hin-/Rückweg, Runde/Streckenlänge" sollen erst mal deaktiviert.

Wenn man nun die Checkbox abhakt, so das man eine individuelle Strecke eintragen möchte, so soll das DopDown-Menü gesperrt und die 3 Formularfelder aktiviert werden.

Das Problem ist eben, dass wenn die Seite geladen wird alles aktiviert ist. Wunsch ist, nur das DopDown-Menü und die Formularfelder deaktiviert.
Sobald einmal auf die Checkbox geklickt wurde, funktioniert es wie es soll.

hier das Formular:
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 

<head>
 <script language="JavaScript" type="text/javascript" src="./js/functions.js"></script>
</head>
<p style="border-bottom:1px solid"><span style="font-weight:bold">neue Trainingseinheit eingeben</span></p>
<form class="form" name="training" method="POST" action="process.php">
 <label class="formular">Datum:&nbsp;</label><?php echo date_selectbox($tag,$monat,$jahr,$y_start,$y_end,0);?><br><br>
 <label class="formular">&nbsp;</label>&nbsp;<input type="checkbox" name="individual" value="1" onclick="feldaktivierung();"> individuelle Laufstrecke angeben<br><br>
 <label class="formular">Laufstrecke:&nbsp;</label><?php echo $sel_laufstrecke;?> <a href="index.php?page=laufen&loc=mein_training&action=neue_strecke">>>neue Laufstrecke eintragen<<</a><br><br>
 <label class="formular">individuelle&nbsp;<br> Laufstrecke:&nbsp;</label><input class="input" type="text" name="strecken_bezeichnung" value="" size="35"> Streckenbezeichnung<br><br>
 <label class="formular">&nbsp;</label><input class="input" type="text" name="distanz" value="" size="4"> <strong>km</strong> Hin- <u>und</u> R&uuml;ckweg (wenn schon zur Laufrunde gelaufen wird)<br><br>
 <label class="formular">&nbsp;</label><input class="input" type="text" name="runde" value="" size="4"> <strong>km</strong> Strecken-/Rundenl&auml;nge (ohne Hin-/R&uuml;ckweg!!)<br><br>
 <label class="formular">Runden:&nbsp;</label><?php echo $sel_runden;?><br><br>
 <label class="formular">Trainingstype:&nbsp;</label><?php echo $sel_trainingstype;?><br><br>
 <label class="formular">Laufzeit:&nbsp;</label><input class="input" type="text" name="std" value="<?php echo $std;?>" size="2"> : <input class="input" type="text" name="min" value="<?php echo $min;?>" size="2"> : <input class="input" type="text" name="sec" value="<?php echo $sek;?>" size="2"> hh:mm:ss<br><br>
 <label class="formular">&nbsp;</label><input type="hidden" name="trainings_id" value="<?php echo $_GET['trainings_id'];?>">
  <?php echo $button;?>
</form>


Das ist ein Ausschnitt aus der php-Datei, welche das Formular generiert. Leichter täte ich mir mit einem Link zur ausgegebenen Seite, oder mit einer Kopie des Quelltextes der ausgegebenen Seite.

Zum Beispiel sehe ich in obigem Code nicht, was die function date_selectbox() usw. schreiben. Werds mal trotzdem probieren ...

geschrieben von zippy am 08.05.2009 - 01:20
Zitat von: AlexD am 07.05.2009 - 23:02
 
Alles klar....

Problem gelöst!
Hatte das mit "disable" im HTML-Code schon versucht, jedoch wollte es nicht klappen.
Musste wohl einen Fehler irgendwo gehabt haben, denn jetzt funktioniert es so wie es sollte mit dem "disable" im HTML-Code! ;)

Super!

Hatte mich eh schon gewundert...

Aber was anderes: Es ist meist übersichtlicher, den php-Teil vom html-Design komplett zu trennen. Das geht ganz leicht.


geschrieben von AlexD am 08.05.2009 - 17:41
Ok, wie trenne ich den PHP-Teil vom HTML-Design?
Wüsste jetzt im Moment nicht wie ich das angehen sollte.


Noch was zum Formular.
Hab grad noch versucht, die Hintergrundfarbe der jeweiligen Formularfelder zu ändern. Also das sie grau werden wenn das Feld 'disabled' ist und
schwarz wenn es aktiviert ist/wird.

dachte ich könnte es ganz einfach mit:
document.training.strecken_bezeichnung.style = 'background-color:#999999';
machen, geht leider ned so einfach.

Gruß
Alex

geschrieben von zippy am 08.05.2009 - 18:39
HTML-Quelltext
1: 

document.getElementsByName("strecken_bezeichnung").style.backgroundColor = '#999999';

... sollte gehen, wenn ich mich richtig erinnere. Ich schau später genauer nach. Bei der anderen Methode muss die Hierarchie im DOM stimmen. Also "training" ein Kind von "document" usw...

Wie es ausgegraut aussieht, weiß ich nicht. Vielleicht kann man das beim aktivieren/deaktivieren manipulieren.

Das andere: Im Prinzip trennst du html und php eh recht weitgehend mittels <?php echo .... ?>, wenn dann nur ein Wert aufgerufen wird. Das ist aber Geschmackssache. Ich hab (für mich) die Erfahrung gemacht, dass ich mir später leichter tu, wenn ich möglichst wenig html von php schreiben lasse. Würde also zB das Formularelement in html schreiben und nur die Werte durch php einfügen lassen. Derzeit mache ich es meistens mit Templates, das sind ganz gewöhnliche html-Dateiel mit "Platzhaltern". Beispiel:


PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 

<?
function eins(){}
function zwei(){}
function drei(){}
....usw
$output=file_get_contents('template.htm');               //Template einlesen
$output=str_replace("PLATZHALTER1",eins(),$output);      //Platzhalter eins austauschen
$output=str_replace("PLATZHALTER2",zwei(),$output);
$output=str_replace("PLATZHALTER3",drei(),$output);
.......usw
echo $output;
exit()
?>



Im Template szteht zB:

HTML-Quelltext
1: 
2: 

<iinput type="text" value="PLATZHALTER1" style=".................." />
usw.....


Ist aber, wie gesagt eine Sache von Geschmack und Gewohnheit. In meinem Fall von Bequemlichkeit.

geschrieben von zippy am 08.05.2009 - 18:41
Ääääh, sehe gerade 16 Uhr 39. In Wien ist es zwei Stunden später. Hab ich was versäumt?

geschrieben von AlexD am 09.05.2009 - 10:49
Hi Zippy,

nein Du hast nix versäumt, auch hier in Niederbayern läuft die Zeit wohl ein wenig anders als hier im Forum.

Also das ändern des Hintergrunds in den Formularfelder hat nicht so geklappt wie gedacht.

Hab auch ein Div-Tag um die entsprechenden Felder gelegt, um den kompletten Teil "ausgrauen" zu können. Das klappt mit document.getElementById("xxxxxx").style.backgroundColor='#999999'; sehr gut, nur die Eingabe felder stechen jetzt noch raus. Wär super wenn ich auch diese noch grau machen könnte.

Das dürfte auch gerne über css bzw. über eine klasse class="grau" gehen, dann würde ich mein CSS entsprechend ergänzen und brauch das Style nicht in den HTML-Code schreiben.


Templates:
an sowas hatte ich auch schon gedacht, werde ich mir für Version 3 im Hinterkopf behalten.... möcht mich langsam hoch arbeiten.
Version 1 war alles mit Tabellen und Style-Angaben im HTML-Code, Version 2 ist nun ohne Tabellen und mit CSS, Version könnte ja dann mit Templates laufen...

geschrieben von zippy am 09.05.2009 - 15:47
Hab oben das [0] vergessen....
HTML-Quelltext
1: 

document.getElementsByName("strecken_bezeichnung")[0].style.backgroundColor = '#999999';


Geht style="display:none;" bei Eingabefeldern? Beim die disabelten Felder umgebenden DIV sollte es auf jeden Fall funktionieren. Also, mit nem Link zu dem Formular oder dem Quelltext der Ausgabe tät ich mir leichter, als mit dem Quelltext der php.

geschrieben von AlexD am 09.05.2009 - 16:15
Hey Zippy,

solltest eigentlich ne PN haben mit den entsprechenden Daten und Links!

bei den DIV's klapps ja alles so wie es ein soll.

style="display:none;" funktioniert, das Feld wird anschließend nicht mehr angezeigt.

HTML-Quelltext
1: 

document.getElementsByName("individual_strecke")[0].style.backgroundColor = '#999999';


getElementsByName müsste das nicht getElementByName heißen, also ohne dem s?
Kenn halt nur das "getElementById" und da ist Element und nicht Elements. Nur ne Anmerkung nebenbei.


Funktioniert leider weder mit noch ohne dem s.

geschrieben von zippy am 09.05.2009 - 19:21
Wie wärs mit dem:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 
122: 
123: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<title>Intra-/Internet Portal</title>
</head>
<body>
<p style="border-bottom:1px solid"><span style="font-weight:bold">neue Trainingseinheit eingeben</span></p>
<form class="form" name="training" method="POST" action="process.php">
 <label class="formular">Datum:&nbsp;</label><select class="input"  name="tag">
<option value="00" >&ndash;&ndash;</option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>

<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09"  selected>09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>

<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" >30</option>

<option value="31" >31</option>
</select>
 <select class="input"  name="monat">
<option value="00" >&mdash;&mdash;&mdash;&mdash;&mdash;</option>
<option value="01" >Januar</option>
<option value="02" >Februar</option>
<option value="03" >März</option>
<option value="04" >April</option>
<option value="05"  selected>Mai</option>
<option value="06" >Juni</option>
<option value="07" >Juli</option>
<option value="08" >August</option>
<option value="09" >September</option>
<option value="10" >Oktober</option>
<option value="11" >November</option>
<option value="12" >Dezember</option>
</select>
 <select class="input"  name="jahr">

                  <option value="0000">&ndash;&ndash;&ndash;&ndash;</option>

<option value="2007" >2007</option>
<option value="2008" >2008</option>
<option value="2009"  selected>2009</option>
</select>
<br><br>
  <div id="standart_strecke" >
 <label>Laufstrecke:&nbsp;</label><select class="input" name="strecken_id" >
<option value='' onclick="document.getElementById('individual_strecke').style.display='block'">individuell</option>
<option value='' onclick="document.location.href='index.php?page=laufen&loc=mein_training&action=neue_strecke'">neue Strecke eintragen</option>
<option value="1" onclick="document.getElementById('individual_strecke').style.display='none'">Strecke1</option>
<option value="2" onclick="document.getElementById('individual_strecke').style.display='none'">Strecke2</option>
<option value="3" onclick="document.getElementById('individual_strecke').style.display='none'">Strecke3</option>
<option value="4" onclick="document.getElementById('individual_strecke').style.display='none'">Strecke4</option>
<option value="5" onclick="document.getElementById('individual_strecke').style.display='none'">Strecke5</option>
</select>
  </div>
  <br>

  <div id="individual_strecke" style=" margin-top:2px; margin-bottom:2px; padding:2px;">
  <input class="input" type="text" name="strecken_bezeichnung" value="" size="35"> Streckenbezeichnung<br><br>
   <label>&nbsp;</label><input class="input" type="text" name="individual_distanz" value="" size="4"> <strong>km</strong> Hin- <u>und</u> R&uuml;ckweg (wenn schon zur Laufrunde gelaufen wird)<br><br>

   <label>&nbsp;</label><input class="input" type="text" name="individual_runde" value="" size="4"> <strong>km</strong> Strecken-/Rundenl&auml;nge (ohne Hin-/R&uuml;ckweg!!)<br>
  </div>
  <br>
 <label>Runden:&nbsp;</label><select class="input" name="runden">
<option value="1">1</option>

<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

</select>
<br><br>
 <label>Trainingstype:&nbsp;</label><select class="input" name="type_id">
<option value="1">Erhaltung</option>
<option value="2">Grundlage</option>
<option value="3">Tempo</option>
<option value="4">Intervall</option>
</select>
<br><br>
 <label>Laufzeit:&nbsp;</label><input class="input" type="text" name="std" value="" size="2"> : <input class="input" type="text" name="min" value="" size="2"> : <input class="input" type="text" name="sec" value="" size="2"> hh:mm:ss<br><br>

 <label>&nbsp;</label><input type="hidden" name="trainings_id" value="">
  <input class="button" type="submit" name="new_training" value="eintragen"></form>


</body>

</html>

In der Seite fand ich mehrere head-Abschnitte, mehrere Aufrufe des selben scripts und so weiter

geschrieben von AlexD am 10.05.2009 - 18:01
hey zippy,

werd mir deine lösung gleich mal ansehen.

ich weiß, dass ich ein paar header im skript habe. Sicher noch einige andere schwachstellen.
die header kommen einmal vom kalender, das ein externes script ist und einen header so mitten im script plaziert.

sobald ich ein ergebnis hab, geb ich bescheid!!

vielen dank nochmal für die mühe!!!

geschrieben von zippy am 10.05.2009 - 18:37
Gemeint waren die <head>...</head> Bereiche im Quelltext, nicht die header. Die header hab ich nicht angeschaut. ...

Der Obige Quelltext ist deiner, nur ohne Formatierung und quasi alles rausgenommen, außer dem Formular.
Ich hab bloß die Punkte "individuell" (Vorauswahl) und "neue Strecke..." (als Weiterleitung)
in das Dropdownmenü gefügt, und wennb man in diesem eine voreingestellte Strecke wählt,
verschwindet bei aktiviertem Javascript der Bereich mit den Eingabefeldern
für die individuelle Strecke.


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.