Anzeige

[JAVASCRIPT] Formularsteuerung

[JAVASCRIPT] Formularsteuerung | PSD-Tutorials.de

Erstellt von mave, 15.01.2009.

  1. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    Hallo Ihr! Habe mir was zusammengeschrieben, aber meine Birne kommt irgendwie nicht weiter... und zwar folgendes:

    Das Formular besteht aus 3 Komponenten... 1x Textfeld, 2x Selectfeld... im ersten Selectfeld wird eine Thema ausgewählt... daraufhin werden die Fragen aus einem Array in das zweite Selectfeld eingelesen... funktioniert prima...

    Nun möchte ich jedoch, dass das Value der eingelesenen Fragen an das Textfeld übergeben werden und ausgegeben werden... ich komm aber irgendwie nicht drauf, wie ich den Wert von Value durchs Array mit in die Frage bekomm...

    Wäre spitze wenn mir da jemand weiterhelfen könnte, hier mal der Code:

    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
    2. <html>
    3. <head>
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5.   <title>Select</title>
    6.   <script type="text/javascript">
    7.   <!--
    8.   var toadd = new Array();
    9.   toadd["Sicherheitsbestimmungen"] = new Array();
    10.   toadd["Sicherheitsbestimmungen"][0] = "Frage 1?";
    11.   toadd["Sicherheitsbestimmungen"][1] = "Frage 2?";
    12.   toadd["Sicherheitsbestimmungen"][2] = "Frage 3?";
    13.   toadd["Sicherheitsbestimmungen"][3] = "Frage 4?";
    14.  
    15.   toadd["Nutzung"] = new Array();
    16.   toadd["Nutzung"][0] = "Frage 1?";
    17.   toadd["Nutzung"][1] = "Frage 2?";
    18.   toadd["Nutzung"][2] = "Frage 3?";
    19.   toadd["Nutzung"][3] = "Frage 4?";
    20.   toadd["Nutzung"][4] = "Frage 5?";
    21.   toadd["Nutzung"][5] = "Frage 6?";
    22.   toadd["Nutzung"][6] = "Frage 7?";
    23.   toadd["Nutzung"][7] = "Frage 8?";
    24.  
    25.   toadd["Werbemittel"] = new Array();
    26.   toadd["Werbemittel"][0] = "Frage 1?";
    27.   toadd["Werbemittel"][1] = "Frage 2?";
    28.   toadd["Werbemittel"][2] = "Frage 3?";
    29.   toadd["Werbemittel"][3] = "Frage 4?";
    30.      
    31.   function addOption(wert)
    32.   {
    33.      if(document.myform.frage.length > 0)
    34.      {
    35.        document.myform.frage.length = null;
    36.      }
    37.      for(i=0;i < toadd[wert].length;i++)
    38.      {
    39.        ins = new Option(toadd[wert][i],toadd[wert][i]);
    40.        document.myform.frage.options[document.myform.frage.length] = ins;
    41.      }
    42.   }
    43.  
    44.  function addAnswer(seect)
    45.  {
    46.   var wert = select.options[select.options.selectedIndex].value;
    47.    if (wert != "")
    48.  {
    49.      document.forms[0].elements[0].value = select.options[select.options.selectedIndex].value;
    50.    }
    51.  }
    52.   -->
    53.   </script>
    54. </head>
    55.  
    56. <body>
    57. <form name="myform" action="test.php" method="post">
    58. <p>
    59.   <textarea align="center" readonly="readonly" style="font-family:Verdana; font-size:12px; overflow:auto; background-color:transparent; border:0px; text-align:left;" name="bemerkung" cols="80" rows="10"></textarea>
    60. <p>Thema:
    61.   <select style="width:700px;" name="thema" onChange="addOption(this.form.thema.options[this.form.thema.options.selectedIndex].value)">
    62.     <option>--- Thema auswählen ---</option>
    63.     <option value="Sicherheitsbestimmungen">Sicherheitsbestimmungen</option>
    64.     <option value="Nutzung">Nutzung</option>
    65.     <option value="Werbemittel">Werbemittel</option>
    66.   </select>
    67.   <br />
    68.   Frage:
    69.   <select style="width:700px;" name="frage" onchange="addAnswer(this);return false">
    70.     <option>--- Frage auswählen ---</option>
    71.   </select>
    72.   <br />
    73. </form>
    74. </body>
    75. </html>
     
    #1      
  2. smcdonald

    smcdonald Nicht mehr ganz neu hier

    Dabei seit:
    09.01.2009
    Beiträge:
    64
    Geschlecht:
    männlich
    Ort:
    Niederkassel
    Kameratyp:
    Canon EOS 450D
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    In der Methode addAnswer ist select nicht definiert.
    Ich habe mal dem select eine id gegeben:

    Code (Text):
    1. <select id="thema" ...
    und in der Methode kannst du dann per
    Code (Text):
    1. document.getElementById()
    darauf zugreifen:

    Code (Text):
    1. function addAnswer(seect)
    2.  {
    3.   var select = document.getElementById('thema');
    4.   var wert = select.options[select.options.selectedIndex].value;
    5.    if (wert != "")
    6.  {
    7.      document.forms[0].elements[0].value = select.options[select.options.selectedIndex].value;
    8.    }
    9.  }
    Probiers mal aus.

    Gruß,
    Stephan
     
    #2      
  3. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    Code (Text):
    1. function addAnswer(seect)
    heisst eigentlich
    Code (Text):
    1. function addAnswer(select)
    ... kleiner Schreibfehler meinerseits...

    Wenn der Fehler weg ist, wird die Frage die aus dem Array gelesen wird dann auch an die Textarea übergeben... blos ich will ja nicht die Frage, sondern die Antwort, die im Value der selektierten Frage steht an die Textarea übergeben...

    Der wert für value muss per array übergeben werden und dann per JS an die Textarea übergeben werden... mich interessiert eben wie ich das realisieren kann...
     
    Zuletzt bearbeitet: 15.01.2009
    #3      
  4. smcdonald

    smcdonald Nicht mehr ganz neu hier

    Dabei seit:
    09.01.2009
    Beiträge:
    64
    Geschlecht:
    männlich
    Ort:
    Niederkassel
    Kameratyp:
    Canon EOS 450D
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    Sorry, das mit dem Schreibfehler hätte ich auch sehen sollen.
    Aber ich steh noch ein bisschen auf dem Schlauch. Welche Antworten meinst du denn?
    In deinem Code sehe ich nur die Arrays mit den Fragen. Und welchen Teil im Code genau willst du ändern?
     
    #4      
  5. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    Bisher hatte ich alle Fragen in einem Selectfeld... da ich jedoch mehrere Kategorien habe, wollte ich es nochmal unterteilen... d.h. Thema auswählen... dann die Frage... daraufhin kommt die Antwort in einer Textarea...

    Das sah so aus:
    <option value="Antwort: Die Antwort!">Frage 1?</option>

    Sobald ich die Frage im Selectfeld ausgewählt hatte erschien auch die Antwort in der Textarea... diese wurde einfach aus dem Value ausgelesen und an die Textarea übergeben...

    Die Fragen werden nun schon beim neuen prima übergeben... jedoch nicht das Value... woher auch?!?!?! das ist eben die Frage wie ich das machen kann... im prinzip musste ich zu jeder Frage im Array die Antwort angeben und die dann als Value mit übergeben... blos wie?!?!?!
     
    #5      
  6. smcdonald

    smcdonald Nicht mehr ganz neu hier

    Dabei seit:
    09.01.2009
    Beiträge:
    64
    Geschlecht:
    männlich
    Ort:
    Niederkassel
    Kameratyp:
    Canon EOS 450D
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    Hi,

    was hälts du denn davon:

    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5.   <title>Select</title>
    6.   <script type="text/javascript">
    7.   <!--
    8.   var toadd = new Array();
    9.   toadd["Sicherheitsbestimmungen"] = new Array();
    10.   toadd["Sicherheitsbestimmungen"][0] = ["Frage 1?", "Antwort 1"];
    11.   toadd["Sicherheitsbestimmungen"][1] = ["Frage 2?", "Antwort 2"];
    12.   toadd["Sicherheitsbestimmungen"][2] = ["Frage 3?", "Antwort 3"];
    13.  
    14.   toadd["Nutzung"] = new Array();
    15.   toadd["Nutzung"][0] = ["Frage 1?", "Antwort 1"];
    16.   toadd["Nutzung"][1] = ["Frage 2?", "Antwort 2"];
    17.   toadd["Nutzung"][2] = ["Frage 3?", "Antwort 3"];  
    18.  
    19.   toadd["Werbemittel"] = new Array();
    20.   toadd["Werbemittel"][0] = ["Frage 1?", "Antwort 1"];
    21.   toadd["Werbemittel"][1] = ["Frage 2?", "Antwort 2"];
    22.   toadd["Werbemittel"][2] = ["Frage 3?", "Antwort 3"];
    23.  
    24.      
    25.   function addOption(wert)
    26.   {
    27.      if(document.myform.frage.length > 0)
    28.      {
    29.        document.myform.frage.length = null;
    30.      }
    31.  
    32.     ins = new Option('--- Frage auswählen ---','--- Frage auswählen ---');
    33.     document.myform.frage.options[document.myform.frage.length] = ins;
    34.  
    35.      for(i=0;i < toadd[wert].length;i++)
    36.      {
    37.        ins = new Option(toadd[wert][i][0],toadd[wert][i][1]);
    38.        document.myform.frage.options[document.myform.frage.length] = ins;
    39.      }
    40.   }
    41.  
    42.  function addAnswer(select)
    43.  {
    44.   var wert = select.options[select.options.selectedIndex].value;
    45.    if (wert != "")
    46.  {
    47.      document.forms[0].elements[0].value = select.options[select.options.selectedIndex].value;
    48.    }
    49.  }
    50.   -->
    51.   </script>
    52. </head>
    53.  
    54. <body>
    55. <form name="myform" action="test.php" method="post">
    56. <p>
    57.   <textarea align="center" readonly="readonly" style="font-family:Verdana; font-size:12px; overflow:auto; background-color:transparent; border:0px; text-align:left;" name="bemerkung" cols="80" rows="10"></textarea>
    58. <p>Thema:
    59.   <select style="width:700px;" name="thema" onChange="addOption(this.form.thema.options[this.form.thema.options.selectedIndex].value)">
    60.     <option>--- Thema auswählen ---</option>
    61.     <option value="Sicherheitsbestimmungen">Sicherheitsbestimmungen</option>
    62.     <option value="Nutzung">Nutzung</option>
    63.     <option value="Werbemittel">Werbemittel</option>
    64.   </select>
    65.   <br />
    66.   Frage:
    67.   <select style="width:700px;" name="frage" onchange="addAnswer(this);return false">
    68.     <option>--- Frage auswählen ---</option>
    69.   </select>
    70.   <br />
    71. </form>
    72. </body>
    73. </html>
     
    #6      
  7. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    genau das meinte ich... und wie ich es mir gedacht hab war ich einfach zu blöd grade... GROßES DANKESCHÖN!
     
    #7      
  8. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    Besteht eigentlich die Möglichkeit den Text irgendwie in <div> auszugeben anstatt in einer Textarea... wegen der Formatierung vom Text...
     
    #8      
  9. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    ganz einfach per Element.innerHTML=... , z.B.:document.getElementById('ausgabe').innerHTML='<b>Beispiel</b>';
     
    #9      
  10. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    hm, das hatte ich schon... ging nicht... anscheinend hab ich irgendwas falsch geschrieben... danke!
     
    #10      
  11. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    wie hast du es denn gelöst?
     
    #11      
  12. mave

    mave Nicht mehr ganz neu hier

    Dabei seit:
    04.08.2008
    Beiträge:
    106
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Photoshop, Illustrator, Flash
    [JAVASCRIPT] Formularsteuerung
    AW: [JAVASCRIPT] Formularsteuerung

    So.. die id verweist auf die Tabelle...

    Code (Text):
    1. document.getElementById('antworttext').innerHTML = select.options[select.options.selectedIndex].value;
     
    #12      
x
×
×