Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: tecasoft en 24 Diciembre 2012, 23:43 pm


Título: no me funciona el iva
Publicado por: tecasoft en 24 Diciembre 2012, 23:43 pm
no me funciona el iva solo va cuando voy a la casilla descuentos. Algun experto en javascript:

index.php

Código:
<!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>Factura</title>

<link rel='stylesheet' type='text/css' href='css/style.css' />
<link rel='stylesheet' type='text/css' href='css/print.css' media="print" />
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='js/example.js'></script>

</head>

<body>

<div id="page-wrap">

<textarea id="header">FACTURA</textarea>

<div id="identity">

            <textarea id="address">C/hggjghih
hgfdhgfh
jhgfjhgjhgjjghm

Tel: 960644545
Movil: 658532458</textarea>

            <div id="logo">

              <div id="logoctr">
                <a href="javascript:;" id="change-logo" title="Change logo">Cargar Logo</a>
                <a href="javascript:;" id="save-logo" title="Save changes">Guardar Logo</a>
                |
                <a href="javascript:;" id="delete-logo" title="Delete logo">Borrar Logo</a>
                <a href="javascript:;" id="cancel-logo" title="Cancel changes">Cancelar</a>
              </div>

              <div id="logohelp">
                <input id="imageloc" type="text" size="50" value="" /><br />
                (max width: 540px, max height: 100px)
              </div>
              <img id="image" src="images/logo.png" alt="logo" />
            </div>

</div>

<div style="clear:both"></div>

<div id="customer">

            <textarea id="customer-title">empresa</textarea>

            <table id="meta">
                <tr>
                    <td class="meta-head">Numero factura</td>
                    <td><textarea>000123</textarea></td>
                </tr>
                <tr>

                    <td class="meta-head">Fecha</td>
                    <td><textarea id="date">December 15, 2009</textarea></td>
                </tr>
                <tr>
                    <td class="meta-head">Total factura</td>
                    <td><div class="due">0.00€</div></td>
                </tr>

            </table>

</div>

<table id="items">

 <tr>
     <th>Servicio</th>
     <th>Descripción</th>
     <th>Precio Unidad</th>
     <th>Cantidad</th>
     <th>Precio</th>
 </tr>
 
 <tr class="item-row">
     <td class="item-name"><div class="delete-wpr"><textarea>Psicologa</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
     <td class="description"><textarea>Visita a domicilio</textarea></td>
     <td><textarea class="cost">50.00€</textarea></td>
     <td><textarea class="qty">1</textarea></td>
     <td><span class="price">50.00€</span></td>
 </tr>
 
 <tr class="item-row">
     <td class="item-name"><div class="delete-wpr"><textarea>Terapia</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
     <td class="description"><textarea>Visita a domicilio</textarea></td>
     <td><textarea class="cost">35.00€</textarea></td>
     <td><textarea class="qty">1</textarea></td>
     <td><span class="price">35.00€</span></td>
 </tr>
 
 <tr class="item-row">
     <td class="item-name"><div class="delete-wpr"><textarea>Desplazamiento</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
     <td class="description"><textarea>Desplazamiento a domicilio</textarea></td>
     <td><textarea class="cost">20.00€</textarea></td>
     <td><textarea class="qty">1</textarea></td>
     <td><span class="price">20.00€</span></td>
 </tr>
 
 <tr id="hiderow">
   <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Añadir servicio</a></td>
 </tr>
 
 <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">Subtotal</td>
     <td class="total-value"><div id="subtotal">105.00€</div></td>
 </tr>
 <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">Descuentos</td>

     <td class="total-value"><textarea id="paid">0.00€</textarea></td>
 </tr>
 <tr>

     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">Total</td>
     <td class="total-value"><div class="total">105.00€</div></td>
 </tr>
 <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line">IVA</td>
     <td class="total-value"><textarea id="paid2">21</textarea>%<div id="totaliva">0.00€</div></td>
 </tr>
 <tr>
     <td colspan="2" class="blank"> </td>
     <td colspan="2" class="total-line balance">Total factura</td>
     <td class="total-value balance"><div class="due">105.00€</div></td>
 </tr>

</table>


</div>

</body>

</html>


example.js

Código:
function print_today() {
  // ***********************************************
  // AUTHOR: WWW.CGISCRIPT.NET, LLC
  // URL: http://www.cgiscript.net
  // Use the script, just leave this message intact.
  // Download your FREE CGI/Perl Scripts today!
  // ( http://www.cgiscript.net/scripts.htm )
  // ***********************************************
  var now = new Date();
  var months = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre');
  var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
  function fourdigits(number) {
    return (number < 1000) ? number + 1900 : number;
  }
  var today =  months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear()));
  return today;
}

