Aumentar o disminuir cantidades con javascript

[marx-pola]

Hola a todos! Consulta... ¿Cómo se hace para agregar estos dos botoncitos para incrementar el valor del input SOLO DEL ARTICULO SELECCIONADO?


Estoy trabajando sobre este ejemplo:
http://www.programacionweb.net/artic...iculo/?num=329

Probé haciendo esto y solo funciona con el primer producto pero si le agrego más productos y le modifico sus cantidades, me modifica SIEMPRE el primero de la lista. El listado trabajaría de esta manera:
listado.php

Código HTML:

<!--- primer producto --->
<form name="a<?php echo $v['identificador'] ?>" method="post" action="carro_actualiza.php?<?php echo SID ?>" id="a<?php echo $v['identificador'] ?>">
<input name="cantidad" type="text" class="prod" id="cantidad" value="<?php echo $v['cantidad'] ?>" size="6">
<a href="#" onclick="document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) - 1" title="">-</a>
<input name="cantidad" type="text" id="cantidad" value="3" size="8">
<a href="#" onclick="document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) + 1" title="">+</a>
</form>

<!--- segundo producto --->
<form name="a<?php echo $v['identificador'] ?>" method="post" action="carro_actualiza.php?<?php echo SID ?>" id="a<?php echo $v['identificador'] ?>">
<input name="cantidad" type="text" class="prod" id="cantidad" value="<?php echo $v['cantidad'] ?>" size="6">
<a href="#" onclick="document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) - 1" title="">-</a>
<input name="cantidad" type="text" id="cantidad" value="3" size="8">
<a href="#" onclick="document.getElementById('cantidad').value = parseInt(document.getElementById('cantidad').value) + 1" title="">+</a>
</form> 

Pero como les decía antes, al incrementar las cantidades del SEGUNDO artículo me modifica siempre el PIRIMERO.

¿Cómo puedo hacer para que me los modifique individialmente?

Gracias y saludos.
Marx.

[maycolalvarez]

para comenzar cada uno de esos inputs debe tener un ID único, puede que tengas los names como un array y todos en la fila sean iguales como

<input name="cantidad[]" />

pero para JS tienes la ventaja de usar el ID sin interferir con el name para tu servidor , quedando más un menos así:


<input name="cantidad[]" id="cantidad1" />
<input name="cantidad[]" id="cantidad2" />
<input name="cantidad[]" id="cantidad3" />
<input name="cantidad[]" id="cantidad4" />

y con la función document.getElementById() resuelves ello

[marx-pola]

maycoalvarez: mil gracias por responder. Todavía no he llegado a casa para investigar, pero sería factible puedas darme un ejem,plo por favor de cómo generarlos?

Gracias amigo y saludos.

[marx-pola]

¿Se debe utilizar un for, no?

[America|UNK]

Añade una función después de los formularios

Código Javascript:

<script>
(function(){
    var d = document, c = d.getElementsByTagName('input'), i=0, l = c.length
    while(i<l){
        if(c[i].name == 'cantidad'){
            c[i].value = ~~c[i].value
            var mas = d.createElement('button'), menos = d.createElement('button'), parent = c[i].parentNode
            mas.innerHTML = '+';                menos.innerHTML = '-'
            mas.className = 'botonMasMenos';    menos.className = 'botonMasMenos'
            parent.insertBefore(mas, c[i]) // Boton +
            parent.insertBefore(menos, c[i].nextSibling) //Boton -
            mas.onclick = function(){
                this.nextSibling.value++ //Sumar a la caja de texto
            }
            menos.onclick = function(){
                var v = this.previousSibling
                v.value = v.value > 0 ? v.value-1 : 0 // Restar
            }
        }
        i++
    }
})()
</script>
 

Código CSS:

.botonMasMenos {display:block;background:lime}
 

[marx-pola]

Hola nuevamente...

America: coloqué el código debajo del formulario que mostré más arriba tal cual como me dijiste y no hace nada... tampoco me aparecen los botones + y -

maycolalvarez, sigo viendo como generar lo que me dijiste y tampoco he dado en el clavo en como llegar a eso.

Mil disculpas por esto pero bueno, me lo pidieron y no se como hacerlo por eso insisto.

Gracias nuevamente.

[marx-pola]

Iniciado por America|UNK

Añade una función después de los formularios

Código Javascript:

<script>
(function(){
    var d = document, c = d.getElementsByTagName('input'), i=0, l = c.length
    while(i<l){
        if(c[i].name == 'cantidad'){
            c[i].value = ~~c[i].value
            var mas = d.createElement('button'), menos = d.createElement('button'), parent = c[i].parentNode
            mas.innerHTML = '+';                menos.innerHTML = '-'
            mas.className = 'botonMasMenos';    menos.className = 'botonMasMenos'
            parent.insertBefore(mas, c[i]) // Boton +
            parent.insertBefore(menos, c[i].nextSibling) //Boton -
            mas.onclick = function(){
                this.nextSibling.value++ //Sumar a la caja de texto
            }
            menos.onclick = function(){
                var v = this.previousSibling
                v.value = v.value > 0 ? v.value-1 : 0 // Restar
            }
        }
        i++
    }
})()
</script>
 

Código CSS:

.botonMasMenos {display:block;background:lime}
 

Si, ahora lo pude hacer funcionar... gracias genio!!! En el name tenia puesto un [] y no me lo tomaba y ahora si. Lo que tengo que hacer es que al sumar o restar me modifique tanto la cantidad como el total del importe y el total total.

Igualmente me quedé con la gran duda de cómo hacer lo que me dijo maycolalvarez que no lo supe implementar.