Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Funktion mit Array (oder ähnliches) wiederholen, Einfaches füllen und ausgeben mehrer Felder

Frage Entwicklung JavaScript

Mitglied: Theweber

Theweber (Level 1) - Jetzt verbinden

09.07.2012 um 16:12 Uhr, 3936 Aufrufe, 8 Kommentare

Hallo Zusammen,
habe von javaScript nicht so die Ahnung und darum brauche ich eure Hilfe.
Mein Ziel:
Mehrer eingabe Felder in HTML mit gleichzetiger Ausgabe und der möglichkeit zu löschen.

Ich habe es zu zeit so gelöst bzw. das ist mein Ansatz.

Code:
01.
<html> 
02.
 
03.
<script language="javascript"> 
04.
function addEntry() { 
05.
var oOption=document.createElement("OPTION"); 
06.
oOption.text=news2.value; 
07.
s2.add(oOption); 
08.
09.
function removeEntry() { 
10.
if (s2.selectedIndex==-1) return false; 
11.
s2.remove(s2.selectedIndex); 
12.
13.
</script> 
14.
<script language="javascript"> 
15.
function addEntry1() { 
16.
var oOption=document.createElement("OPTION"); 
17.
oOption.text=news3.value; 
18.
s3.add(oOption); 
19.
20.
function removeEntry1() { 
21.
if (s3.selectedIndex==-1) return false; 
22.
s3.remove(s3.selectedIndex); 
23.
24.
</script> 
25.
 
26.
<Table border="1"> 
27.
	Server Spezifikationen 
28.
	<TR> 
29.
		<td> 
30.
		Servername 
31.
		</td> 
32.
		<td> 
33.
		<select id="s2" size="1"> 
34.
		</select><br> 
35.
		<input type="button" onclick="removeEntry()" value="löschen"> 
36.
		</td> 
37.
		<td> 
38.
		<input type="text" id="news2"> 
39.
		<input type="button" onclick="addEntry()" value="speichern"> 
40.
		</td> 
41.
	</tr> 
42.
	<TR> 
43.
		<td> 
44.
		Servername 
45.
		</td> 
46.
		<td> 
47.
		<select id="s3" size="1"> 
48.
		</select><br> 
49.
		<input type="button" onclick="removeEntry1()" value="löschen"> 
50.
		</td> 
51.
		<td> 
52.
		<input type="text" id="news3"> 
53.
		<input type="button" onclick="addEntry1()" value="speichern"> 
54.
		</td> 
55.
	</tr> 
56.
	 
57.
</table> 
58.
<br> 
59.
</html> 
60.
 
Nun muss es ja möglich sein die Funktion immer wieder zu benutzen ohne Sie 30 mal oben als funktion zu schreiben. ich denke das geht mit einen Array aber habe kein Plan wie.

Ich hoffe ich die Frage ist Verständlich.

Danke
Mitglied: Arano
09.07.2012 um 17:47 Uhr
Hi

hm... besser wäre es gewesen wenn du einfach mal genauer erklärt hättest was du denn vorhast !

Aber die Lösung ist eigentlich gaaaanz einfach ;)
Übergebe der Funktion die IDs der HTML-Elemente.
01.
  <script> 
02.
    function addEntry(targetId, sourceId) 
03.
04.
      var oOption=document.createElement("OPTION"); 
05.
      oOption.text=sourceId.value; 
06.
      targetId.add(oOption);  
07.
08.
  </script> 
09.
   
10.
 
11.
  <input onclick="addEntry('s1','news1')"> 
12.
  ... 
13.
  <input onclick="addEntry('s2','news2')"> 
14.
  ... 
15.
  <input onclick="addEntry('s3','news3')">


~Arano
Bitte warten ..
Mitglied: Theweber
10.07.2012 um 08:36 Uhr
morgen, erst mal vielen Dank für deine Antwort.
Gern erkläre ich dir den hintergrund.

Und zwar möchte ich ein HTML erstellen, wo ich felder vorgebe. der User gibt dann einfach nur noch die Daten ein.

Nun habe ich das Verstanden, allerdings fehlt mir noch die Ausgabe.

Mein Code sieht nun so aus:

<script language="javascript">
function addEntry(targetId, sourceId)
{
var oOption=document.createElement("OPTION");
oOption.text=sourceId.value;
targetId.add(oOption);
}
</script>
<input type="text">
<input type="button" onclick="addEntry('s1','news1')" value="speichern">

Wie kann ich den nun Links daneben den Text ausgeben?

Danke
Bitte warten ..
Mitglied: Arano
10.07.2012 um 12:30 Uhr
Hi,

wo ist dein Element mit der ID "s1" ?
Hast du das <select> jetzt beim posten vergessen oder fehlt es vetsehendlich tatsächlich noch in deinem Quelltext ?

Dem <input type="text"> fehlt die ID="newsX"... ;)


~Arano
Bitte warten ..
Mitglied: nxclass
10.07.2012 um 12:53 Uhr
Mehrer eingabe Felder in HTML mit gleichzetiger Ausgabe und der möglichkeit zu löschen.
... hast Du auch bedacht, dass beim senden des Formulars nur die ausgewählten Elemente aus SELECT übertragen werden? - könnte eine Liste mit INPUT (text o. checkbox) Feldern nicht sinnvoller sein ?

Weiterhin würde ich nicht in jedes HTML Input Element den Javascript Code einbauen, sondern mit
01.
.getElementsByTagName()
arbeiten und über die Element Liste iterieren um die onclick Events zu setzen.
Bitte warten ..
Mitglied: Theweber
11.07.2012 um 16:07 Uhr
Hallo,
also nocheinmal zur Verdeutlichung.
Es wird nur eine HTML Seite geben.
Dort aber halt so ca. 10 - 20 Einträge.
Aufbau soll wie folgt sein.
Beschreibung: Eingabefeld
Als Bsp.
Name: (Eingabefelde)->User gibt den Namen ein | Fertig das war´s. Nun soll der Name dort stehen.

Vieleicht Hilft das ein bisschen.
Stehe wegen den Code aber gerade auf den Schlauch, bekomme es nicht hin das das eingegeben dort auftaucht.
01.
<html> 
02.
<script language="javascript"> 
03.
 function addEntry(targetId, sourceId)  
04.
05.
     var oOption=document.createElement("OPTION"); 
06.
      oOption.text=sourceId.value;  
07.
      targetId.add(oOption); 
08.
09.
</script> 
10.
<select id="s1" size="1"> 
11.
		</select><br> 
12.
<input type="text" id="('s1','news1')">  
13.
<input type="button" onclick="addEntry('s1','news1')" value="speichern">  
14.
</html>
Bitte warten ..
Mitglied: Arano
11.07.2012 um 20:01 Uhr
Hoho junge...
stehst wohl mit beiden Füßen auf dem Schlauch, he !?
<input type="text" id="('s1','news1')"> *hihi*

Du hättest doch nur dein eigenes (altes) soweit anpassen müssen, das die IDs aus den Parametern gezogen werden...
01.
<html> 
02.
  <head> 
03.
    <title>was auch immer...</title> 
04.
    <script type="text/javascript"> 
05.
      <!-- 
06.
 
07.
        function addEntry( targetId, sourceId ) 
08.
09.
            var oSource = document.getElementById( sourceId ); 
10.
            var oTarget = document.getElementById( targetId ); 
11.
            if( null==oSource || null==oTarget ) 
12.
13.
                alert( "Das Quell- oder Zielelement wurde nicht gefunden !" ); 
14.
                return false; 
15.
16.
            var oOption = document.createElement( "OPTION" ); 
17.
            oOption.text = oSource.value; 
18.
            oTarget.add( oOption ); 
19.
            // leere eingabefeld ;) 
20.
            oSource.value = ""; 
21.
             
22.
            return true; 
23.
24.
         
25.
         
26.
         
27.
        function removeEntry( selectId ) 
28.
29.
            var oSelect = document.getElementById( selectId ); 
30.
            if( oSelect.selectedIndex==-1 ) 
31.
                return false;  
32.
            oSelect.remove( oSelect.selectedIndex ); 
33.
             
34.
            return true  
35.
36.
 
37.
      --> 
38.
    </script> 
39.
  </head> 
40.
  <body> 
41.
 
42.
 
43.
 
44.
<select id="s1" size="1"></select><br> 
45.
<input type="text" id="news1">  
46.
<input type="button" onclick="addEntry( 's1', 'news1' )" value="speichern"><br> 
47.
<input type="button" onclick="removeEntry( 's1' )" value="l&ouml;schen"> 
48.
 
49.
<br><br> 
50.
 
51.
<select id="s2" size="1"></select><br> 
52.
<input type="text" id="news2">  
53.
<input type="button" onclick="addEntry( 's2', 'news2' )" value="speichern"><br> 
54.
<input type="button" onclick="removeEntry( 's2' )" value="l&ouml;schen"> 
55.
 
56.
 
57.
 
58.
  </body> 
59.
</html>
Du solltest noch eine Prüfung auf gefüllte Eingabefelder einbauen, sonst werden leere <option>s erzeugt ;)


~Arano
Bitte warten ..
Mitglied: Theweber
18.07.2012 um 12:16 Uhr
Vielen Dank euch allen, es funktioniert wunderbar.

Allerdings habe ich ein Problem. (habe ich mir schon gedacht)
Es ist ja nun so wenn ich die Seite wieder aufbaue sind alle eingaben weg. kann ich die Irgendwie Fest speichern?
Die Eingaben sollen ja für immer da stehen und nicht nur solange ich auf der Seite bin.
Bitte warten ..
Mitglied: Arano
18.07.2012 um 20:25 Uhr
kann ich die Irgendwie Fest speichern?
o_O Und DAMIT kommst du erst jetzt !?
nicht das ich das nicht eh schon befürchtet hatte... *g*

Wie ich es bereits mit meiner ersten Antwort auf deine Fragestellung gefordert hatte: eine genaue Beschreibung ;)
irgendwie = mach nen Screenshot :P

