Okamžité zobrazenie vkladaných znakov do formulára – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahojte,

som málo skúsený a neviem si rady s tým, ako by som zobrazoval na stránke údaj znak po znaku, hneď, ako je vkladaný do html formulára. Teda ak chcem vložiť napr. hodnotu 123, po napísaní prvého znaku 1 sa mi tento znak zobrazí aj pod formulárom, bez stláčania nejakého submitu. Zároveň by som potreboval dostať vloženú hodnotu do php premennej.

Možno som to dobre nevysvetlil: mám pevnú sumu 10 Eur, do formuláru zadávam dobrovoľný prípevok a chcem, aby sa mi po vložení prvého znaku 1 zobrazil text "10 + 1 spolu 11", po vložení posledného znaku "10 + 123 spolu 133" 

<form>
Dobrovoľný príspevok [1-999]: <input type="text" placeholder="EUR" autocomplete="off" onkeypress="return onlyNumbers(event)" style="text-align:center; background-color:#ffffff; font-family: Verdana;font-weight: bold;font-size:14;" name="prispevok" maxlength="3" size="3">
</form>

.

Predpokladám, že tu bude treba použiť AJAX, ale od obeda týram strýca Google, nepomohol...

Poradí mi niekto, prosím?

V těch onXXX atributech můžeš zadat JavaScriptový kód, který se při dané události má provést. Podobně jako už teď máš onkeypress. AJAX je pak v JavaScriptu načtení dat ze serveru.

<script>
function zpracujPrispevek(input, idVysledek) {
    var hodnota = input.value;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (this.readyState == 4) {
            document.getElementById(idVysledek).innerText = this.responseText;
        }
    }
    request.open("GET", "prispevek.php?hodnota=" + encodeURIComponent(hodnota));
    request.send();
}
</script>
<input oninput="zpracujPrispevek(this, 'vysledek')">
<div id="vysledek">---</div>

prispevek.php:

<?php
if (isset($_REQUEST['hodnota'])) {
    echo 'Zpracoval jsem prispevek: ' . $_REQUEST['hodnota'];
}
?>

Připojen obrázek.

Wow,

paráda, chodí to na 100%, ĎAKUJEM!!!

Akorát mám pocit, že ten AJAX nepotřebuješ. 

var hodnota = input.value;
document.getElementById('vysledek').innerText = '10 + ' + hodnota + ' = ' + (10 + hodnota);