Solo modifique pero falta algo

RucarMaN · #1 (**permalink**) 20/09/2010, 11:15

Buenas....tengo este formulario doble...hasta ahora va bien...
pero necesito que se pueda borrar los campo agregados, limitar el numero de agregados y colocar un text al fina donde me pueda sumar los precios..

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
    <title>Presupuesto</title> 
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script> 
    jQuery.fn.generaMO = function(etiquetaMO, nombreCampoMO, indiceMO){
        $(this).each(function(){
            elem = $(this);
            elem.data("etiquetaMO",etiquetaMO);
            elem.data("nombreCampoMO",nombreCampoMO);
            elem.data("indiceMO",indiceMO);
            
            elem.click(function(MO){
                MO.preventDefault();
                elem = $(this);
                etiquetaMO = elem.data("etiquetaMO");
                nombreCampoMO = elem.data("nombreCampoMO");
                indiceMO = elem.data("indiceMO");
                //texto_insertarMO = + etiquetaMO + ' ' + indiceMO + ':<input type="text" name="454554" /></p>';
                texto_insertarMO = '<input type="text" name="manoObra" size="50" /><input type="text" name="precioMO" size="5" /><br />';
                indiceMO ++;
                elem.data("indiceMO",indiceMO);
                nuevo_campoMO = $(texto_insertarMO);
                elem.before(nuevo_campoMO);
            });
        });
        return this;
    }
    $(document).ready(function(){
        $("#masMO").generaMO("Compra", "compra", 2);
    });
    
    jQuery.fn.generaRE = function(etiquetaRE, nombreCampoRE, indiceRE){
        $(this).each(function(){
            elem = $(this);
            elem.data("etiquetaRE",etiquetaRE);
            elem.data("nombreCampoRE",nombreCampoRE);
            elem.data("indiceRE",indiceRE);
            
            elem.click(function(RE){
                RE.preventDefault();
                elem = $(this);
                etiquetaRE = elem.data("etiquetaRE");
                nombreCampoRE = elem.data("nombreCampoRE");
                indiceRE = elem.data("indiceRE");
                //texto_insertar = '<p>' + etiqueta + ' ' + indice + ':<br><input type="text" name="' + nombreCampo + indice + '" /></p>';
                texto_insertarRE = '<input type="text" name="cant" size="2" /><input type="text" name="repuesto" size="50" /><input type="text" name="precioRE" size="5" /><br />';
                indiceRE ++;
                elem.data("indiceRE",indiceRE);
                nuevo_campoRE = $(texto_insertarRE);
                elem.before(nuevo_campoRE);
            });
        });
        return this;
    }
    $(document).ready(function(){
        $("#masRE").generaRE("Compra", "compra", 2);
    });
    
    </script> 
</head> 
 
<body> 
<form>
<table width="100%" border="0">
  <tr valign="top">
    <td><!--<input type="Text" name="manoObra" size="50"><input type="text" name="precioMO" size="5" /><br>-->
 
     <a href="#" id="masMO">Mano de Obra</a></td>
    <td><!---<input type="text" name="cant" size="2" /><input type="Text" name="repuesto" size="50"><input type="text" name="precioRE" size="5" /><br>-->
 
     <a href="#" id="masRE">Repuesto</a></td>
  </tr>
</table>
<!--
<input type="Text" name="compra" size="50"><input type="text" name="precio" size="5" /><br /> 
<a href="#" id="mascampos">Más campos</a> -->
<p><input type=submit value="   Guardar   " /> </p>
</form> 
 <a href="add2.html">home</a> 
</body> 
</html>

tomado de http://www.desarrolloweb.com/articul...ormulario.html
tengo este otro....esto borra los campos agregados

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html> 
<head>
<title>Crear input file</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('fiel'); // 1
  contenedor = document.createElement('div'); // 2
  contenedor.id = 'div'+num; // 3
  fi.appendChild(contenedor); // 4
 
  ele = document.createElement('input'); // 5
  ele.type = 'text'; // 6
  //ele.name = 'fil'+num; // 6
  ele.name = 'NombreRepuesto';
  ele.size = '60';
  contenedor.appendChild(ele); // 7
  
   ele = document.createElement('input'); // 5
  ele.type = 'checkbox'; // 6
  //ele.name = 'fil'+num; // 6
  ele.name = 'eliminar';
  ele.value = 'ON';
  contenedor.appendChild(ele); // 7
  
  ele = document.createElement('input'); // 5
  ele.type = 'button'; // 6
  ele.value = ' X '; // 8
  ele.name = 'div'+num; // 8
  ele.onclick = function () {borrar(this.name)} // 9
  contenedor.appendChild(ele); // 7
}
function borrar(obj) {
  fi = document.getElementById('fiel'); // 1 
  fi.removeChild(document.getElementById(obj)); // 10
}
--> 
</script>
</head>
<body>
<form method="get" action="algo.asp">
<p id="fiel">
<input type="button" value="Crear" onclick="crear(this)" />
</p>
<input type=submit value=grabar>
</form> 
</body>
</html>

caricatos · #2 (**permalink**) 20/09/2010, 15:50

Tema movido desde javascript

Dany_s · #3 (**permalink**) 20/09/2010, 18:34

pero con jquery? ahi veo que el primero es con jquery y el segundo con javascript puro

con jquery es bastante sencillo, claro, mínimo una lectura a la documentación (yo no sé inglés pero viendo los ejemplos se nota que hace)

buscá en la doc que hace cada método, lo que usé se ocupa todos los días

es simple pero con más campos es lo mismo, click en borrar sube hasta el div padre con class 'linea' y borra ese div, click en agregar agrega al div #contenedor la cadena que contiene html en la variable linea
por eso si agregas inputs va a ser lo mismo

para sumar tengo la funcion que selecciono los campos cantidad, sumo y muestro el valor en el input total, esa funcion la meto en el evento cuando se borra un campo para que me vuelva a calcular

Código HTML:

Ver original<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
    $( function (){
        var limite = 5;
        var linea = '<div class="linea">Precio: <input type="text" class="cantidad" name="cantidad" /><a href="#" class="borra">Eliminar</a></div>';
 
        $('#agrega').live('click', function (){
            if ( $('#contenedor .linea').length < limite)
                $('#contenedor').append(linea);
        });
        
        $('#contenedor .borra').live('click', function(){
            $(this).closest('.linea').remove();
            calcularTotal();
        });
 
        $('#contenedor input.cantidad').live('keyup', function(){
            calcularTotal();
        });
    });
 
    function calcularTotal(){
        var total = parseInt(0);
        $('#contenedor input.cantidad[value!=""]').each( function (){
            total += parseInt( $(this).val() );
        });
        $('#total').val(total);
    }
    </script>
  </head>
  <style>
      #contenedor{margin-bottom:10px;}
      #contenedor .linea{margin-bottom:5px; background:#ccc; width:250px; padding:3px}
  </style>
<body>
    <div id="contenedor"></div>
    <a href="#" id="agrega">Agregar</a><br />
    Total: <input type="text" name="total" id="total" />
</body>
</html>

RucarMaN · #4 (**permalink**) 21/09/2010, 11:28

Dany_s...esta esta de lujo.....gracias....

pero, nunca falta el bendito pero....
le agregue mas campos texto..[pieza] - [cantidad] x [precio unitario] = [subtotal]
necesito que multiplique cantidad*precio unitario y resultado en subtotal y luego gran total...
es para realizar una cotización...
PD: sera que se endiente???