Incrementar valor de varios inputs.

sako_11_ · #1 (**permalink**) 01/10/2013, 13:14

Hola chicos,

Estoy haciendo una página de estadísticas y estoy trabado. El objetivo es llenar un formulario con 16 inputs diferentes y este formulario se repite por 12.

Los inputs son numéricos y para facilitar la entrada de datos me gustaría poner dos botones, uno para incrementar y otro para disminuir, por uno, cada input.

Hasta el momento he conseguido aumentar un input. Pero tengo una función para aumentar y disminuir ese input, pero de mi forma necesitaría una función para cada input y cada formulario. Eso son 192 funciones! jajaj, va, fuera bromas, seguro que se puede de otra forma y no doy con la tecla. Llevo horas dándole a la página y estoy colapsado, si alguien tiene una idea, perfecto!

Os dejo parte del código por si ayuda!
Script:

Código:

<script type="text/javascript">
$(document).ready(function(){
    $('#min1c').click(function(){
        //Si es diferente que 0
        if ($('#1c').val() != 0)
            //disminuir
            $('#1c').val(parseInt($('#1c').val()) - 1);
    });

    $('#plus1c').click(function(){
        //Aumentar
        $('#1c').val(parseInt($('#1c').val()) + 1);

    });    
});

$(document).ready(function(){
    $('#min1f').click(function(){

        if ($('#1f').val() != 0)

            $('#1f').val(parseInt($('#1f').val()) - 1);
    });

    $('#plus1f').click(function(){

        $('#1f').val(parseInt($('#1f').val()) + 1);

    });    
});

$(document).ready(function(){
    $('#min2c').click(function(){

        if ($('#2c').val() != 0)

            $('#2c').val(parseInt($('#2c').val()) - 1);
    });

    $('#plus2c').click(function(){

        $('#2c').val(parseInt($('#2c').val()) + 1);

    });    
$(document).ready(function(){
    $('#min2f').click(function(){

        if ($('#2f').val() != 0)

            $('#2f').val(parseInt($('#2f').val()) - 1);
    });
  });

    $('#plus2f').click(function(){

        $('#2f').val(parseInt($('#2f').val()) + 1);

    }); 
});
</script>

HTML:

Código:

<form name="j1">
            <table class="">
            	<tbody>
            		<tr>
            			<td colspan="2">04 - Albert Carnero</td>
            		</tr>
            		<tr>
            		  <td>
                    1c<a id="min1c" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="1c" id="1c" value="0" class="input-small" />
                    <a id="plus1c" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
                  <td>
                    1f<a id="min1f" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="1f" id="1f" value="0" class="input-small" />
                    <a id="plus1f" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			 <td>
                    2c<a id="min2c" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="2c" id="2c" value="0" class="input-small" />
                    <a id="plus2c" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>  
                  <td>
                    2f<a id="min2f" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="2f" id="2f" value="0" class="input-small" />
                    <a id="plus2f" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			 <td>
                    3c<a id="min3c" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="3c" id="3c" value="0" class="input-small" />
                    <a id="plus3c" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
                    <td>
                    3f<a id="min3f" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="3f" id="3f" value="0" class="input-small" />
                    <a id="plus3f" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			 <td>
                    ro<a id="minro" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="ro" id="ro" value="0" class="input-small" />
                    <a id="plusro" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
                    <td>
                    rd<a id="minrd" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="rd" id="rd" value="0" class="input-small" />
                    <a id="plusrd" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			  <td colspan="2">
                    as<a id="minas" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="as" id="as" value="0" class="input-small" />
                    <a id="plusas" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			 <td>
                    fc<a id="minfc" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="fc" id="fc" value="0" class="input-small" />
                    <a id="plusfc" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
                    <td>
                    fr<a id="minfr" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="fr" id="fr" value="0" class="input-small" />
                    <a id="plusfr" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			 <td>
                    bp<a id="minpp" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="pp" id="pp" value="0" class="input-small" />
                    <a id="pluspp" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
                    <td>
                    br<a id="minpr" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="pr" id="pr" value="0" class="input-small" />
                    <a id="pluspr" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			  <td>
                    ta<a id="minta" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="ta" id="ta" value="0" class="input-small" />
                    <a id="plusta" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			  <td>
                    pt<a id="minpt" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="pt" id="pt" value="0" class="input-small" />
                    <a id="pluspt" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            		<tr>
            			  <td>
                    va<a id="minva" style="cursor:pointer;"><i class="icon-minus"></i></a>
                    <input name="va" id="va" value="0" class="input-small" />
                    <a id="plusva" style="cursor:pointer;"><i class="icon-plus"></i></a>
                  </td>
            		</tr>
            	</tbody>
        </form>

Se que el código html no esta muy limpio, así que si os lia mucho, me sirve una buena explicación, gracias!

maycolalvarez · #2 (**permalink**) 01/10/2013, 13:19

existen plugins llamados spinbutton que te permiten añadir eso.

sin embargo en HTML5 ya existen, pero no todos los navegadores lo soportan

abimaelrc · #3 (**permalink**) 01/10/2013, 13:19

Saludos y bienvenido,

¿Quieres llenar un campo con valores o quieres llenar el formulario con más campos?

IsaBelM · #4 (**permalink**) 02/10/2013, 05:23

un spinbutton casero

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<script type="text/javascript">
var clase = function() {
this.spinButton = function(bol, este) {
var input = este.parentNode.parentNode.getElementsByTagName('i nput')[0];
var cantidad = (bol) ? parseInt(input.value, 10) + 5 : parseInt(input.value, 10) - 5;
if(cantidad < 0) { cantidad = 0; input.value = 0;}
if(cantidad > 50) { cantidad = 50; input.value = 50;}
input.value = cantidad;
}
}

s = new clase();

window.onload = function() {
for (var i = 0, incr = document.querySelectorAll('.up'), decr = document.querySelectorAll('.down'); i < incr.length; i++ ) {
incr[i].onclick = function() {s.spinButton(true, this)};
decr[i].onclick = function() {s.spinButton(false, this)};
}
}
</script>
<style type="text/css">
* {
position: relative;
margin: 0;
}

html, body {
width: 100%;
height: 100%;
}

span.spin {
float: left;
margin: 30px;
}

span.spin > input {
float: left;
}

span.spin > span.botonera {
float: left;
}

span.spin > span.botonera img {
width: 16px;
height: 11px;
display: block;
border: 0;
padding: 0;
}
</style>
</head>
<body>

<form>

<span class="spin">
<input type="text" name="cant" id="cant" value="0" readonly="readonly" size="2" />
<span class="botonera">
<img src="spin_up.png" class="up" alt="u1" />
<img src="spin_down.png" class="down" alt="d1" />
</span>
</span>

<span class="spin">
<input type="text" name="cant1" id="cant1" value="0" readonly="readonly" size="2" />
<span class="botonera">
<img src="spin_up.png" class="up" alt="u2" />
<img src="spin_down.png" class="down" alt="d2" />
</span>
</span>

<span class="spin">
<input type="text" name="cant2" id="cant2" value="0" readonly="readonly" size="2" />
<span class="botonera">
<img src="spin_up.png" class="up" alt="u3" />
<img src="spin_down.png" class="down" alt="d3" />
</span>
</span>

</form>

</body>
</html>