Stephan: Javascript & Formular & Array

SELF-Forum

Javascript & Formular & Array

Stephan
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte gerne Textfelder in einen Formular mit einen Array ausstatten da ich das Formular per PHP erstelle. Die Anzahl der Textfelder ist dynamisch. Ein Javascript soll das erste und das zweite Textfeld in einer Zeile zusammen Rechnen und im letzten Textfeld in der Zeile ausgeben. Wenn ich das ohne [], und alle anders bennen, klappt das auch.

Wie könnte ich das Lösen, mit einen Array. Das Array wird später mit PHP ausgelesen und die Wert in eine Datenbank geschrieben.

Gruß
Stephan

<html>
<script language="JavaScript" type="text/JavaScript" >
function numerisch(feld)
{
 if(feld.value == "")
  return

// Feld analysieren
 var test = parseFloat(feld.value)

// OK? Dann zurueck!
 if(!isNaN(test))
 {
  // Ergebnis darstellen
  feld.value = test

return
 }

// Fehlermeldung
 alert("Bitte nur numerische Angaben!")

// Eingabe selektieren und Eingabefokus setzen
 feld.select()
 feld.focus()
}

function rechne(feld, eingabe1, eingabe2, ausgabe)
{
   with(feld.form)
   {
      var wert1 = parseFloat(eingabe1.value)
      var wert2 = parseFloat(eingabe2.value)

// Werte in Feld1 und Feld2 numerisch?
      if(isNaN(wert1) || isNaN(wert2))
         return

// Ergebnis berechnen, wenn beide Felder gefuellt sind
      ausgabe.value = (eingabe1.value == "" ||
                         eingabe2.value == "") ?
                        "" :
                        wert1 * wert2
   }
}
</script>
<body>
<form>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input type="text" name="meinFeld[1][1]"
       onChange="numerisch(this); rechne(this,meinFeld[1][1],meinFeld[1][2],meinFeld[1][3])"></td>
    <td><input type="text" name="meinFeld[1][2]"
       onChange="numerisch(this); rechne(this,meinFeld[1][1],meinFeld[1][2],meinFeld[1][3])"></td>
    <td><input type="text" name="meinFeld[1][3]" readonly></td>
  </tr>
  <tr>
     <td><input type="text" name="meinFeld[2][1]"
       onChange="numerisch(this); rechne(this,meinFeld[2][1],meinFeld[2][2],meinFeld[2][3])"></td>
    <td><input type="text" name="meinFeld[2][2]"
       onChange="numerisch(this); rechne(this,meinFeld[2][1],meinFeld[2][2],meinFeld[2][3])"></td>
    <td><input type="text" name="meinFeld[2][3]" readonly></td>
  </tr>
</table>
</form>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Javascript & Formular & Array

    Skeeve
    – Informationen zu den Bewertungsregeln

    Moin!

    Keine Ahnung, ob es Dir was nutzt, aber man könnte das zum Beispiel so lösen, daß man den Eingabefeldern denselben Namen gibt. Sie lassen sich dann per getElementByName auffinden. Wenn der Name dann noch eine Zahl enthält und das Ergebnisfeld dieselbe Zahl bekommt, kann man das so implementieren:

      
<html>  
<head>  
<script language="JavaScript" type="text/JavaScript" >  


      
function numerisch(feld)  
{  
 if(feld.value == "")  
  return  
  
 // Feld analysieren  
 var test = parseFloat(feld.value)  
  
 // OK? Dann zurueck!  
 if(!isNaN(test))  
 {  
  // Ergebnis darstellen  
  feld.value = test  
  
  return  
 }  
  
 // Fehlermeldung  
 alert("Bitte nur numerische Angaben!")  
  
 // Eingabe selektieren und Eingabefokus setzen  
 feld.select()  
 feld.focus()  
}  
  
function rechne(feld)  
{  
 var felder= document.getElementsByName( feld.name );  
 var produkt= 1;  
 for (var i=felder.length; i--; ) {  
  produkt*= felder[i].value;  
 }  
  
 var ergebnisName= feld.name.replace( /^\D+/, 'ergebnis' );  
 var ergebnis= document.getElementsByName( ergebnisName ).item(0);  
 ergebnis.value= produkt;  
}  


      
</script>  
</head>  
<body>  
<form>  
<table border="0" cellspacing="0" cellpadding="0">  
  <tr>  
    <td><input type="text" name="zeile1"  
       onChange="numerisch(this); rechne(this)" /></td>  
    <td><input type="text" name="zeile1"  
       onChange="numerisch(this); rechne(this)" /></td>  
    <td><input type="text" disabled="disabled" name="ergebnis1" /></td>  
  </tr>  
  <tr>  
    <td><input type="text" name="zeile2"  
       onChange="numerisch(this); rechne(this)" /></td>  
    <td><input type="text" name="zeile2"  
       onChange="numerisch(this); rechne(this)" /></td>  
    <td><input type="text" disabled="disabled" name="ergebnis2"/></td>  
  </tr>  
</table>  
</form>  
</body>  
</html>

    Man könnte natürlich auch vom übergebenen Feld die Parent Row ermitteln, d.h. so lange im DOM Tree hoch gehen, bis man di ROW hat und dann, ausgehend davon die Eingabefelder suchen. Dann wären die Namen vollkommen egal.
    -- Skeeve

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Javascript & Formular & Array

      Struppi Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Keine Ahnung, ob es Dir was nutzt, aber man könnte das zum Beispiel so lösen, daß man den Eingabefeldern denselben Namen gibt. Sie lassen sich dann per getElementByName auffinden. Wenn der Name dann noch eine Zahl enthält und das Ergebnisfeld dieselbe Zahl bekommt, kann man das so implementieren:

      Würd ich auch so machen.

      Bis auf:

      var felder= document.getElementsByName( feld.name );

      statdessen,
      var felder= feld.form.elements[feld.name];

      var ergebnisName= feld.name.replace( /^\D+/, 'ergebnis' );
      var ergebnis= document.getElementsByName( ergebnisName ).item(0);

      var ergebnis= feld.form.elements[ergebnisName];

      Das ist abwärtskompatibel, da die forms und elements Collection in allen JS fähigen Browsern funktionieren.

      Struppi.

      --
      Javascript ist toll (Perl auch!)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Javascript & Formular & Array

        Skeeve
        – Informationen zu den Bewertungsregeln

        Moin!

        Würd ich auch so machen.

        Bis auf:

        var felder= document.getElementsByName( feld.name );

        statdessen,
        var felder= feld.form.elements[feld.name];

        DAS hatte ich gesucht! Ich kam einfach nicht drauf und feld.form.getElementsByName ist auch keine zulässige Methode.

        Dankeschön!

        -- Skeeve

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Javascript & Formular & Array

      Stephan
      – Informationen zu den Bewertungsregeln

      Moin zusammen !

      Erstmal vielen Dank für die Antwort, werde ich gleich mal ausprobieren. Wenn ich das ganze dann mit einer PHP Seite auslesen möchte, z.B. mit GET oder POST, wie kann ich ermitteln welche und wieviele Elemente übergeben wurden damit sich sie später in eine Array übergeben kann. Bei meinen Bsp. habe ich das so gelöst.

      <?php
      $c = $HTTP_GET_VARS['textfield'];

      echo $c[1][1]; echo "|"; echo $c[1][2]; echo $c[1][3]; echo"\n";
      echo $c[2][1]; echo "|"; echo $c[2][2]; echo $c[2][3]

      ?>

      Gruß
      Stephan

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Javascript & Formular & Array

        Struppi Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Erstmal vielen Dank für die Antwort, werde ich gleich mal ausprobieren. Wenn ich das ganze dann mit einer PHP Seite auslesen möchte, z.B. mit GET oder POST, wie kann ich ermitteln welche und wieviele Elemente übergeben wurden damit sich sie später in eine Array übergeben kann. Bei meinen Bsp. habe ich das so gelöst.

        Ich kann kein PHP, vielleicht wechselst du den Themenbereich?

        <xxxx> (wie finde ich in der Hilfe den Link darauf, wie man ein Thema wechselt? Ich hab's nicht gefunden)

        Ich hab's mal gemacht.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Javascript & Formular & Array

          Struppi Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Ingrid

          <xxxx> (wie finde ich in der Hilfe den Link darauf, wie man ein Thema wechselt? Ich hab's nicht gefunden)

          versteckt in einer anderen Antwort:
          http://forum.de.selfhtml.org/hilfe/bedienung.htm#auf-postings-antworten

          Struppi.

          --
          Javascript ist toll (Perl auch!)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Indexoperator im Formularfeldnamen

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    ich möchte gerne Textfelder in einen Formular mit einen Array ausstatten da ich das Formular per PHP erstelle. Die Anzahl der Textfelder ist dynamisch. Ein Javascript soll das erste und das zweite Textfeld in einer Zeile zusammen Rechnen und im letzten Textfeld in der Zeile ausgeben. Wenn ich das ohne [], und alle anders bennen, klappt das auch.

    Das ist etwas falsch formuliert du möchtest gerne reservierte Zeichen im Namen von Formularfelder verwenden, dass ist eine Frage die jeden Monat x-mal hier gestellt wird.

    Das Problem dass du hast, ist das du den Index von PHP da noch einbaust, das macht die Sache extrem unhandlich um diese Namen JS zu benutzen.

    <html>
    <script language="JavaScript" type="text/JavaScript" >

    Da fehlt das head Tag und der Doctype, das language Attribut ist unerwünscht.

    <table border="0" cellspacing="0" cellpadding="0">

    Nur als Tipp, für dein Problem ist die Tabelle unwichtig und macht den Code für die die dir helfen sollen unleserlicher.

    <input type="text" name="meinFeld[1][1]"
    onChange="numerisch(this); rechne(this,meinFeld[1][1],meinFeld[1][2],meinFeld[1][3])">

    Im Prinzip ist dein Problem sogar nur, dass du hier undefinierte Werte als Parameter übergibst (hast du mal in die JS Konsole von z.b. Firefox geschaut? meinFeld[x][y] gibt es nicht)

    Ich würde auf dieses Konstrukt verzichten, aber wenn du unbedingt musst:

    Entweder so:
    <input type="text" name="meinFeld[1][1]"
    onChange="numerisch(this); rechne(this,this.form['meinFeld[1][1]'],this.form['meinFeld[1][2]'],this.form['meinFeld[1][3]'])">

    oder du übergibst die Namen als String und baust deine Funktion entsprechend um:
    <input type="text" name="meinFeld[1][1]"
    onChange="numerisch(this); rechne(this,'meinFeld[1][1]','meinFeld[1][2]','meinFeld[1][3]')">

    function rechne(feld, eingabe1, eingabe2, ausgabe)
    {
    var eingabe_feld1 = feld.form[eingabe1];
    var eingabe_feld2 = feld.form[eingabe2];
    var ausgabe_feld = feld.form[ausgabe];
    }

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln