Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] validar input solo numeros de un tr en jquery

 Estas en el tema de validar input solo numeros de un tr en jquery en el foro de Jquery en Foros del Web. hola a todos, le presento la siguiente consulta tengo el siguiente codigo donde quiero validar que en un input solo ingresen valores numericos el cual ...
  #1 (permalink)  
Antiguo 23/10/2014, 14:22
Avatar de derleguan  
Fecha de Ingreso: abril-2012
Mensajes: 26
Antigüedad: 12 años
Puntos: 1
validar input solo numeros de un tr en jquery
hola a todos, le presento la siguiente consulta

tengo el siguiente codigo donde quiero validar que en un input solo ingresen valores numericos el cual funciona.

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html><script id="tinyhippos-injected">if (window.top.ripple) { window.top.ripple("bootstrap").inject(window, document); }</script><head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.  
  5.  
  6. <title>Cotizacion</title>
  7.  <script src="jquery.js"></script> 
  8.  <script src="jqueryui.js"></script>
  9.  <script>
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17. $(document).ready(function(){ 
  18. $(".unidad").keydown(function(event) {
  19.    if(event.shiftKey)
  20.    {
  21.         event.preventDefault();
  22.    }
  23.  
  24.    if (event.keyCode == 46 || event.keyCode == 8)    {
  25.    }
  26.    else {
  27.         if (event.keyCode < 95) {
  28.           if (event.keyCode < 48 || event.keyCode > 57) {
  29.                 event.preventDefault();
  30.           }
  31.         } 
  32.         else {
  33.               if (event.keyCode < 96 || event.keyCode > 105) {
  34.                   event.preventDefault();
  35.               }
  36.         }
  37.       }
  38.    });
  39. });
  40.  
  41.  
  42.  
  43.  
  44.  </script>
  45. </head>
  46.  
  47. <body>
  48.  
  49.     <section id="contenedor">
  50.             <aside id="menu"><h1>Cotizacion</h1></aside>
  51.             
  52.             <table id="tabla">
  53.                 <thead><tr><th>N°</th><th>Nombre</th><th>Precio</th><th>Unidad de medida</th><th>Medida</th><th>Cantidad</th><th>Subtotal</th><th></th></tr></thead>
  54.                 <tbody>
  55.                     <tr>
  56.                         <td>1</td>
  57.                         <td><select name="nombre" required=""> 
  58.                              <option value="0">Elegir una opciones</option>
  59.                              <option value="1">adhesivo</option>
  60.                              <option value="2">tela</option>
  61.                              <option value="3">microperforado</option>
  62.                              <option value="4">a</option>
  63.                              <option value="5">premaskin</option>
  64.                              <option value="6">piocha</option>
  65.                              <option value="7">k</option>
  66.                         </select></td>
  67.                         <td>2500</td>
  68.                         <td>unidad</td>
  69.                         <td>---</td>
  70.                         <td><input class="unidad" onchange="cambio_unidad()" type:number="" min="0" value="1">
  71.                         <td><label>unidad</label></td>
  72.                         <td>2500</td>
  73.                     </tr>
  74.                 </tbody>
  75.             </table>    
  76.         
  77.             
  78.     </section>
  79.     
  80.  
  81. <input type="text" class="unidad"> 
  82.                 
  83.                 </body></html>



