Foros del Web » Programando para Internet » Javascript » Frameworks JS »

input que cambie su valor con flechas

Estas en el tema de input que cambie su valor con flechas en el foro de Frameworks JS en Foros del Web. Estimados estoy realizando un proyecto php y estoy topando en algo que probablemente lo pueda solucionar con ajax: lo que ocurre es que tengo que ...
  #1 (permalink)  
Antiguo 05/09/2010, 18:37
 
Fecha de Ingreso: septiembre-2009
Mensajes: 34
Antigüedad: 12 años, 9 meses
Puntos: 0
input que cambie su valor con flechas

Estimados estoy realizando un proyecto php y estoy topando en algo que probablemente lo pueda solucionar con ajax:

lo que ocurre es que tengo que hacer un input en el cual voy a manejar cantidades de productos pero sin embargo necesito que este input tenga flechas, si apreto la flecha de arriba aumente uno, si apreto la flecha de abajo decremente en menos uno

alguna idea compañeros??


Saludos



de ante mano muchas gracias
  #2 (permalink)  
Antiguo 05/09/2010, 23:29
 
Fecha de Ingreso: septiembre-2010
Mensajes: 48
Antigüedad: 11 años, 10 meses
Puntos: 3
Respuesta: input que cambie su valor con flechas

No soy un experto en programación, pero lo que creo que necesitas es obviamente con Ajax ó Javascript y actualize mediante ajax.

La estrutucturación sería que en cuanto den click en la "imagen de la fecha arriba" se haga un "UPDATE" a la database aumentando el valor +1, la parte SQL creo que no tendrías problemas ... UDPATE x set y ... id=z.

Para lo de ajax yo recien estoy comenzando, pero podrías utilizar esto:
http://www.ribosomatic.com/articulos/ajax-php-mysql-consulta-de-registros/

Lo cual al enviar un valor a la sql te "actualiza" los datos en pantalla automáticamente.

Ó por otro lado, yo lo que hago es digamos sería meter dos form uno para el UP y otro para el DOWN (las flechas) en donde arriba represente un valor sumatorio y abajo uno para restar, lo proceso con php y muestro con ajax, por ejemplo, este es mi codigo ajax:

ajax1.js (me refresca el div):
Código Javascript:
Ver original
  1. function creaAjax(){
  2.   var objetoAjax=false;
  3.   try {
  4.    objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
  5.   } catch (e) {
  6.    try {
  7.      /*Para explorer*/
  8.      objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
  9.      }
  10.      catch (E) {
  11.      objetoAjax = false;
  12.    }
  13.   }
  14.  
  15.   if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
  16.    objetoAjax = new XMLHttpRequest();
  17.   }
  18.   return objetoAjax;
  19. }
  20.  
  21.  function insert (url,capa,valores,metodo)
  22. {
  23.    
  24.    var ajax=creaAjax();
  25.    var msginfo = document.getElementById(capa);
  26.  if(metodo.toUpperCase()=='POST'){
  27.     ajax.open (metodo, url, true);
  28.     ajax.onreadystatechange = function() {
  29.          if (ajax.readyState==1) {
  30.                  msginfo.innerHTML="<p align='center'>Cargando...</p>";
  31.          }
  32.          else if (ajax.readyState==4){
  33.             if(ajax.status==200)
  34.             {
  35.                 document.getElementById('msg').innerHTML=ajax.responseText;
  36.             }
  37.             else if(ajax.status==404)
  38.                  {
  39.  
  40.                      //msginfo.innerHTML = "La direccion existe";
  41.                  }
  42.              else
  43.                  {
  44.                      //msginfo.innerHTML = "Error: ".ajax.status;
  45.                  }
  46.         }
  47.     }
  48.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  49.     ajax.send(valores);
  50.     return;
  51. }
  52. }

ajax2.js (me actualiza cada "x" tiempo);
Código Javascript:
Ver original
  1. function getXMLHttpRequest() {
  2.     var aVersions = [ "MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
  3.     if (window.XMLHttpRequest) {
  4.         // IE7, MOZILLA, ZAFARI
  5.         return new XMLHttpRequest();
  6.     }
  7.     else if (window.ActiveXObject) {
  8.         // ActiveX
  9.         for(var i=0;i<aVersions.length;i++) {
  10.             try {
  11.                 var oXmlHttp = new ActiveXObject(aVersions);
  12.                 return oXmlHttp;
  13.             }
  14.             catch(error) {
  15.             }
  16.         }
  17.     }
  18. }
  19.  
  20. var carg = '<p align="center">Cargando...</p>';
  21.  
  22. function reloadchat(div,chat) {
  23.     var cont = document.getElementById(div);
  24.     ajax = getXMLHttpRequest();
  25.     ajax.onreadystatechange = function() {
  26.        
  27.         if(ajax.readyState == 4) {
  28.             cont.innerHTML = ajax.responseText;
  29.         }
  30.     }
  31.     ajax.open('POST', chat, true);
  32.     ajax.send(null);
  33. }
  34.  
  35. setInterval("reloadchat('msg','lib/show.lib.php');",1000);

El form del ajax1.js quedaría:
Cita:
form method=\"POST\" onsubmit=\"insert('./lib/formcheck.lib.php','msg','user='+document.getEleme ntById('user').value+'&amp;gomsg='+document.getEle mentById('gomsg').value+'&amp;gopass='+document.ge tElementById('gopass').value,'POST'); return false\">
En donde declaro el archivo php, los valores y el metodo (POST o GET).

P.D. No es una respuesta muy aclarativa pero alomejor te da unas ideas.

Etiquetas: ajax, flechas, input, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:15.