// from http://www.mediacollege.com/internet/javascript/number/round.html
function roundNumber(number,decimals) {
  var newString;// The new rounded number
  decimals = Number(decimals);
  if (decimals < 1) {
    newString = (Math.round(number)).toString();
  } else {
    var numString = number.toString();
    if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
      numString += ".";// give it one at the end
    }
    var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
    var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
    var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
    if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
      if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
        while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
          if (d1 != ".") {
            cutoff -= 1;
            d1 = Number(numString.substring(cutoff,cutoff+1));
          } else {
            cutoff -= 1;
          }
        }
      }
      d1 += 1;
    }
    if (d1 == 10) {
      numString = numString.substring(0, numString.lastIndexOf("."));
      var roundedNum = Number(numString) + 1;
      newString = roundedNum.toString() + '.';
    } else {
      newString = numString.substring(0,cutoff) + d1.toString();
    }
  }
  if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
    newString += ".";
  }
  var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
  for(var i=0;i<decimals-decs;i++) newString += "0";
  //var newNumber = Number(newString);// make it a number if you like
  return newString; // Output the result to the form field (change for your purposes)
}

function update_total() {
  var total = 0;
  $('.price').each(function(i){
    price = $(this).html().replace("€","");
    if (!isNaN(price)) total += Number(price);
  });

  total = roundNumber(total,2);

  $('#subtotal').html(total+"€");
  $('#total').html(total+"€");
  
  update_balance();
}

/*function update_balance() {
  var due = $("#total").html().replace("€","") - $("#paid").val().replace("€","");
  due = roundNumber(due,2);
  
  $('.due').html(due+"€");
}*/



function update_balance() {
  var total = $("#subtotal").html().replace("€","") - $("#paid").val().replace("€","");
  total = roundNumber(total,2);
  $('.total').html(total+"€");
    
  
  totaldue = (total)/(100)* $("#paid2").val();
  totaldue = roundNumber(totaldue,2);
  $('#totaliva').html(totaldue+"€");
  
  total=parseInt(total);
  totaldue=parseInt(totaldue);
  
  due=total+totaldue;
  due = roundNumber(due,2);
  $('.due').html(due+"€");
  
}




function update_price() {
  var row = $(this).parents('.item-row');
  var price = row.find('.cost').val().replace("€","") * row.find('.qty').val();
  price = roundNumber(price,2);
  isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price+"€");
  
  update_total();
}


function bind() {
  $(".cost").blur(update_price);
  $(".qty").blur(update_price);
}

$(document).ready(function() {

  $('input').click(function(){
    $(this).select();
  });

  $("#paid").blur(update_balance);
  
  $("#addrow").click(function(){
    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea>Nuevo servicio</textarea><a class="delete" href="javascript:;" title="Borrar servicio">X</a></div></td><td class="description"><textarea>Descripción</textarea></td><td><textarea class="cost">0.00€</textarea></td><td><textarea class="qty">0</textarea></td><td><span class="price">0.00€</span></td></tr>');
    if ($(".delete").length > 0) $(".delete").show();
    bind();
  });
  
  bind();
  
  $(".delete").live('click',function(){
    $(this).parents('.item-row').remove();
    update_total();
    if ($(".delete").length < 2) $(".delete").hide();
  });
  
  $("#cancel-logo").click(function(){
    $("#logo").removeClass('edit');
  });
  $("#delete-logo").click(function(){
    $("#logo").remove();
  });
  $("#change-logo").click(function(){
    $("#logo").addClass('edit');
    $("#imageloc").val($("#image").attr('src'));
    $("#image").select();
  });
  $("#save-logo").click(function(){
    $("#image").attr('src',$("#imageloc").val());
    $("#logo").removeClass('edit');
  });
  
  $("#date").val(print_today());
  
});

style.css

Código:
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }

textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }

#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }

#address { width: 250px; height: 150px; float: left; }
#customer { overflow: hidden; }

#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 540px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }

#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right;  }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }

#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }

#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}

textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }

.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }

print.css

Código:
#hiderow,
.delete {
  display: none;
}

Título: Re: no me funciona el iva
Publicado por: #!drvy en 27 Diciembre 2012, 16:12 pm
Funcionar te funciona lo que pasa es que se actualiza cuando pierde el focus.

Lo que no entiendo es porque usas textarea en vez de input. Imagínate que el cliente le da a la tecla "enter" en vez de hacer que pierda focus... el resultado del precio final seria NaN.00€....

Aparte porque metes el € en el campo de texto ? Déjalo fuera y así no lo tienes que eliminar ni nada.

Si quieres que te muestre el IVA desde el primer momento añade un document ready con la funcion update_balance().

Código
  1. $(document).ready(function() {
  2.   update_balance();
  3. });

Saludos

Título: Re: no me funciona el iva
Publicado por: tecasoft en 30 Diciembre 2012, 19:19 pm
poniendo eso me carga el iva correctamente, pero y si lo cambio el iva, tengo que volver a la casilla de descuento clickear para que cargue el iva.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines