Aumentar y disminuir campo de texto

[yosoloyo]

Buenas a todos

Se bastante poco de javascript.
Mi "problema" es el siguiente:

Tengo una variable en PHP llamada $cantidadmáxima que pongamos de ejemplo que es 10.
Por otro lado tengo el siguiente formulario con un campo textbox y 2 botones, uno de ellos incrementa la cantidad del texbox en 1 unidad y el otro la decrementa:

Código HTML:

<script language="JavaScript">
var contador=0;
function incrementar() {
if(contador==10)
alert('Maximo permitido alcanzado: 10');
else {
document.formulario.precio.value= contador+;
}
}
function decrementar() {
if(contador==0)
alert('Minimo permitido alcanzado: 0');
else {
document.formulario.precio.value= contador--;}
}
</script> 
<p>Forma 1:
<form name="formulario">
<input type="button" onClick="incrementar()" value="+">
<input type="button" onClick="decrementar()" value="-">
<label>
<input name="precio" value=0 type="text" >
</label>
</form> 
</p>
 

Mi primera duda es la siguiente: ¿Como puedo poner en vez de que el máximo permitido sea 10 que sea el valor que tiene $cantidadmaxima?

Y mi duda más importante: ¿Por que si escribo un valor en el textbox y luego le doy a decrementar/incrementar en vez de decrementar/incrementar la cifra que he introducido de forma manual, me coge y me decrementa o incrementa la cifra por donde dejé de darle al botón? Pongo un ejemplo para explicarme bien:
Parto de cero al arrancar la pantalla, y incremento 2 veces hasta poner el valor de textbox a 2. Luego cojo y de forma manual escribo un 7. Entonces voy y vuelvo a incrementar y en vez de salir 8, sale 3. ¿A que se debe? ¿Como puedo corregirlo?

Gracias

[_cronos2]

a) Simplemente haz un echo desde el servidor:

Código Javascript:

var maximo = <?php echo $cantidad_maxima; ?>;
 

