jodaone: Javascript Auslesen von Select mit Array

Hi
Ich bin total neu im Javabereich, und möchte mir auf meiner Seite eine kleine Bewertung von Leuten erstellen. Hierfür habe ich ein Array mit den Personen-Namen, und daraus erstelle ich eine Select-Option pro Person, mit verschiedenen Punkten.
Wie kann ich aber am Ende, wenn der Benutzer auf "Senden" drückt auslesen, welche Punkte-Auswahl er jeder Person erteilt hat. Ich brings einfach nicht hin, dass ich die Option-Werte lesen kann. Ev. kann mir jemand behilflich sein, wo ich den Fehler mache. Ich erhalte immer die Meldung "Object unterstützt diese Methode oder Eigenschaft nicht.
Wie kann ich das Form-Element "Playerauswahl" so identifizieren, damit es bei jedem Durchlauf eine Eindeutige Kennung bekommt, welche ich später eben auslesen kann. Irgenwie finde ich diesen Weg einfach nicht. Danke für Eure Unterstützung.

<table width="50%">
<form name="voting">
<script language="JavaScript">
var spieler = Array("Alfred Meier", "Beno Black", "Rufus Weiss");
for (var i=0;i<spieler.length;i++){
document.write("<tr>");
document.write("<td colspan='2' width='50%'>" + spieler[i] + "</td>");
document.write("<td colspan='2' width='50%'>");
document.write("<select name='Playerauswahl' id='Playerauswahl'>");
document.write("<option value='0' selected>Keine Best-Player Wertung heute")
document.write("<option value='15'>15 Punkte")
document.write("<option value='12'>12 Punkte")
document.write("<option value='10'>10 Punkte")
document.write("<option value='8'>8  Punkte")
document.write("<option value='6'>6  Punkte")
document.write("<option value='4'>4  Punkte")
document.write("<option value='3'>3  Punkte")
document.write("<option value='2'>2  Punkte")
document.write("<option value='1'>1  Punkte")
document.write("</select></td></tr>");
}
</script>
</table>
<input type=button Value="Senden" onClick="senden();">
</form>

