Methode appendData()

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Methode appendData()



    Leider bin ich in JavaSkript nicht so bewandert und habe eigentlich vor ein DB-Übung zu veranstalten (http://www.php-resource.de/forum/php...b-problem.html). Hierzu brauche ein wenig JS. Ich habe ein Formular in dem alle Daten erfasst werden, nun tüfftel ich grad an einer Möglichkeit mehre CDs zum absenden hinzuzufügen.

    Aus der DropDown Box soll die CD ausgewählt. Die Menge soll in das Input-Feld eingeben werden.

    Die Werte sollen dann in der DIV Box als weitere Zeile ausgeben werden.

    HTML-Code:
    <select name="cd">
                    <option value="1">Fettes Brot - Strom und Drang</option>
                </select>
    <input name="menge" type="text" />
    <input name="Submit" type="submit" value="Hinzufügen" />
    
    <hr>
    
    <div id="ausgabe">
        <table>
            <tr>
                <td>Album</td>
                <td>Menge</td>
                <td>Löschen</td>
            </tr>
    
        </table>
    
    </div>


  • #2
    und wie lautet jetzt die Frage?
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      Die Frage ist wie ich das in JavaScript umsetze ob das überhaupt mit appendData() geht?

      Kommentar


      • #4
        Mit appendData in diesem Falle eher nicht, aber mit DOM-Manipulation im Allgmeinen schon. Informiere dich über DOCUMENT.createElement, DOCUMENT.createTextNode, NODE.appendChild und die rows-Collection von HTMLTableElement.

        Ein JS-Tutorial ist vielleicht auch eine gute Idee.

        Mehr gibt es dazu nicht zu sagen, das ist ein Hilfeforum und keine Volkshochschule.

        Gruß,

        Amica
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          Habe heute meinen Gutmütigen. Daher mal auf die Schnelle und nur zur Anschauung:
          PHP-Code:
          <script type="text/javascript">
            function 
          setAlbum()
            {
              var 
          ele   document.bla.cd;
              var 
          index ele.selectedIndex;
              var 
          album ele.options[index].firstChild.data;
              
          document.getElementById('album').firstChild.data += album;          
            }
            function 
          setNum()
            {
              if (!
          isNaN(document.bla.menge.value))
              {
                
          document.getElementById('menge').firstChild.data += document.bla.menge.value
              }    
            }
          </
          script>
          <
          form name="bla">
          <
          select name="cd" onchange="setAlbum();">
            <
          option value="0">----</option>
            <
          option value="1">bla</option>
            <
          option value="2">blubb</option>
            <
          option value="3">blubber</option>
          </
          select>
          <
          input name="menge" type="text" onkeyup="setNum();" />
          </
          form>
          <
          hr>

          <
          table>
          <
          tr>
            <
          td id="album">Album: </td>
            <
          td id="menge">Menge: </td>
            <
          td>Löschen</td>
          </
          tr>
          </
          table
          Ansonsten empfehle ich dir diese Einführung und die entsprechenden Tutorials.

          Peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            DIE FINALE LÖSUNG!

            HTML-Code:
            <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
            <title>Album</title>
            <script type="text/javascript" src="settings/jquery.js"></script>
            
            <script type="text/javascript">
            
            var i = 1;
            
            function addProduct() {
                cd             = $('#cd option:selected').text()
                menge        = $('#menge').val();
            
                $('#ausgabe').append('<tr id="ausgabenzeile_'+i+'"><td>'+cd+'</td>
            <td>'+menge+'</td><td><input name="Submit" type="submit" 
            value="Löschen" onclick="removeProduct('+i+')" /></td></tr>');
            
                i++;
            
            }
            
            function removeProduct(id) {
                $('#ausgabenzeile_'+id).fadeOut('slow',function(){
                    $(this).remove();
                });
            }
            
            </script>
            
            </head>
            
            <body>
            
            
            <select name="cd" id="cd">
               <option value="1">Fettes Brot - Strom und Drang</option>
               <option value="1">Fettes Brot - Fettes</option>
               <option value="1">Fettes Brot - Brot</option>
                     
            </select>
            
            <input name="menge" id="menge" type="text" />
            <input name="Submit" type="submit" value="Hinzufügen" onclick="addProduct()" />
            
            <hr>
            
            <div >
                <table id="ausgabe">
                    <tr>
                        <td>Album</td>
                        <td>Menge</td>
                        <td>Löschen</td>
                    </tr>
            
                </table>
            </div>
            
            </body>
            
            </html>
            Zuletzt geändert von JohnWorksCooper; 04.03.2010, 18:48.

            Kommentar


            • #7
              Zitat von JohnWorksCooper Beitrag anzeigen
              DIE FINALE LÖSUNG!
              Da haben wir mal wieder ein schönes Beispiel dafür, dass man für eine Kleinigkeit sofort ein monstermäßiges JavaScript-Framework braucht. Aber jedem das Seine.

              Peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                Zitat von Kropff Beitrag anzeigen
                Da haben wir mal wieder ein schönes Beispiel dafür, dass man für eine Kleinigkeit sofort ein monstermäßiges JavaScript-Framework braucht. Aber jedem das Seine.
                Das dachte ich mir auch, aber das ist halt der Geist der Zeit: Es muss ja auch das neueste 4-Kern-Prozessor-, 8GB-RAM-, 1,5-TB-HDD-, Ultra-WXGA-Doppelplus-Notebook sein, damit die kleine Sophia-Dörte Schmidt abends zwei Stunden mailen und chatten kann
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar


                • #9
                  Und das "Monster-Framework" läuft selbst auf meinem Pissels-Smartphone ohne Probleme
                  [FONT="Helvetica"]twitter.com/unset[/FONT]

                  Shitstorm Podcast – Wöchentliches Auskotzen

                  Kommentar


                  • #10
                    Und beim nächsten kleinen Problem kommt noch ein Framework und noch eins und noch eins.

                    Außerdem bin ich der Meinung, dass man mit JavaScript-Frameworks erst dann arbeiten sollte, wenn die Sprache auch richtig beherrscht.

                    Peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Kommentar


                    • #11
                      Zitat von Kropff Beitrag anzeigen
                      Da haben wir mal wieder ein schönes Beispiel dafür, dass man für eine Kleinigkeit sofort ein monstermäßiges JavaScript-Framework braucht. Aber jedem das Seine.

                      Peter
                      Jaaaa... das war dann nachdem ich die Tuts durchgemacht hab und mich mal an ein Framework rangetraut habe! Klar geht es auch OHNE Framework!

                      Kommentar


                      • #12
                        Zitat von JohnWorksCooper Beitrag anzeigen
                        Jaaaa... das war dann nachdem ich die Tuts durchgemacht hab
                        Und wozu dann ein Framework?
                        Zitat von JohnWorksCooper Beitrag anzeigen
                        Klar geht es auch OHNE Framework!
                        Und warum hast du es nicht gemacht?

                        Verstehst du? Es gibt in Punkto JavaScript noch etliche Probleme, die auf dich zukommen werden. Und die auch von Frameworks nicht immer abgefangen werden. Dann musst per Hand eingreifen. Und wenn du dann JavaScript nicht entsprechend beherrschst, ist wieder hängen im Schacht. Ein Bekannter hat das mit jQuery schon erlebt.

                        Peter
                        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                        Meine Seite

                        Kommentar

                        Lädt...
                        X