• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Javascript echtzeit formularfeld auslesen

Fabiii321

Mitglied
Hallo zusammen,

ich habe eine Kurze Frage.

HTML:
    <tr>
      <td>AZ zuletzt Nr.:</td>
      <td><label for="az_nr"></label>
      <input type="text" name="az_nr" id="az_nr" tabindex="13" size="3" placeholder="000"/></td>
      <td>AZ zuletzt Jahr:</td>
      <td><label for="az_jahr"></label>
      <input type="text" name="az_jahr" id="az_jahr" tabindex="14" size="5" placeholder="2014"/></td>
      <td>Vorschau:</td>
      <td>&nbsp;</td>
    </tr>

ICh will in Echtzeit, wenn etwas in das Textfeld az_nr etwas eingegebn wird, dass dann in der Zeile Vorschau der Inhalt von dem Formularfeld az_nr.

Die soll nicht erst passieren, wenn ich auf einen Button drücke, sondern in Echtzeit.

Find im I-net nichts passendes....
Vielen Dank
Gruß
Fabi
 
Wie @Tronjer schon schrieb mit Angular oder halt mit jQuery z. B. so:
Code:
(function($, window, document) {
    $(function() {
        var txt_input    = $('#txt-input');
        var td_vorschau  = $('#vorschau');

        txt_input.on({
            "keyup": function() {
                td_vorschau.text($(this).val());
            } 
        });
    });
}(window.jQuery, window, document));

Mit Angular ist es eigentlich cooler in dem Fall, da musst du eigentlich gar nichts weiter tun ^^.
 
Hallo,
vielen Dank für eure Antworten.

Wie muss ich Angular noch installieren.
Was brauche ich da noch.
HTML:
<input type="text" name="az_nr" id="az_nr" tabindex="13" size="3" placeholder="000" ng-model="test"/></td>
      <td>AZ zuletzt Jahr:</td>
      <td><label for="az_jahr"></label>
      <input type="text" name="az_jahr" id="az_jahr" tabindex="14" size="5" placeholder="2014"/></td>
      <td>Vorschau: <p>Vorschau: {{test}} - </p></td>
Geht momentan noch nicht.

Gruß
Fabi
 
Dafür brauchst du Angular selbst noch als Datei oder als Verweis im <head> deiner Datei:
Code:
<script src="bower_components/angular/angular.js"></script>

Also nach src eben deine angular.js -Datei die bekommst du hier:
https://angularjs.org/

Mit jQuery dasselbe nur dann noch eine extra Datei mit dem Code (deinem eigenen dann).

Edit: <p> macht man nicht in <td>, es sei denn du hast mehrere Absätze in einer Zelle aber selbst dann eher nicht^^.
 
Zuletzt bearbeitet:
Hallo zusammen,
vielen Dank für eure Bemühungen.

Es geht leider immer noch nicht.
Ich weiß nicht was ich falsch mache.

Habe jetzt die Javascript-Datei auf den Server.
Diese hier:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js

Habe sie auch eingebunden.
HTML:
  <head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="angular.js"></script>
  </head>

HTML:
  <td>AZ zuletzt Nr.:</td>
      <td><label for="az_nr"></label>
      <input type="text" name="az_nr" id="az_nr" tabindex="13" size="3" placeholder="000" ng-model="test"/></td>
      <td>AZ zuletzt Jahr:</td>
      <td><label for="az_jahr"></label>
      <input type="text" name="az_jahr" id="az_jahr" tabindex="14" size="5" placeholder="2014"/></td>
      <td>{{test}}</td>



Vielen Dank für eure BEmühungen
Gruß
Fabi
 
Was daran liegt, dass du Dinge copy & pastest, ohne zu nachzudenken. Was machen ng-model und ng-app eigentlich?
 
Zurück
Oben