Formulario subtotales

Iniciado por bgnumis, 6 Junio 2016, 08:25 AM

0 Miembros y 2 Visitantes están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

bgnumis

6 Junio 2016, 08:25 AM
Hola, quiero hacer un formulario de gastos, buceando por internet he visto algo que funciona:

Código (php) [Seleccionar]


Quantity: Unit price: Amount:

Quantity: Unit price: Amount:

Quantity: Unit price: Amount:

Quantity: Unit price: Amount:

Quantity: Unit price: Amount:

Quantity: Unit price: Amount:

Total All:




PREGUNTA 1

Se supone que para que multiplique y haga el total necesito este código de js, donde debo colocar esto para que calcule?:



Código (php) [Seleccionar]




$(".qty").on('input', function () {
    var self = $(this);
    var unitVal = self.next().val();
    self.next().next().val(unitVal * self.val());
   fnAlltotal();
});

$(".unit").on('input', function () {
    var self = $(this);
    var qtyVal = self.prev().val();
    self.next().val(qtyVal * self.val());
  fnAlltotal();
});

function fnAlltotal(){
  var total=0
    $(".amount").each(function(){
         total += parseFloat($(this).val()||0);
    });
    $(".result").val(total);

}





PREGUNTA 2

Si utilizo dos subtotales en la página (utilizando el código anterior) pero dos veces (uno son gastos de alojamiento y otro bloque con su subtotal que sea gastos de desplazamiento) ¿Cómo conseguiría el total (suma de los dos subtotales?


PREGUNTA 3:

Si los campos de Quantity, total, etc quisiera que se guardaran en una tabla que quedara en la bdd mysql phpmyadmin (me explico fatal) ¿Cómo debería ponerlo en los campos? ¿Qué introducciones debería añadir?

Sé que son muchas cosas a ver si me podeis orientar

gAb1

#1
6 Junio 2016, 10:57 AM
Esta pregunta no debería ir en el subforo PHP  (menos la ultima  :-\)

1. Siempre en el apartado <head> de tu web, ya sea en un archivo .js incluido en <script src="/path/to/scripts.js"></script> o entre las mismas etiquetas <script>código js</script>.

2. ¿Te estás respondiendo tu mismo o es que quieres un ejemplo?  ;D Como dices, hay que sumar los dos valores. Si los valores están en el campo .result, dales otro nombre a cada uno: .alojamiento y .desplazamiento y simplemente los sumas una vez ambos estén calculados:

Código (javascript) [Seleccionar]
var alojamiento    = $(".alojamiento").val(),
   desplazamiento = $(".desplazamiento").val();

$('.total').val(alojamiento + desplazamiento);

Siendo total el campo donde muestras la suma de ambos.

3. Para guardar en la db solo tienes que coger los datos (igual que hago arriba) y enviarlos por ajax (preferiblemente usando post) a un script php que haga la petición a mysql. Hay mil ejemplos de ajax en el apartado programación web o directamente ver la función de jQuery .post() que hace lo que necesitas. Y la parte de PHP es simplemente eso, una query a mysql introduciendo lo que quieres (post) en la tabla que quieras: Coger lo que viene por post y usarlo en la query.

bgnumis

#2
6 Junio 2016, 21:18 PM
Hola gAb1 lo primero mil gracias.

Estoy intentándo crear un archivo js y que lo lea pero nada...qué horror. Mira de aqui me saqué el código que estaba probando

http://jsfiddle.net/ch510dk3/2/

Se que es hacer trampas pero tú podrías ponerme un ejemplo de como haría rodar eso en un html o php¿?

A ver si me hechas un cable...

gAb1

#3
6 Junio 2016, 23:15 PM
Si claro, para eso estamos  ::)

Le he hecho unos arreglos a ese script para que haga lo que quieras o lo que he entendido que querias: http://jsfiddle.net/ch510dk3/17/

Código (javascript) [Seleccionar]
function fnAlltotal() {
    var alojamiento_total    = 0,
        desplazamiento_total = 0;

    $(".amount-aloj").each(function() {
         alojamiento_total += parseFloat($(this).val()||0);
    });
    $(".amount-desp").each(function() {
         desplazamiento_total += parseFloat($(this).val()||0);
    });
    $(".alojamiento").val(alojamiento_total);
    $(".desplazamiento").val(desplazamiento_total);
    $('.total').val((alojamiento_total + desplazamiento_total).toFixed(2));

}

Para mostrar dos deciamales puedes usar .toFixed(2). Y los inputs que quieras que no se pueda escribir (solo leer) puedes ponerle readonly (mejor que disabled).

Para lo de php ya te dije como hacerlo, ademas tienes mil ejemplos en otras preguntas como la tuya. El otro dia puse un ejemplo en el foro de programación web. Mira bien que este tema esta muy visto en el foro (y en todas partes) y para eso está, para buscar lo que necesites y si no lo encuentras entonces se pregunta (no podemos estar repitiendo una y otra vez lo mismo  :-\).

bgnumis

#4
7 Junio 2016, 09:48 AM
Mil gracias.

Yo veo que funciona, pero cuando lo pongo todo en el php, un rueda?

Donde está lo que no veo? La idea es poner en el head el código js y luego llamar a la función en el body no?