pero al hacer los campos dinamicos no me funciona como se ve en el siguiente codigo


Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  
  6.  
  7. <title>Cotizacion</title>
  8.  <script src="jquery.js"></script> 
  9.  <script src="jqueryui.js"></script>
  10.  <script>
  11.   $(function() {
  12.     $( "#tabs" ).tabs();
  13.   });
  14.   $(function(){
  15.     // Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
  16.     $("#agregar").on('click', function(){
  17.         $("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').appendTo("#tabla tbody");
  18.     });
  19.     // Evento que selecciona la fila y la elimina 
  20.     $(document).on("click",".eliminar",function(){
  21.         var parent = $(this).parents().get(0);
  22.         $(parent).remove();
  23.     });
  24. });
  25.  
  26.  
  27.  
  28. //crear la dotos de la tabla al cargar el documento
  29. $(document).ready(function(){
  30.     //validad solo numeros en input
  31.  
  32.  
  33.     var tbody = document.getElementById ("tabla").getElementsByTagName("TBODY")[0];
  34.     var row = document.createElement("TR")
  35.     var td1 = document.createElement("TD")
  36.     td1.appendChild(document.createTextNode("columna 1"))
  37.     var td2 = document.createElement("TD")
  38.     td2.appendChild (document.createTextNode("columna 2"))
  39.     var td3 = document.createElement("TD")
  40.     td3.appendChild (document.createTextNode("columna 3"))
  41.     var td4 = document.createElement("TD")
  42.     td4.appendChild (document.createTextNode("columna 4"))
  43.     var td5 = document.createElement("TD")
  44.     td5.appendChild (document.createTextNode("columna 5"))
  45.     var td6 = document.createElement("TD")
  46.     td6.appendChild (document.createTextNode("columna 6"))
  47.     var td7 = document.createElement("TD")
  48.     td7.appendChild (document.createTextNode("columna 7"))
  49.     row.appendChild(td1).innerHTML="1";
  50.     row.appendChild(td2).innerHTML="<?php
  51.                 require( "variables.php" );
  52.  
  53.                 $h = mysql_connect( $host, $admin_name, $admin_pass ) or die( "ERROR al conectar al servidor." );
  54.                 if( isset( $h ) ){
  55.                     $db = mysql_select_db( $db_name, $h ) or die( "ERROR al abrir base de datos." );
  56.                     if( isset( $db ) ){
  57.                         $sql = " SELECT * from productos ";
  58.                         $res = mysql_query( $sql, $h ) or die( "ERROR al ejecutar instruccion SQL." );
  59.                         echo "<select name=nombre required >  ";
  60.                         echo "<option value=0>Elegir una opciones</option>";
  61.                         $i=1;
  62.                         while( $fila = mysql_fetch_row( $res ) ){
  63.                                 echo "<option value=".$i.">".$fila[1]."</option>";
  64.                             $i++;
  65.                         }
  66.                         echo "</select>";
  67.                     }   
  68.                 }    
  69.                 mysql_close($h);
  70.                 ?>";
  71.     row.appendChild(td3).innerHTML="0";
  72.     row.appendChild(td4).innerHTML="---------";
  73.     row.appendChild(td5).innerHTML="0";
  74.     row.appendChild(td6).innerHTML="0";
  75.     row.appendChild(td7).innerHTML="0";
  76.     tbody.appendChild(row);
  77.  
  78. $(".unidad").keydown(function(event) {
  79.    if(event.shiftKey)
  80.    {
  81.         event.preventDefault();
  82.    }
  83.  
  84.    if (event.keyCode == 46 || event.keyCode == 8)    {
  85.    }
  86.    else {
  87.         if (event.keyCode < 95) {
  88.           if (event.keyCode < 48 || event.keyCode > 57) {
  89.                 event.preventDefault();
  90.           }
  91.         } 
  92.         else {
  93.               if (event.keyCode < 96 || event.keyCode > 105) {
  94.                   event.preventDefault();
  95.               }
  96.         }
  97.       }
  98.    });
  99.  
  100.     $("select").change(function(){
  101.         var str = "";
  102.         $( "select option:selected" ).each(function() {
  103.           str += $( this ).text() + " ";
  104.         });
  105.         //alert(str);
  106.         $.post("jquery_ajax_consulta.php",
  107.         {
  108.           nombre:str,
  109.         },
  110.         function(data,status){
  111.  
  112.             var valores= data;
  113.             var datos= valores.split(',');
  114.             document.getElementById("tabla").rows[1].cells[2].innerHTML =datos[0];
  115.             if(parseInt(datos[1])==1){
  116.                 document.getElementById("tabla").rows[1].cells[3].innerHTML ="unidad";
  117.                 document.getElementById("tabla").rows[1].cells[4].innerHTML ="<tr>---</tr>";
  118.                 document.getElementById("tabla").rows[1].cells[5].innerHTML ="<input class=unidad  onchange=cambio_unidad() type:number min=0 value=1><label>unidad</label> ";
  119.                 document.getElementById("tabla").rows[1].cells[6].innerHTML =datos[0];
  120.             }else if (parseInt(datos[1])==2) {
  121.                 document.getElementById("tabla").rows[1].cells[3].innerHTML ="M. lineal";
  122.                 document.getElementById("tabla").rows[1].cells[4].innerHTML ="<label>Largo:</label><input name=largo type:number min=0 value=100><label>cm</label>";
  123.                 document.getElementById("tabla").rows[1].cells[2].innerHTML =datos[0];
  124.                 document.getElementById("tabla").rows[1].cells[6].innerHTML =datos[0];
  125.             }else if (parseInt(datos[1])==3) {
  126.                 document.getElementById("tabla").rows[1].cells[3].innerHTML ="M&sup2";
  127.                 document.getElementById("tabla").rows[1].cells[4].innerHTML ="<label>Ancho:</label><input name=Ancho type:number min=0 value=100><label>cm</label> <label>Alto:</label><input name=alto type:number min=0 value=100><label>cm</label>";
  128.                 document.getElementById("tabla").rows[1].cells[6].innerHTML =datos[0];
  129.             };
  130.         });
  131.  
  132.     });
  133.     
  134.  
  135.  
  136. });
  137.  
  138.  
  139.  
  140.     
  141.  
  142.  </script>
  143. </head>
  144.  
  145. <body>
  146.  
  147.     <section id="contenedor">
  148.             <aside id="menu"><H1>Cotizacion</H1></aside>
  149.             
  150.             <?php
  151.  
  152.                         echo "<table id=tabla>";
  153.                         echo "<thead>";
  154.                         echo "<tr>";
  155.                             echo "<th>N°</th>";
  156.                             echo "<th>Nombre</th>";
  157.                             echo "<th>Precio</th>";
  158.                             echo "<th>Unidad de medida</th>";
  159.                             echo "<th>Medida</th>";
  160.                             echo "<th>Cantidad</th>";
  161.                             echo "<th>Subtotal</th>";
  162.                             echo "<th></th>";
  163.                         echo "</tr>";
  164.                         echo "</thead>";
  165.                         echo "<tbody>";
  166.                         /*echo "<tr class=fila-base>";
  167.                             $i=1;
  168.                         echo "<td>1</td>";
  169.                         echo "<td><select name=nombre required class=producto>  ";
  170.                         echo "<option value=0>Elegir una opciones</option>";
  171.                         while( $fila = mysql_fetch_row( $res ) ){
  172.                                 echo "<option value=".$i.">".$fila[1]."</option>";
  173.                             $i++;
  174.                         }
  175.                         echo "</select></td>";
  176.                         $j=1;
  177.                         $sql1 = " SELECT * from productos ";
  178.                         $res1 = mysql_query( $sql1, $h ) or die( "ERROR al ejecutar instruccion SQL." );
  179.                         echo "<td><select name=precio >  ";
  180.                         echo "<option value=0>Elegir una opciones</option>";
  181.  
  182.                         while( $fila1 = mysql_fetch_row( $res1 ) ){
  183.                                 echo "<option value=".$j.">".$fila1[2]."</option>";
  184.                             $j++;
  185.                         }
  186.                         echo "</select></td>";
  187.                         echo "<td><label>unidad de medida</label></td>";
  188.                         echo "<td><label>medida</label></td>";
  189.                         echo "<td><input type=number min=1 class=cantidad /></td>";
  190.                         echo "<td><label>0</label></td>";
  191.                         echo "<td class=eliminar>Eliminar</td>";
  192.                         echo "</tr>";*/
  193.  
  194.                         echo "</tbody>";
  195.                         echo "</table>";
  196.                 
  197.             ?>  
  198.         
  199.             <!--<input type="button" id="agregar" value="Agregar fila" />-->
  200.     </section>
  201.     <input type="text" class="unidad" /> 
  202. </body>
  203. </html>


nose que cambia que en uno funciona y en el otro no

de ante manos muchas gracias si me pueden ayudar
Última edición por derleguan; 23/10/2014 a las 14:28 Razón: error codigo
  #2 (permalink)  
Antiguo 23/10/2014, 16:18
Avatar de derleguan  
Fecha de Ingreso: abril-2012
Mensajes: 26
Antigüedad: 12 años
Puntos: 1
Respuesta: validar input solo numeros de un tr en jquery
si bien aun no encuentro como arreglar el problema vi que el metodo on de jquery sirve para agregar eventos a elementos agregados dinamicamente
  #3 (permalink)  
Antiguo 25/10/2014, 13:38
Avatar de derleguan  
Fecha de Ingreso: abril-2012
Mensajes: 26
Antigüedad: 12 años
Puntos: 1
Respuesta: validar input solo numeros de un tr en jquery
$(document).on('change', '.unidad', function() {});

ahi ta la respuesta para los que le salga la misma duda.

Etiquetas: html, javascript
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:18.