<script language="JavaScript">
function senden() {
var playervalue = voting.Playerauswahl.text;
document.write(" Auswahl : " + playervalue) + "<br>";
}
</script>

  1. Hallo,

    Ich bin total neu im Javabereich,

    im JavaSCRIPT-Bereich. JavaScript hat mit Java so gut wie nichts gemein (bis auf ein bisschen ähnliche Syntax, was aber eher auf die gemeinsamen Vorfaheren beider Sprachen wie C++ zurückzuführen ist). Der Name "JavaScript" war ein Marketing-Gag von Netscape, um die Technologie nach vorne zu bringen.

    Das was Du willst, müsste über das Attribut "value" gehen - allerdings "document.write" geht nicht, weil das immer nur beim Seitenaufbau funktioniert (und wenn der Benutzer auf "absenden" klickt, ist die Seite ja für gewöhnlich schon komplett aufgebaut) - ich habe das daher in dem Beispiel mal durch ein Alert ersetzt:

      
    function senden() {  
    var playervalue = voting.Playerauswahl.value;  
    alert(" Auswahl : " + playervalue);  
    }  
    
    

    Alternativ kannst Du ggf. auch über die Eigenschaft "selectedIndex" drankommen:

      
    function senden() {  
    var playervalue = voting.Playerauswahl.options[voting.Playerauswahl.selectedIndex].value;  
    alert(" Auswahl : " + playervalue);  
    }  
    
    

    (ohne Gewähr)

    Hope that helps.

    Viele Grüße,
    Jörg

  2. Hallo,

    <table width="50%">
    <form name="voting">

    Du kannst kein form in ein table schachtelt, das form muss um das table herum (am Ende machst du das auch).

    <script language="JavaScript">

    Das sollte besser <script type="text/javascript"> lauten.

    for (var i=0;i<spieler.length;i++){

    ...

    document.write("<select name='Playerauswahl' id='Playerauswahl'>");

    Du erzeugst hier mehrere select-Element mit derselben ID. das geht natürlich nicht. Eigentlich brauchst du diese ID auch nicht.

    var playervalue = voting.Playerauswahl.text;

    Der Zugriff auf das Formular sollte standardgemäß mit document.forms.voting oder document.getElementById('voting') erfolgen. Deine Ansprechweise über eine global Eigenschaft (einfach voting) ist eine IE-Erfindung und wird von den Browsern nur noch geduldet.

    document.write(" Auswahl : " + playervalue) + "<br>";

    In Langschreibweise greifst du auf
    document.forms.voting.elements.Playerauswahl
    zu. Das gibt dir nicht direkt ein select-Element, sondern einen Array mit allen select-Elementen, die name="Playerauswahl" besitzen. Davon hast du ja drei. Diesen Array kannst du durchlaufen:

    var selects = document.forms.voting.Playerauswahl;  
    for (var i = 0, l = selects.length; i < l; i++) {  
       alert('Spieler: ' + spieler[i] + ', Wertung: ' + selects[i].value);  
    }
    

    selects[i] gibt dir also jeweils ein select-Element zurück. Den internen Wert des Feldes kannst du mit http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=value auslesen.

    Wenn du hingegen den angezeigten Text willst (also »15 Punkte« anstatt nur »15«), dann müsstest du über http://de.selfhtml.org/javascript/objekte/options.htm@title=options gehen.

    var selects = document.forms.voting.Playerauswahl;  
    for (var i = 0, l = selects.length; i < l; i++) {  
       var select = selects[i];  
       var selectWert = select.options[select.[ref:self812;javascript/objekte/options.htm#selected_index@title=selectedIndex]].[ref:self812;javascript/objekte/options.htm#text@title=text];  
       alert('Spieler: ' + spieler[i] + ', Wertung: ' + selectWert);  
    }
    

    Mathias

    1. Super Hilfe, mega. Jetzt hats geklappt, und es funkt so weit.
      Zwei kleine Probleme habe ich noch, welche ich nicht verstehe:

      for (var i=0;i<spieler.length;i++){
      document.write("<tr>");
      document.write("<td colspan='2' width='50%'>" + spieler[i] + "</td>");
      document.write("<td colspan='2' width='50%'>");
      document.write("<select name='Playerauswahl'");

      document.write("<option value='15'>15 Punkte</option>");

      document.write("<option value='0' selected>Keine Wertung</option>");
      document.write("<option value='15'>15 Punkte</option>");

      .....

      ich baue ja so den Select auf. Aus unerfindlichen Gründen, wird die Erste Option nicht genommen. Wird einfach nicht eingeblendet; hat jemand eine Idee, an was das liegen könnte. Alle anderen, ab dem 2.ten gehen tip top.

      Das zweite Probl. ist wesentlich kniffliger. Damit ich etwas mit diesen Daten anfangen kann, muss ich mir diese per Mail senden. Einen anderen Weg gibt es nicht. Hierfuer muss ich aber die Funktion vom WEB-Provider nutzen, welcher die Mail-Daten auch in einem Form zusammenstellt und dann postet, immer nur an die Mail-Adresse vom Webseiten-Besitzer(also mich). Das Mail-Form sieht etwa so aus:

      <form action="http://xxxx.xxxxx.xx/xxxx.xx/cgi-bin/mailer.pl" method=POST enctype="application/x-www-form-urlencoded">

      <input type=hidden name=action value=send_mail>
      <input type=hidden name=recepient>
      <input type=SUBMIT name=Submit value=Senden>
      <input type=TEXT name=email size=35>
      <textarea name=Nachricht rows=8 cols=60></textarea>

      Ich habe mir nun vorgestellt, dass ich meine Daten via dem textarea senden kann. Aber wie muss ich diesen Aufruf machen, damit das klappt.
      Sorry für diese vielleicht blöden Fragen. Danke vielmals.

      1. Hallo,

        document.write("<select name='Playerauswahl'");
        .....

        ich baue ja so den Select auf. Aus unerfindlichen Gründen, wird die Erste Option nicht genommen. Wird einfach nicht eingeblendet; hat jemand eine Idee, an was das liegen könnte. Alle anderen, ab dem 2.ten gehen tip top.

        Da fehlt das schließende ">"-Zeichen.

        Gruß, Dennis

        1. super, vielen Dank, habe das nicht gesehen, jetzt klappts.

      2. Das zweite Probl. ist wesentlich kniffliger. Damit ich etwas mit diesen Daten anfangen kann, muss ich mir diese per Mail senden. Einen anderen Weg gibt es nicht. Hierfuer muss ich aber die Funktion vom WEB-Provider nutzen, welcher die Mail-Daten auch in einem Form zusammenstellt und dann postet, immer nur an die Mail-Adresse vom Webseiten-Besitzer(also mich). Das Mail-Form sieht etwa so aus:

        Hast du mal versucht die Auswahlfelder innerhalb dieses Formulares zu platzieren?

        <form action="http://xxxx.xxxxx.xx/xxxx.xx/cgi-bin/mailer.pl" method=POST enctype="application/x-www-form-urlencoded">

        Struppi.

        1. Hast du mal versucht die Auswahlfelder innerhalb dieses Formulares zu platzieren?

          <form action="http://xxxx.xxxxx.xx/xxxx.xx/cgi-bin/mailer.pl" method=POST enctype="application/x-www-form-urlencoded">

          Struppi.

          Wenn ich das Form so aufbaue, und die Felder mit meinen Angaben abfülle. Wie kann ich das dann innerhalb vom JavaScript-Code abschicken, damit das Form so gepostet wird? Danke für Deine Hilfe.

          1. Wenn ich das Form so aufbaue, und die Felder mit meinen Angaben abfülle. Wie kann ich das dann innerhalb vom JavaScript-Code abschicken, damit das Form so gepostet wird? Danke für Deine Hilfe.

            Gar nicht. Weil ein Formmailer häufig einfach alle Felder im Text mitschickt. Deshalb schrieb ich ja, ob du es probiert hast, weil es auch sein kann, dass der Webmailer es nicht so macht.

            Struppi.

  3. <table width="50%">
    <form name="voting">

    Das geht nicht. Nach einem table darf kein form kommen.

    <script language="JavaScript">

    Das ist völlig veraltet, wo hast du dieses Attribut gefunden?
    Du solltest dich auch mit HTML beschäftigen, da sind noch massive Lücken vorhanden.

    <script language="JavaScript">
    function senden() {
    var playervalue = voting.Playerauswahl.text;
    document.write(" Auswahl : " + playervalue) + "<br>";
    }
    </script>

    Das geht nicht, weil du mehrere Felder mit den gleichen Namen hast (die id ist hier unrelevant). Du kanst auf sie zugreifen, wie ein Array.

    function senden() {  
    var playervalue = document.voting.Playerauswahl[0].text;  
    document.write(" Auswahl : " + playervalue) + "<br>";  
    }
    

    Du kannst auch die Anzahl der Felder ermitteln:

    function senden() {  
    alert(document.voting.Playerauswahl.length);  
    var playervalue = document.voting.Playerauswahl[0].text;  
    document.write(" Auswahl : " + playervalue) + "<br>";  
    }
    

    Allerdings solltest du dir bewußt sein, dass nach dem das Dokument geladen wurde, du mit document.write das komplette Dokuemnt überschreibst.

    Struppi.

  4. Super Hilfe, mega. Jetzt hats geklappt, und es funkt so weit.
    Zwei kleine Probleme habe ich noch, welche ich nicht verstehe:

    for (var i=0;i<spieler.length;i++){
    document.write("<tr>");
    document.write("<td colspan='2' width='50%'>" + spieler[i] + "</td>");
    document.write("<td colspan='2' width='50%'>");
    document.write("<select name='Playerauswahl'");

    document.write("<option value='15'>15 Punkte</option>");

    document.write("<option value='0' selected>Keine Wertung</option>");
    document.write("<option value='15'>15 Punkte</option>");

    .....

    ich baue ja so den Select auf. Aus unerfindlichen Gründen, wird die Erste Option nicht genommen. Wird einfach nicht eingeblendet; hat jemand eine Idee, an was das liegen könnte. Alle anderen, ab dem 2.ten gehen tip top.

    Das zweite Probl. ist wesentlich kniffliger. Damit ich etwas mit diesen Daten anfangen kann, muss ich mir diese per Mail senden. Einen anderen Weg gibt es nicht. Hierfuer muss ich aber die Funktion vom WEB-Provider nutzen, welcher die Mail-Daten auch in einem Form zusammenstellt und dann postet, immer nur an die Mail-Adresse vom Webseiten-Besitzer(also mich). Das Mail-Form sieht etwa so aus:

    <form action="http://xxxx.xxxxx.xx/xxxx.xx/cgi-bin/mailer.pl" method=POST enctype="application/x-www-form-urlencoded">

    <input type=hidden name=action value=send_mail>
    <input type=hidden name=recepient>
    <input type=SUBMIT name=Submit value=Senden>
    <input type=TEXT name=email size=35>
    <textarea name=Nachricht rows=8 cols=60></textarea>

    Ich habe mir nun vorgestellt, dass ich meine Daten via dem textarea senden kann. Aber wie muss ich diesen Aufruf machen, damit das klappt.
    Sorry für diese vielleicht blöden Fragen. Danke vielmals.

    1. ich baue ja so den Select auf. Aus unerfindlichen Gründen, wird die Erste Option nicht genommen. Wird einfach nicht eingeblendet; hat jemand eine Idee, an was das liegen könnte. Alle anderen, ab dem 2.ten gehen tip top.

      Weil im document.write eine schliessende Klammer fehlt, also das hier: >

      Struppi.