• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

LuBoc

Cálculo/Soma automática de valores em campos de um formulário

3 mensagens neste tópico

Olá,

Necessitava da vossa ajuda, se possível.

Tenho um formulário, este:

          <form method="POST" name="formCompra" action="pcompra.php">
            <table border="0" cellpadding="3" width="100%" id="table11" cellspacing="1">
              <tr>
                <td><font size="2" face="Tahoma"><b>Produtos</b></font><font face="Tahoma" size="1">  (seleccione a quantidade pretendida)</font></td>
              </tr>
              <tr>
                <td>
              
                <table border="0" cellpadding="4" width="100%" id="table12" cellspacing="1">
                  <tr>
                    <td align="center"><b><font size="2" face="Tahoma">Qtd.</font></b></td>
                    <td align="center"><b><font size="2" face="Tahoma">Designação do Produto</font></b></td>
                    <td align="center"><b><font size="2" face="Tahoma">Preço Unitário</font></b><font size="1" face="Tahoma"> (s/ IVA)</font></td>
                    <td align="center"><b><font size="2" face="Tahoma">Importância</font></b><font size="1" face="Tahoma"> (s/ IVA)</font></td>
                  </tr>
                  <tr>
                    <td>
                    <p align="center"><select size="1" name="qtdBD">
                    <option selected>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    </select></td>
                    <td align="left"><font face="Tahoma" size="2">Produto 1</font></td>
                    <td align="center"><input type="text" name="puBD" size="10" value="199.00" style="text-align: right" readonly></td>
                    <td align="center"><input type="text" name="impBD" size="10"  readonly></td>
                  </tr>
                  <tr>
                    <td align="center"><select size="1" name="qtdCG1">
                    <option selected>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    </select></td>
                    <td align="left"><font face="Tahoma" size="2">Produto 2</font></td>
                    <td align="center"><input type="text" name="puCG1" size="10" value="99.00" style="text-align: right" readonly></td>
                    <td align="center"><input type="text" name="impCG1" size="10" readonly></td>
                  </tr>
                  <tr>
                    <td align="center"><select size="1" name="qtdCG5">
                    <option selected>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    </select></td>
                    <td align="left"><font face="Tahoma" size="2">Produto 3</font></td>
                    <td align="center"><input type="text" name="puCG5" size="10" value="199.00" style="text-align: right" readonly></td>
                    <td align="center"><input type="text" name="impCG5" size="10" readonly></td>
                  </tr>
                  <tr>
                    <td align="center"><select size="1" name="qtdCG10">
                    <option selected>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    </select></td>
                    <td align="left"><font face="Tahoma" size="2">Produto 4</font></td>
                    <td align="center"><input type="text" name="puCG10" size="10" value="299.00" style="text-align: right" readonly></td>
                    <td align="center"><input type="text" name="impCG10" size="10" readonly></td>
                  </tr>
                  <tr>
                    <td align="center" colspan="4">
                    <hr noshade color="#808080" size="1"></td>
                  </tr>
                  <tr>
                    <td align="center"> </td>
                    <td align="right" colspan="2"><b><font size="2" face="Tahoma">Soma</font></b></td>
                    <td align="center"><input type="text" name="impSoma" size="20"></td>
                  </tr>
                  <tr>
                    <td align="center"> </td>
                    <td align="right" colspan="2"><b><font size="2" face="Tahoma">Total IVA (21%):</font></b></td>
                    <td align="center"><input type="text" name="impIVA" size="20"></td>
                  </tr>
                  <tr>
                    <td align="center"> </td>
                    <td align="right" colspan="2"><b><font size="2" face="Tahoma">Total a Pagar:</font></b></td>
                    <td align="center"><input type="text" name="impTotal" size="20"></td>
                  </tr>
                  </table>
              
                </td>
              </tr>
            </table>
<p align="center"><input type="submit" value="Enviar" name="btEnviar"></p>            
</form>  

E pretendia que o utilizador ao mudar a Drop-Down Box (no OnChange() dela), fizesse o cálculo na coluna "Importância" (Qtd x Preço Unitário) e depois, na mesma altura, actualizasse os campos "Soma", "Total IVA" e "Total a Pagar".

Os poucos conhecimentos de javascript não me permitem conseguir colocar isso a dar, dessa forma pretendida.

Será que me podiam dar uma ajuda?  :-[

Agradeço os comentários, sugestões ou código.

Fiquem Bem,

LuBoc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ois

Tenta isto.

No IE funciona nos outros nao sei pq nao experimentei.

<html>
<head>
<title></title>
<script language="JavaScript">
function ChangeIt(qtId, puId, ImpId)
{
ImpId.innerText = qtId.selectedIndex * puId.value;
}
</script>
</head>
<body>
<form method="POST" name="formCompra" action="pcompra.php">
<table border="0" cellpadding="3" width="100%" id="table11" cellspacing="1">
<tr>
<td><font size="2" face="Tahoma"><b>Produtos</b></font><font face="Tahoma" size="1"> (seleccione a quantidade pretendida)</font></td>
</tr>
<tr>
<td>

<table border="0" cellpadding="4" width="100%" id="table12" cellspacing="1">
<tr>
<td align="center"><b><font size="2" face="Tahoma">Qtd.</font></b></td>
<td align="center"><b><font size="2" face="Tahoma">Designação do Produto</font></b></td>
<td align="center"><b><font size="2" face="Tahoma">Preço Unitário</font></b><font size="1" face="Tahoma"> (s/ IVA)</font></td>
<td align="center"><b><font size="2" face="Tahoma">Importância</font></b><font size="1" face="Tahoma"> (s/ IVA)</font></td>
</tr>
<tr>
<td>
<p align="center">
<select size="1" name="qtdBD" onchange="ChangeIt(qtdBD, puBD, impBD)">
<option selected>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td align="left"><font face="Tahoma" size="2">Produto 1</font></td>
<td align="center"><input type="text" name="puBD" size="10" value="199.00" style="text-align: right" readonly></td>
<td align="center"><input type="text" name="impBD" size="10" readonly></td>
</tr>
<tr>
<td align="center">
<select size="1" name="qtdCG1" onchange="ChangeIt(qtdCG1, puCG1, impCG1)">
<option selected>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td align="left"><font face="Tahoma" size="2">Produto 2</font></td>
<td align="center"><input type="text" name="puCG1" size="10" value="99.00" style="text-align: right" readonly></td>
<td align="center"><input type="text" name="impCG1" size="10" readonly></td>
</tr>
<tr>
<td align="center">
<select size="1" name="qtdCG5" onchange="ChangeIt(qtdCG5, puCG5, impCG5)">
<option selected>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td align="left"><font face="Tahoma" size="2">Produto 3</font></td>
<td align="center"><input type="text" name="puCG5" size="10" value="199.00" style="text-align: right" readonly></td>
<td align="center"><input type="text" name="impCG5" size="10" readonly></td>
</tr>
<tr>
<td align="center">
<select size="1" name="qtdCG10" onchange="ChangeIt(qtdCG10, puCG10, impCG10)">
<option selected>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td align="left"><font face="Tahoma" size="2">Produto 4</font></td>
<td align="center"><input type="text" name="puCG10" size="10" value="299.00" style="text-align: right" readonly></td>
<td align="center"><input type="text" name="impCG10" size="10" readonly></td>
</tr>
<tr>
<td align="center" colspan="4">
<hr noshade color="#808080" size="1"></td>
</tr>
<tr>
<td align="center"> </td>
<td align="right" colspan="2"><b><font size="2" face="Tahoma">Soma</font></b></td>
<td align="center"><input type="text" name="impSoma" size="20"></td>
</tr>
<tr>
<td align="center"> </td>
<td align="right" colspan="2"><b><font size="2" face="Tahoma">Total IVA (21%):</font></b></td>
<td align="center"><input type="text" name="impIVA" size="20"></td>
</tr>
<tr>
<td align="center"> </td>
<td align="right" colspan="2"><b><font size="2" face="Tahoma">Total a Pagar:</font></b></td>
<td align="center"><input type="text" name="impTotal" size="20"></td>
</tr>
</table>

</td>
</tr>
</table>
<p align="center"><input type="submit" value="Enviar" name="btEnviar"></p> 
</form>

</body>
</html>

Espero k ajude.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

Obrigado NCS_One, foi de grande ajuda.

Fiz algumas alterações na função, ficou assim:

<script type="text/javascript"><!--

function ChangeIt(qtId, puId, ImpId)
{
  ImpId.innerText = euro(qtId.selectedIndex * puId.value);
  document.orderform.impSoma.value  = euro(parseFloat(document.orderform.impBD.value) + parseFloat(document.orderform.impCG1.value) + parseFloat(document.orderform.impCG5.value) + parseFloat(document.orderform.impCG10.value));
  document.orderform.impIVA.value   = euro(parseFloat(document.orderform.impSoma.value * 1.21) - parseFloat(document.orderform.impSoma.value));
  document.orderform.impTotal.value = euro(parseFloat(document.orderform.impSoma.value) + parseFloat(document.orderform.impIVA.value));

}

function euro(amount)
{
        amount = parseInt(amount * 100);
        amount = parseFloat(amount/100);
        if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
        {
                amount = amount + ".00"
                return amount;
        }
        if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
        {
                amount = amount + "0";
                return amount;
        }
        if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
        {
                amount = amount;
                return amount;
        }
        return amount;
}

//-->
</script>

Em que ao mudar a Drop-Down vai actualizar as caixas de "Soma", "Total IVA" e "Total a Pagar". Adicionei uma função genérica para formatar o número para o Euro, que encontrei algures na web.

Claro que não é a melhor solução (a parte de actualizar as caixas), visto o ideal seria uma função genérica, independentemente da quantidade de produtos. Se alguém conseguir optimizar, por favor, dê a sua contribuição.

Acontece que no Firefox não está a funcionar  :thumbsup:, alguém consegue colocar a dar para os diversos navegadores?!

Agradeço ajuda,

LuBoc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora