eddi-z: javascript value auslesen und setzen

Hallo,

in einem script habe ich folgende Funktion im Javascriptbereich. Der PHP Teil klappt. aber das Auslesen des Value der InputBox haut nicht hin. Es passiert einfach gar nichts. Da in einer anderen Funktion der Zugriff auf document.forms['zahlung'] klappt, muss der Fehler danach liegen.

	function zubuchen(a){
		var stckNeu = document.forms['zahlung'].aktMenge[a].value;
		alert(stckNeu);
	}
<input type='text' name='aktMenge[<? echo $za[REC_ID] ?>]' value = '<? echo number_format ($za[MENGE_AKT],2) ?>' class = 'eingabe' size='10'>
						&nbsp; <input type= 'button' value= ' + ' onClick ="zubuchen(<? echo $za[REC_ID] ?>)">
  1. Es passiert einfach gar nichts.

    sed -e "s/onClick/onclick/g";
    

    Wenn das nicht hilft zeige den resultierenden, im Browser ankommenden Quelltext. Und verrate uns ob und was in der JS-Console steht.

    1. @@ursus contionabundo

      sed -e "s/onClick/onclick/g";
      

      Wenn das nicht hilft

      Wird es nicht. HTML ist generell case-insensitiv.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. @@ursus contionabundo

        sed -e "s/onClick/onclick/g";
        

        Wenn das nicht hilft

        Wird es nicht. HTML ist generell case-insensitiv.

        Ach. Tatsächlich? Was im Hinblick auf "passiert einfach gar nichts" auch noch in Frage kommt: eine Inline-Script verbietende Content-Security-Police. Das sieht ja immerhin wie ein Webshop aus...

        1. Hallo ursus,

          ach Leute, es ist doch viel einfacher. Siehe unten.

          Rolf

          --
          sumpsi - posui - clusi
          1. ach Leute, es ist doch viel einfacher. Siehe unten.

            Deshalb hatte ich Deine mutmaßliche Lösung unter „auch“ auch verlinkt und das Wort "noch" hinzugefügt.

            1. Hallo ursus,

              hmpf. Das war für mich zu winzig 😏

              Rolf

              --
              sumpsi - posui - clusi
  2. Tach!

    aber das Auslesen des Value der InputBox haut nicht hin. Es passiert einfach gar nichts.

    Beschreibe bitte das "passiert gar nichts" etwas genauer. Wird die Funktion nicht aufgerufen? Oder arbeitet lediglich etwas in ihr nicht richtig? Sind sonst irgendwelche Auffälligkeiten in der Console der Developer Tools im Browser zu sehen? Hat der Browser trotz der überflüssigen Leerzeichen in der Notation der Attribute das gewünschte DOM erzeugt?

    dedlfix.

  3. Hallo eddi-z,

    ich tue mal so als würde $za[REC_ID] den Wert 3 enthalten, und die Menge ist 47.

    Guck in die Konsole der Browser-Entwicklerwerkzeuge. Da wird etwas stehen wie:

    Uncaught TypeError: Cannot read property '3' of undefined
    

    Warum? JavaScript ist nicht PHP. Ich löse mal deine echos auf. Dann hast Du dieses HTML:

    <input type='text' name='aktMenge[3]' value = '47' class = 'eingabe' size='10'>
    

    Die Gleichheitszeichen solltest Du nicht mit Spaces einrahmen. Das ist zwar nicht falsch, aber es ist sehr unüblich und es verbessert auch nicht die Lesbarkeit.

    Wenn dieses input in einem Form ist und das Form mit POST an ein PHP Script gesendet wird, dann interpretiert PHP die eckigen Klammern im Namen und erzeugt unter $_POST['aktMenge'] ein Array, in dem es dieses Feld unter Index 3 einträgt.

    Das ist aber eine PHP Eigenschaft, und es heißt nicht, dass dieses Array auch für JavaScript, im DOM, existierte. Dein Form hat ein Input-Element mit Name 'aktMenge[3]', und nur unter diesem Namen kannst Du darauf zugreifen. Da der Name des Form-Elements kein gültiger Eigenschaftsname von JavaScript ist, ist der Gebrauch der Punkt-Schreibweise nicht möglich, du musst die [] Schreibweise wählen, so wie Du es für das Form gemacht hast. Ironischerweise ist es beim Form nicht nötig, da würde auch document.forms.zahlung funktionieren. Es ist aber sicherlich ganz gut, wenn Du die Zugriffstechnik konsequent gleich hältst.

    Mein Vorschlag:

       function zubuchen(a) {
        var inputName = 'aktMenge['+a+']';
    		var stckNeu = document.forms['zahlung'][inputName].value;
    		console.log("Zubuchung aus " + inputName + ": " + stckNeu);
    	}
    

    console.log statt alert, Log-Ausgaben siehst Du im Konsolenfenster der Entwicklerwerkzeuge, die Du beim Bauen von JavaScript ohnehin ständig öffen haben solltest.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Ingrid,

      zu ergänzen wäre noch, dass Du nicht gezwungen bist, das input-Feld im Form herauszusuchen. Wenn Button und Input immer beisammen liegen, und gemeinsam in einem Container stehen der kein weiteres input-Element enthält, kann man auch das Event-Objekt verwenden, das bei einem Klick entsteht. Mal angenommen, die beiden stehen in einer table cell:

      <td>
      <input type='text' name='aktMenge[3]' value='47,11'>
      <button type='button' name='zubuchen[3]' onclick='zubuchen(event)'> + </button>
      </td>
      

      Entweder so (und in den Klammern MUSS das Wort event stehen!) oder du registrierst das Element über addEventListener - was aber mutmaßlich erstmal eine Lernhürde für Dich ist.

      Du kannst dann deine zubuchen-Funktion so schreiben:

      function zubuchen(event) {
         if (event.target.tagName != "BUTTON") return;   /* Nur Klicks auf BUTTON verarbeiten */
         var input = event.target.parentElement.querySelector("input");
         /* input verweist jetzt auf das input-Element */
      }
      

      d.h. du navigierst über das DOM eine Ebene nach oben (parentElement, also das td Element) und suchst Dir dann das passende input-Element heraus. Deswegen mein Vorschlag, dass nur das input und der button in diesem Container stehen, damit die Suche nach dem Input leichter fällt.

      Sowas geht auch mit addEventListener. Du würdest nur auf dem form einen click-Handler registrieren. Jegliche click-Events im Form blubbern im DOM nach oben und gelangen zum Form (sofern Du das nicht explizit verhindest). Dort kannst Du dann abfragen, ob es ein Zubuchen-Button ist (z.B.: ist der tagName=="BUTTON" und beginnt das name-Attribut mit "zubuchen"), und mittels event.target hat Du sofort den Button, der das Event ausgelöst hat.

      Rolf

      --
      sumpsi - posui - clusi
    2. Sorry, dass ich mich jetzt erst melde.

      Klasse, vielen Dank für deine ausführliche Aufklärung. Solche wie Dich gibts leider immer weniger in vielen Foren. Mach weiter so! :)

      Gruß