Also dein Problem ist jetzt folgendes:
HTML (HyperText Markup Language) ist nur eine Auszeichnungssprache, also um besondere Abschnitte eines Textes gesondert hervorzuheben / zu formatieren: Überschriften <h[1-6]>, Schlagwörter <[b|i|k]>, Listen <li>, Links, Dropdown, ect.
Zur statischen Darstellung - mehr nicht !

Um die Daten nun "irgendwie" zu speichern benötigst du also eine weitere Sprache die dieses kann, z.B: PHP - kann __dein SERVER__ das !? Oder Perl oder ASP.net oder eine andere.
Wenn ja, kannst du eben mit dieser Sprache die Daten z.B. in einer einfachen Datei speichern oder gar in eine Datenbank ablegen (was hier aber wohl überdimensioniert wäre, wenn nicht schon vorhanden)
Wenn nicht, sieht es schlecht aus. Ein bisschen Hoffnung kann ich dir allerdings mit HTML5 auch hier noch geben HTML5 und Local Storage aber damit habe ich mich noch nicht beschäftigt. Und dieses setzt voraus, das deine Seite immer auf dem Rechner benutzt wird auf dem auch die Daten gespeichert sind. die genaue Beschreibung fehlt ja ;)

Und ohne zu wissen was für Möglichkeiten du (dein Server) hast, kann man dir schlecht helfen...


