Input dinamici

**furion89** · 23-10-2013, 14:36

Salve a tutti, io avrei bisogno di aiuto con uno script premesso che di javascript non ne so molto.
Lo script dovrebbe essere strutturato nel modo seguente:

a)Ho dei punti massimi per esempio 5,
b)Ho 5 input di tipo number i cui valori vanno da 0 a 5,
c)Ho un tasto per l'invio dei dati che saranno salvati su db.

Ora il mio problema è fare in modo che l'utente non possa impostare altri numeri negli input una volta raggiunto il numero massimo e quindi scalare dal massimo di volta in volta il valore impostato negli input, cioè se io ho 3 punti sull'input A e due sull'input B ho quindi esaurito i punti massimi e gli altri input C D E dovrebbero essere disabilitati o cose simili.
Ho provato disabilitando gli input con l'attributo disabled = true ma così facendo il valore degli input non viene preso

Spero di essermi spiegato e un grazie di cuore a chi saprà aiutarmi

**groucho baffone** · 23-10-2013, 18:57

col codice html e quello js è più facile aiutarti

**furion89** · 23-10-2013, 19:59

codice:

<body onload="sum()">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p id="demo2">Punti </p>
n1 <input type = "number" id = "n1"  min="0" max="5" value="0" onchange="sum()"/>
n2 <input type = "number" id = "n2"  min="0" max="5" value="0" onchange="sum()" />
n3 <input type = "number" id = "n3" min="0" max="5" value="0" onchange="sum()" />
n4 <input type = "number" id = "n4"  min="0" max="5" value="0" onchange="sum()" />
n5 <input type = "number" id = "n5"  min="0" max="5" value="0" onchange="sum()" />
<br>
<input type="submit" id="form" value="Allenati" disabled="disabled">
</form>


<script type="text/javascript">
function sum() 
{ 
    var tot, num1, num2, num3, num4, num5, dif, result; 
    tot = 5;
    num1 = parseInt(document.getElementById("n1").value, 10);
    num2 = parseInt(document.getElementById("n2").value, 10);
    num3 = parseInt(document.getElementById("n3").value, 10);
    num4 = parseInt(document.getElementById("n4").value, 10);
    num5 = parseInt(document.getElementById("n5").value, 10);
    dif = (num1+num2+num3+num4+num5);
    result =  (tot - dif);
    
    document.getElementById("demo2").innerHTML = result;
    
    if(result == 0)
    {
    document.getElementById("form").disabled = false;
    }
}
</script>


</body>

è un codice molto spartano ma a me basta che sia funzionale ^^

**furion89** · 24-10-2013, 21:17

Ho risolto...posto il codice in caso servisse a qualcuno:

html5 (con l'input type="number")

codice:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var limite = 5;
        var somma;
        var val;
        $(".number").change(function(){
            val = parseInt($(this).val());
            somma = 0;
            $(".number").each(function(){
                somma += parseInt($(this).val());
            });
            var resto = limite - somma > 0 ? limite - somma : 0;
            $("#limite").html(resto);
            if(somma > limite){
                var diff = somma - limite;
                $(this).val(val - diff);
            }
        })
    });
</script>
Limite : <span id="limite">5</span><br/>
a <input type="number" size="2" name="a" min="0" max="5" value="0" class="number"/><br/>
b <input type="number" size="2" name="b" min="0" max="5" value="0" class="number"/><br/>
c <input type="number" size="2" name="c" min="0" max="5" value="0" class="number"/><br/>
d <input type="number" size="2" name="d" min="0" max="5" value="0" class="number"/><br/>
e <input type="number" size="2" name="e" min="0" max="5" value="0" class="number"/><br/>

html vecchio (con l'input type="text")

codice:

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function char_consentiti(campo) {
                var re = new RegExp("^[0-9]+$", "");
                var valore = campo.value;  
                for ( var i = 0; i < valore.length; i++ ) {
                    if (!valore.charAt(i).match(re)) {
                        campo.value = valore.substring(0, i);
                        return;
                    }   
                }
            }  
    $(document).ready(function() {
        var limite = 5;
        var somma;
        var val;
        $(".number").keyup(function(){
            val = parseInt($(this).val());
            somma = 0;
            $(".number").each(function(){
                somma += parseInt($(this).val());
            });      
            if(somma > limite){
                var diff = somma - limite;
                $(this).val(val - diff);
            }
        })
    });
</script>
a <input type="text" size="2" name="a" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
b <input type="text" size="2" name="b" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
c <input type="text" size="2" name="c" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
d <input type="text" size="2" name="d" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>
e <input type="text" size="2" name="e" value="0" class="number" onkeyup="char_consentiti(this)" /><br/>

Discussione: Input dinamici

Strumenti discussione

Ricerca discussione

Visualizza

Input dinamici

Permessi di invio