b)
Se debe a que usas una variable global, y después de modificarla la asignas al value del campo. En vez de hacerlo así, recibe el valor del campo, modifícalo y luego lo asignas.
Saludos (:

[yosoloyo]

Gracias por contestar de forma tan rápida.

En la pregunta A todo correcto, gran despiste por mi parte

En la B no se si te refieres a esto:

Código HTML:

var contador 
contador = document.formulario.precio.value;
 

Sino no te he entendido. De ser esto a lo que te refieres, decirte que el valor del campo me sale "NaN" una vez que decremento/incremento

[IsaBelM]

lo he hecho al vuelo, a ver si funciona

var comp = control.value == contador;
contador = control.value != contador ? control.value : contador;
if(contador ==10) {
alert('Maximo permitido alcanzado: 10');
} elseif(comp) {
document.formulario.precio.value= contador++;
}else{
document.formulario.precio.value= contador++;

[yosoloyo]

Iniciado por IsaBelM

lo he hecho al vuelo, a ver si funciona

Gracias por contestar pero no se exactamente q me quieres decir ni de donde sale control.value

La respuesta de cronos iba mas encaminada a lo que busco pero ya te digo gracias por contestar

[IsaBelM]

"contol" es el campo es decir document.getElementById('campo')

[yosoloyo]

Iniciado por IsaBelM

"contol" es el campo es decir document.getElementById('campo')

En mi caso precio no? es que arriba pusiste control.value y abajo precio.value y eso me descolocó un poco

Ya digo que de javascript lo justito

[_cronos2]

Vamos a ver:

Código Javascript:

var max = <?php echo $cantidad_maxima; ?>;
function incrementar(frm){
 var num = frm.precio.value;
 num >= 10 ?
  alert('Máximo permitido alcanzado: 10') :
  frm.precio.value= ++num;
}
function decrementar(frm) {
 var num = frm.precio.value;
 num <= 0 ?
  alert('Mínimo permitido alcanzado: 0') :
  frm.precio.value= --num;
}
 

Código HTML:

<p>Forma 1:
<form name="formulario">
<input type="button" onClick="incrementar(this.form)" value="+">
<input type="button" onClick="decrementar(this.form)" value="-">
<label>
<input name="precio" value='0' type="text" >
</label>
</form> 
</p>
 

No he comprobado si funciona, si no avísame.
Saludos (:

[yosoloyo]

gracias una vez mas

Lo de si le meto un 7 cuando el valor es 5 y decremento/incremento = CORRECTO

El problema es que si la variable $cantidad_maxima es de 9 y llega al tope, aunque decremente, me dice que se ha alcanzado el mínimo (en este caso cero)


PD: Edito: Todo correcto!!! El fallo era mio que en vez de cero al decrementar puse la variable max. Ahora si va todo perfecto MUCHAS GRACIAS!!


PD: Edito por segunda vez. Y si quisiera incrementar solo 0.5???

[_cronos2]

Entonces deberías modificar la función, y cambiar

... = ++num;

por

... += 0.5;

Saludos (:

[yosoloyo]

Lo probé antes de ponerlo porque me parecía de cajón que fuera así, pero cuando lo pongo no va la función.

Por cierto y ya para apuntillar........ Si se cambia el valor del campo texto y se pone por ejemplo 11 siendo el máximo 10.... ¿como se podría cambiar el valor introducido por 10?? supongo que desde OnChange()

He probado con esto pero.... no funciona:

Código HTML:

function cambiar(frm) {
    if(frm.precio.value >= <?php echo $cantidad_maxima; ?>)
    {alert('El maximo permitido es: <?php echo $cantidad_maxima; ?>');}
    
}
 

Siento estar dándote la lata. Muchas gracias por tus respuestas


Edito: lo del onChange="cambiar(this.form)" SOLUCIONADO

[_cronos2]

Pon el código de aumentar como lo tienes ahora para ver dónde está el fallo.

[IsaBelM]

el error está en que los valores se concadenan. usa el método Math.pow. algo como esto

numero = parseFloat(0.5)+parseFloat(document.getElementById ('campo').value)
dec = Math.pow(10, parseInt(2))
parseInt(numero * dec) / dec

[_cronos2]

Iniciado por IsaBelM

el error está en que los valores se concadenan.

Ups, claro!
Por cierto

parseInt(numero * dec) / dec

esta línea, ¿es para imitar un toFixed(2)? Porque así de repente no le veo otra función.
Saludos (:

[IsaBelM]

Iniciado por _cronos2

Ups, claro!
Por cierto

esta línea, ¿es para imitar un toFixed(2)? Porque así de repente no le veo otra función.
Saludos (:

no es que lo imite, sino que es el proceso interno del método toFixed(). o al menos así creo que es

tu código, al igual que el mio, no ha tenido en cuenta la estupidez humana. como el campo no estará deshabilitado, si se introduce un carácter no numérico, aparecerá un gracioso NaN. propuesta

num >= 10 ? alert('Máximo permitido alcanzado: 10') : isNaN(num) ? alert('no es un digito') : frm.precio.value= parseInt(num * dec) / dec;

otro factor a tener en cuenta es el hecho que se puede insertar valores negativos (con lo que las funciones harán lo contrario de lo que se espera) o positivos mayores de los permitidos

aún quedan cosas por resolver

[yosoloyo]

Muchas gracias una vez mas por vuestra implicación

Y perdonar mi torpeza pero esto sigue sin funcionar......

La función incrementar qudaría así, pero no funciona:

Código HTML:

var max = <?php echo $cantidad_maxima; ?>;
function incrementar(frm){
 var num = frm.precio.value;
 if(num >= max)
 {
    alert('Maximo permitido alcanzado: <?php echo $cantidad_maxima; ?>');
 }
 else
 {  
    num = parseFloat(0.5)+parseFloat(document.getElementById ('precio').value)
    dec = Math.pow(10, parseInt(2))
    parseInt(num * dec) / dec
    frm.precio.value= num; 
 }
 

No se si falta algún punto y coma por algún lado o que por ejemplo "dec" no está declarado por ningun lado a no ser que no haga falta declararlo o algo pasa porque la forma de sumarle los 0.5 no lo entiendo :(

Por otro lado a la hora de introducir un positivo de forma manual si lo tengo resuelto, al igual que a la hora de meter un caracter que no sea numérico. El problema lo tengo a la hora de meter un negativo, que en el onchange no me lo reconoce, pero eso es ahora secundario, lo que si me gustaría es arreglar lo del 0.5

Gracias a los dos y perdonar mi torpeza con javascript

[_cronos2]

Iniciado por IsaBelM

no es que lo imite, sino que es el proceso interno del método toFixed(). o al menos así creo que es

Entonces, ¿por qué no usar toFixed directamente?

Iniciado por yosoloyo

Código Javascript:

var max = <?php echo $cantidad_maxima; ?>;
function incrementar(frm){
 var num = frm.precio.value;
 if(num >= max)
 {
    alert('Maximo permitido alcanzado: <?php echo $cantidad_maxima; ?>');
 }
 else
 {  
    num = parseFloat(0.5)+parseFloat(document.getElementById ('precio').value)
    dec = Math.pow(10, parseInt(2))
    parseInt(num * dec) / dec
    frm.precio.value= num; 
 }
 

A ver ahora:

Código Javascript:

var max = <?php echo $cantidad_maxima; ?>;
function incrementar(frm){
 var num = frm.precio.value;
 if(num >= max)
 {
    alert('Maximo permitido alcanzado: <?php echo $cantidad_maxima; ?>');
 }
 else
 {  
    num = parseFloat(num);
    frm.precio.value = (num + 0.5).toFixed(2); 
 }
 

Saludos (:

[yosoloyo]

Fenomenal!!! ahora si!!!

Ya creo que está todo solucionado:
-Se incrementa sin problemas de 0.5 en 0.5
-Si sobrepasa el máximo o el mínimo con onchange pone automaticamente el máximo y el mínimo
-No se pueden escribir en el textbox mas que numeros y puntos ademas de usar retroceso gracias a onkeypress


Una última duda .... como sería a la hora de perder el foco del textbox se llamara a una función? en este caso querría llamar a la función de esa forma que creo que es onfocus y no a través de onchange, ya que onchange hasta que no se pierde el foco de todas formas no la llama.

Muchas gracias!!!!!

[_cronos2]

onfocus se ejecuta cuando el campo recibe el foco, onblur cuando lo pierde, y onchange... es un poco especial. Yo en inputs no lo uso, sólo en selects. Aquí más info.
Saludos (:

[IsaBelM]

Iniciado por _cronos2

Entonces, ¿por qué no usar toFixed directamente?

una que está así de ida no, en serio, me gusta saber el proceso interno de las funciones

[yosoloyo]

gracias de nuevo a los dos todo aclarado y perfecto

[_cronos2]

Iniciado por yosoloyo

gracias de nuevo a los dos todo aclarado y perfecto

Me alegro, si tienes más problemas aquí estamos
Saludos (: