:: Buchempfehlung ::

crayzee · #1 29.06.2005, 17:05:25

Hallo!

Habe ein kleines Programm geschrieben.
Hab es ein wenig abgespeckt, damit man sieht was ich machen will:

Zitat:

<html>
<body>

<script language="javascript">
function Sortiere(streetx) {
var street01,box,tour,zusteller;
street01=streetx;
switch (street01) {

case "ost":
box=111;
tour=222;
zusteller=333;
break;

case "west":
box=444;
tour=555;
zusteller=666;
break;

default:
box=999;
tour=999;
zusteller=999;
break;
}}
</script>

<form name="Streeteingabe" action="" onSubmit="Sortiere(document.Streeteingabe.streetx.value)">
<input type="text" name="streetx" size="20" tabindex="1">
<input type="button" value="go"
onClick="Sortiere(document.Streeteingabe.streetx.value)">
</form>

<table border="1" width="100%" id="table1">
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
</tr>
</table>

</body>
</html>

Aaaalso:
Man gibt einen Wert in das Eingabefeld. Der Wert wird gecheckt ob ost oder west, und je nach dem ob ost oder west (kommen später noch ca. 300 andere Werte mit rein) sind die drei Variablen "box" "tour" und "zusteller" definiert.
Soweit so gut.
Nun will ich, dass nach dem Klick auf den Go-Button bzw. nach drücken der Entertaste in Spalte 1 der Wert der Variable "box", in Spalte 2 der Wert der Variable "tour" und in Spalte 3 der Wert der Variable "zusteller".
Dabei gibt es 2 Probleme (für mich sind es zumindest Probleme *g*):
1. An einem anderen Ort in der HMTL-Datei eine Variable anzeigen lassen, welche ganz woanders definiert wurde.
2. Dem Script klarmachen, dass er die Werte der Variablen erst schreiben soll, wenn der Button oder Enter gedrückt wurde, da er sie ja erst nach der Eingabe der Daten hat.

Wäre ganz toll, wenn ihr mir hier weiterhelfen könntet!

Viele Grüße

xabbuh · #2 29.06.2005, 18:36:54

Zitat:

Zitat von crayzee

1. An einem anderen Ort in der HMTL-Datei eine Variable anzeigen lassen, welche ganz woanders definiert wurde.

Das geht recht einfach, in dem du innerHTML für diesen Bereich veränderst.

Zitat:

Zitat von crayzee

2. Dem Script klarmachen, dass er die Werte der Variablen erst schreiben soll, wenn der Button oder Enter gedrückt wurde, da er sie ja erst nach der Eingabe der Daten hat.

Wenn ich dich richtig verstanden habe, soll dies also erfolgen, sobald das Formular abgeschickt wurde. Dafür gibt es den Event-Handler onsubmit.

Beides kombiniert könnte so aussehen:

HTML-Code:

<script type="text/javascript">
<!--
    function SetValue(var)
    {
        document.getElementById('show').innerHTML = var;
    }
//-->
</script>

<form onsubmit="SetValue('hallo');">
  <!--  hier folgen dann Formularelemente -->
</form>

<!-- in diesem Bereich soll die Variable angezeigt werden -->
<div id="show">
</div>

crayzee · #3 29.06.2005, 21:05:55

Kannst du das vielleicht nochmal ein wenig weiter erläutern, bin auf dem Gebiet nicht so schlau....ich kann immer nur das, was ich bis dahin gelernt hab *g*
Also das was ich selbst geschrieben hab versteh ich, aber das neue da von dir......kp

ALso, nochmal genauer?

xabbuh · #4 29.06.2005, 21:51:31

Also: Beim Abschicken des Formulares (onsubmit) wird die Funktion SetValue() mit der Zeichenkette hallo als Parameter aufgerufen. Diese Funktion nimmt den Wert des Parameters und füllt das HTML-Element (innerHTML) mit der id show (getElementById()) mit diesem Wert.

crayzee · #5 29.06.2005, 22:59:50

Ja hört sich gut an....aaaber:

Ich hab ja ganz oben schon die case/switch-Anweisung, welche ja "box" "tour" und "zusteller" definiert....

Wie mach ich das bei MEINEM programm?

crayzee · #6 29.06.2005, 23:55:25

HTML-Code:

<html>
<body>

<script language="javascript">
 function Sortiere(streetx) {
	var street01,box,tour,zusteller;
	street01=streetx;
	switch (street01) {

		case "ost":
		box=111;
		tour=222;
		zusteller=333;
		break;
		
		case "west":
		box=444;
		tour=555;
		zusteller=666;
		break;
		
		default:
		box=999;
		tour=999;
		zusteller=999;
		break;
		}}
</script>

<script type="text/javascript">
<!--
    function SetBox(var1)
    {
        document.getElementById('box1').innerHTML = var1;
    }
//-->
</script>
<script type="text/javascript">
<!--
    function SetTour(var2)
    {
        document.getElementById('tour1').innerHTML = var2;
    }
//-->
</script>
<script type="text/javascript">
<!--
    function SetZusteller(var3)
    {
        document.getElementById('zusteller1').innerHTML = var3;
    }
//-->
</script>



<form name="Streeteingabe" action="" onSubmit="Sortiere(document.Streeteingabe.streetx.value)+SetBox(""+box+"")+SetTour(""+tour+"")+SetZusteller(""+zusteller+"")">
<input type="text" name="streetx" size="20" tabindex="1">
<input type="button" value="go" onClick="Sortiere(document.Streeteingabe.streetx.value)+SetBox(""+box+"")+SetTour(""+tour+"")+SetZusteller(""+zusteller+"")">
</form>

<table border="1" width="100%" id="table1">
	<tr>
		<td><div id="box1"></div></td>
		<td><div id="tour1"></div></td>
		<td><div id="zusteller1"></div></td>
	</tr>
</table>

</body>
</html>

So siehts jetzt aus.
Probleme:
1. Wenn ich Enter drücke passiert was anderes (oben in der Adresszeile wird hinten &streex=EINGABE angehängt) als wenn ich auf den Button klicke.
2. wenn ich im Formular SetBox/SetTour/SetZusteller das in den Klammern in zwei Gänsefüßchen (""+box+"") schreibe passiert gar nicht, in zwei Hochkommas (''+box+'') kommt der Fehler "box ist nicht definiert".

'verzweifeltbin'

xabbuh · #7 30.06.2005, 10:27:29

Zitat:

Zitat von crayzee

1. Wenn ich Enter drücke passiert was anderes (oben in der Adresszeile wird hinten &streex=EINGABE angehängt) als wenn ich auf den Button klicke.

Bei deinem Code wird das Formular bislang noch versendet. Da du keine method-Attribut in dein Formularelement eingetragen hast, werden die Werte über die Methode GET (also per URL) übertragen. Da das action-Attribut leer ist, wird das Formular an die gleiche Seite geschickt. Damit das Formular nicht versendet sondern nur die JavaScript-Funktion ausgeführt wird, musst du die Funktion Sortiere() false zurückgeben lassen.

Zitat:

Zitat von crayzee

2. wenn ich im Formular SetBox/SetTour/SetZusteller das in den Klammern in zwei Gänsefüßchen (""+box+"") schreibe passiert gar nicht, in zwei Hochkommas (''+box+'') kommt der Fehler "box ist nicht definiert".

Innerhalb von onsubmit musst du alle Funktionsaufrufe mit einem Semikolon trennen. Parameter müssen, wenn es Zeichenketten sind, von Hochkommata eingeschlossen werden, da bei Anführungszeichen davon ausgegangen wird, dass hier das onsubmit-Attribut endet.

crayzee · #8 30.06.2005, 12:58:03

Also jetzt sieht es so aus:

HTML-Code:

<html>
<head>

<script type="text/javascript">
function Sortiere (strasse) {
  var strasse,box,tour,zusteller;
  switch (strasse) {
		case "ost":
		box=111;
		tour=222;
		zusteller=333;
		break;
		
		case "west":
		box=444;
		tour=555;
		zusteller=666;
		break;
		
		default:
		box=999;
		tour=999;
		zusteller=999;
		break;
		}
  return box;
  return tour;
  return zusteller;
}