Schönen Gruß
~Arano
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(8)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
C und C++
String einlesen in Array und wieder ausgeben von hinten (4)

Frage von Protected zum Thema C und C ...

Windows Server
gelöst Powershell array zeilenweise in Textdatei ausgeben (6)

Frage von Peter0816 zum Thema Windows Server ...

Microsoft Office
gelöst Excel: Text in Zellbereich prüfen mit Vergleichstext ggf. mit Exact-Funktion (5)

Frage von Michi1 zum Thema Microsoft Office ...

JavaScript
AngularJS Variable über Input in Funktion ausführen

Frage von badkilla zum Thema JavaScript ...

Heiß diskutierte Inhalte
Microsoft
Ordner mit LW-Buchstaben versehen und benennen (20)

Frage von Xaero1982 zum Thema Microsoft ...

Outlook & Mail
gelöst Outlook 2010 findet ost datei nicht (19)

Frage von Floh21 zum Thema Outlook & Mail ...

Netzwerkmanagement
gelöst Anregungen, kleiner Betrieb, IT-Umgebung (18)

Frage von Unwichtig zum Thema Netzwerkmanagement ...

Festplatten, SSD, Raid
M.2 SSD wird nicht erkannt (14)

Frage von uridium69 zum Thema Festplatten, SSD, Raid ...