inviare input dinamici senza ricaricare la pagina

[nicopres]

Buongiorno a tutti, sto creando un'applicazione web per gestire un magazzino, ora mi sono fermato ad un punto cruciale.
la pagina con cui creo l'ordine del cliente è così:
articolo1 (quantità in giacenza 20) _____
articolo2 (quantità in giacenza 20) _____
e così via, dove c'è _____ è l'input in cui inserisco le quantità di articoli da ordinare.
Io vorrei che inserendo la quantità in ______ automaticamente mi facesse vedere la differenza tra la quantità in giacenza e ciò che ho inserito senza ricaricare la pagina.
Grazie per la collaborazione.
(non voglio il codice pronto, ma solo alcuni input perchè io mi sono letteralmente arenato)

 

[criric]

Cia, una bozza buttata giù al volo

<script>
    function cambiaDisponibilita(val, id) {
        var element = document.getElementById("disp" + id);
        var disp = parseInt(element.innerHTML);
        var new_disp = disp - val;
        element.innerHTML = new_disp;
    }
</script>
<table>
    <thead>
        <tr>
            <th>articolo</th>
            <th>qta</th>
            <th>disponibilita</th>
        </tr>    
    </thead>
    <tr>
        <td>Articolo 1</td>
        <td><input onkeyup="cambiaDisponibilita(this.value,1)" value="0" type="text" name="qta1" size="2"/></td>
        <td id="disp1">20</td>
    </tr>
    <tr>
        <td>Articolo 2</td>
        <td><input onkeyup="cambiaDisponibilita(this.value,2)" value="0" type="text" name="qta2" size="2"/></td>
        <td id="disp2">20</td>
    </tr>
</table>

non ci sono contolli e non ho testato
edit
pensandoci un attimo, qualcuno potrebbe consumare i resti di magazzino mentre tu stai compilando il form;
ci vorrebbe una chiamata al database con ajax per recuperare ogni volta la disponibilità del magazzino

 

[nicopres]

Perfetto grazie.. ho notato una cosa, se sono all'interno dell'input e clicco le frecce direzionali mi cambia la quantità in "disp", come mai?

 

[criric]

Perchè ogni volta che premi un tasto (onkeyup) va a leggere il valore nella td disponibilità e gli sottrae il valore dell'input
un'altra bozza, questa volta con ajax

<script>
    var xmlHttp = getXmlHttpObject();
    function get_ajax(path,element,params) {
        xmlHttp.open('GET', path +'?' + params, true);
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById(element).innerHTML = xmlHttp.responseText;
            }
        }
        xmlHttp.send(null);
    }
    function getXmlHttpObject() {
        var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : null;
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }	
        return xmlHttp;
    } 
</script>
<table>
    <thead>
        <tr>
            <th>articolo</th>
            <th>qta</th>
            <th>disponibilita</th>
        </tr>    
    </thead>
    <tr>
        <td>Articolo 1</td>
        <td><input onkeyup="get_ajax('magazzino.php','disp1','id=1&qta=' + this.value)" value="0" type="text" name="qta1" size="2"/></td>
        <td id="disp1">20</td>
    </tr>
    <tr>
        <td>Articolo 2</td>
        <td><input onkeyup="get_ajax('magazzino.php','disp2','id=2&qta=' + this.value)" value="0" type="text" name="qta2" size="2"/></td>
        <td id="disp2">20</td>
    </tr>
</table>

in magazzino.php puoi fare le query sul database per ottenere la disponibilità aggiornata, poi semplicemente stampi la differenza

<?php

$id = (int) $_REQUEST['id'];
$qta = (int) $_REQUEST['qta'];

// SELECT disp FROM magazzino WHERE idprodotto = $id

$disp = 20;

echo $disp - $qta;
?>

 

[nicopres]

Perfetto, grazie mille! l'ho provato velocemente e funziona perfettamente, ancora mille grazie