function SchreibeBox (street1) {
  var box = Sortiere (street1);
  document.StrasseForm.Boxfeld.value = box;
}

function SchreibeTour (street1) {
  var tour = Sortiere (street1);
  document.StrasseForm.Tourfeld.value = tour;
}

function SchreibeZusteller (street1) {
  var zusteller = Sortiere (street1);
  document.StrasseForm.Zustellerfeld.value = zusteller;
}
</script>
</head>
<body>
<form name="StrasseForm" method="post" onSubmit="SchreibeBox(document.StrasseForm.StrasseEingabe.value); SchreibeTour(document.StrasseForm.StrasseEingabe.value); SchreibeZusteller(document.StrasseForm.StrasseEingabe.value);">
<pre>
Straße: <input type="text" name="StrasseEingabe">
</pre>
<input type="button" value="Go"
onClick="SchreibeBox(document.StrasseForm.StrasseEingabe.value); SchreibeTour(document.StrasseForm.StrasseEingabe.value); SchreibeZusteller(document.StrasseForm.StrasseEingabe.value);">
<pre>
Box:   <input type="text" name="Boxfeld"><br>
Tour:   <input type="text" name="Tourfeld"><br>
Zusteller:   <input type="text" name="Zustellerfeld"><br>
</pre>
</form>


</body>
</html>

Problem:

1. Beim Enter-klicken passiert nun garnichts mehr! Wenn ich method="post" ganz rausnehme, passiert auch gar nichts. Muss ich für action="" etwas angeben?

2. In allen 3 Feldern werden die gleichen Werte angegeben! Wie mach ich der function SchreibeBox( klar, dass sie den Wert für "box" aus der function Sortiere() nehmen soll? (bzw. für ***Tour und ***Zusteller?)

xabbuh · #9 30.06.2005, 18:30:35

Zitat:

Zitat von crayzee

1. Beim Enter-klicken passiert nun garnichts mehr! Wenn ich method="post" ganz rausnehme, passiert auch gar nichts. Muss ich für action="" etwas angeben?

Du musst dafür sorgen, dass die Funktionen false zurückliefern, da ansonsten das Formular versendet wird. Die drei Zeilen mit return in der Funktion Sortiere() machen keinen Sinn, da die Funktion beim ersten return schon verlassen wird.

Zitat:

Zitat von crayzee

2. In allen 3 Feldern werden die gleichen Werte angegeben! Wie mach ich der function SchreibeBox( klar, dass sie den Wert für "box" aus der function Sortiere() nehmen soll? (bzw. für ***Tour und ***Zusteller?)

Die Frage habe ich nicht verstanden. Was genau meinst du?

crayzee · #10 30.06.2005, 23:57:15

zu 1. Wie sorge ích denn dafür, dass die Funktionen false zurückliefern?
Wie kann ich die 3 return-Zeilen kombinieren?

zu 2. Schau dir mal die Datei an (oder führ sie sogar mal aus, dann siehst dus ja). Wenn ich nun "ost" eingebe, wird in allen 3 Feldern "111" ausgegeben.
Ich will aber, dass im ersten "111", im zweiten "222" und im dritten "333" ausgegeben wird (eben die Variablen für Box, Zusteller und Tour).

EDIT:

xabbuh, vielen Dank für deine ausführliche Hilfe!
Habe jetzt einen weiteren Tip erhalten.....der funzt auf Anhieb perfekt...

Schaust du hier:

Zitat:

Setzte am Ende Deiner Funktion etwas in der Art:
...
tour=999;
zusteller=999;
break;
}
document.anzeige.spalte1.value=box;
...
}

Das machst Du analog für die anderen Variablen.

Nun setzt Du um Deine Tabelle ein neues Formular und für die Spalten das entsprechende input-Feld.
Das sieht dann in etwa so aus:

<form name="anzeige">
<table border="1" width="100%" id="table1">
<tr>
<td><input type="text" name="spalte1" size="20"></td>
...
</tr>
</table>
</form>

So würde ich es mal versuchen.

Gruß
Stephan

EDIT2:

Hmmm, das Problem dass nichts passiert, wenn ich Enter drücke, hab ich immer noch nicht in den Griff bekommen....wie genau muss ich das machen?

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!