Código (php) [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>


<script language="javascript" >
function fnAlltotal() {
var alojamiento_total = 0,
      desplazamiento_total = 0;

    $(".amount-aloj").each(function(){
         alojamiento_total += parseFloat($(this).val()||0);
    });
    $(".amount-desp").each(function(){
         desplazamiento_total += parseFloat($(this).val()||0);
    });
    $(".alojamiento").val(alojamiento_total);
    $(".desplazamiento").val(desplazamiento_total);
  $('.total').val((alojamiento_total + desplazamiento_total).toFixed(2));

}

$(".unit").on('keyup', function () {
    var self = $(this),
      qtyVal = self.prev().val();

    self.next().val(qtyVal * self.val());
  fnAlltotal();
});

$(".qty").on('keyup', function () {
    var self = $(this),
        unitVal = self.next().val();
    self.next().next().val(unitVal * self.val());
   fnAlltotal();
});

</script>

</head>

<body>

PAGOS



<br />
<br />

<div class="alojamiento-box">
    <div>Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class='amount-aloj' readonly />
    </div>
    <div>Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class='amount-aloj' readonly />
    </div>
    <div>Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class='amount-aloj' readonly />
    </div>Sub Total:
    <input type="text" class="alojamiento" readonly />
</div>
<div class="desplazamiento-box">
    <div>Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit /">Amount:
        <input type='text' class='amount-desp' readonly />
    </div>
    <div>Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class='amount-desp' readonly />
    </div>
    <div>Quantity:
        <input type="text" class="qty" />Unit price:
        <input type="text" class="unit" />Amount:
        <input type='text' class='amount-desp' readonly />
    </div>Sub Total:
    <input type="text" class="desplazamiento" readonly />
</div><br />
Total All: <input type="text" class="total" readonly />

<br>
<br>
<br>


<script languaje="javascript">
fnAlltotal();
</script>


</body>
</html>




Esto no me rueda, calcula nada incluso poniendo, en el body:


Código (php) [Seleccionar]


<?php 
<script languaje="javascript"> 
fnAlltotal();
</script> 
 ?>



Siento la pregunta tonta, pero no consigo que "actue" el js

gAb1

#5
7 Junio 2016, 21:44 PM
Si no te funciona es porque no estás usando la libreria jQuery, la incluyo en el ejemplo de abajo. Y seguiria sin funcionar por que se te olvidó poner el script dentro de un document ready. Abajo dejo el código completo y listo para funcionar.

Estamos en 2016! Usa HTML 5!  ;D

Para declarar el tipo de lenguaje es con el atributo type="text/javascript".

Incluyo las nuevas etiquetas HTML 5 para que sea más facil estructurar y organizar mejor el código html:

Código (html5) [Seleccionar]
<!DOCTYPE html>
<html>

    <head>

        <meta http-equiv="Content-Type" content="Text/HTML" charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Nombre Web</title>

        <link type="text/css" rel="stylesheet" media="all" href="css/styles.css" />

        <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>

        <script type="text/javascript">
            $(function () {

                function fnAlltotal() {
                        var alojamiento_total    = 0,
                            desplazamiento_total = 0;

                    $('.amount-aloj').each(function () {
                        alojamiento_total += parseFloat($(this).val() || 0);
                    });
                    $('.amount-desp').each(function () {
                        desplazamiento_total += parseFloat($(this).val() || 0);
                    });
                    $('.alojamiento').val(alojamiento_total);
                    $('.desplazamiento').val(desplazamiento_total);
                    $('.total').val((alojamiento_total + desplazamiento_total).toFixed(2));

                }

                $('.unit').on('keyup', function () {
                    var self = $(this),
                        qtyVal = self.prev().val();

                    self.next().val(qtyVal * self.val());
                    fnAlltotal();
                });

                $('.qty').on('keyup', function () {
                    var self = $(this),
                        unitVal = self.next().val();

                    self.next().next().val(unitVal * self.val());
                    fnAlltotal();
                });

            });
        </script>

    </head>

    <body>

        <header>
           
        </header>

        <main>

            <div id="invoice">

                <h3>PAGOS</h3>

                <div class="alojamiento-box">
                    <div>Quantity:
                        <input type="text" class="qty" />Unit price:
                        <input type="text" class="unit" />Amount:
                        <input type="text" class="amount-aloj" readonly />
                    </div>
                    <div>Quantity:
                        <input type="text" class="qty" />Unit price:
                        <input type="text" class="unit" />Amount:
                        <input type="text" class="amount-aloj" readonly />
                    </div>
                    <div>Quantity:
                        <input type="text" class="qty" />Unit price:
                        <input type="text" class="unit" />Amount:
                        <input type="text" class="amount-aloj" readonly />
                    </div>Sub Total:
                    <input type="text" class="alojamiento" readonly />
                </div>

                <div class="desplazamiento-box">
                    <div>Quantity:
                        <input type="text" class="qty" />Unit price:
                        <input type="text" class="unit /">Amount:
                        <input type="text" class="amount-desp" readonly />
                    </div>
                    <div>Quantity:
                        <input type="text" class="qty" />Unit price:
                        <input type="text" class="unit" />Amount:
                        <input type="text" class="amount-desp" readonly />
                    </div>
                    <div>Quantity:
                        <input type="text" class="qty" />Unit price:
                        <input type="text" class="unit" />Amount:
                        <input type="text" class="amount-desp" readonly />
                    </div>Sub Total:
                    <input type="text" class="desplazamiento" readonly />
                </div><br />
                Total All: <input type="text" class="total" readonly />

            </div>

        </main>

        <footer>
           
        </footer>

    </body>

</html>

El header es donde pondrías el menu, el banner... main como indica: el contenido principal, y footer lo mismo: el copyright, etc.

También puedes quitar el script del html y ponerlo en un archivo scripts.js y ahí los pones todos juntos. A menos que necesites imprimir algo de php en el script.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario