Somar campos de formulario (JAVASCRIPT)

Wilder · Janeiro 6, 2009

Pessoal, preciso somar alguns campos dentro de um formulario. Seguinte:

Enserir um valor (Reais) no campo A (exemplo 107.141,00)

Preciso que o campo B calcule na mesma hora 3% desse valor que o usuário inserir sem os centavos (exemplo 3.214,00)

O campo C calcule 1,4% desse valor (de A também sem os centavos - q sempre apareça xxxx,00)...

E o campo D calcule 0,4% do valor inserido no campo A sendo que se for acima de 650,00, ele apareça 650,00

Me ajudem por favor.

Obrigado

flavio · Janeiro 7, 2009

Poste seu código. O que você fez até agora? Entendi o problema, mas qual sua dúvida, de fato?

Jonathan Queiroz · Janeiro 7, 2009

É algo simples, mas seria necessário ver seu código antes !

Ficaria algo como:

function Calcula() {
valor_a = parseFloat(document.formulario1.campo_a.value)
valor_b = parseInt(valor_a*3/100)
valor_c = parseInt(valor_a*1.4/100)
valor_d = valor_a*0.4/100
//Mostra apenas duas casas decimais do campo D
valor_d = parseInt(valor_d*100)/100

if (valor_d>650) {
valor_d = 650
}

document.formulario1.campo_b.value = valor_b
document.formulario1.campo_c.value = valor_c
document.formulario1.campo_d.value = valor_d
}

Para fazer com que o campo seja atualizado quando algo for digitado, chame a função no evento onchange do campo A

Como pode perceber, o campo D mostra um valor com até duas casas decimais !

Obs.:

O código não faz nenhuma verificação se o valor é realmente um número

Qualquer dúvida poste o código completo aqui, mas recomendo que comece a aprender JavaScript !

Dessa forma, ficará muito mais fácil de se fazer as modificações necessárias

Wilder · Janeiro 7, 2009

Ok amigo, consegui fazer o q eu queria.. muito obrigado. Fiz assim?

<script type="text/javascript">

function Calcula() {
valor_a = parseFloat(document.formulario1.valor_unidade.value)
valor_b = parseInt(valor_a*3/100)

valor_c = valor_b*40/100
//Mostra apenas duas casas decimais do campo C
valor_c = parseInt(valor_c*100)/100

valor_e = valor_b*8/100
//Mostra apenas duas casas decimais do campo E
valor_e = parseInt(valor_e*100)/100

valor_f = valor_b*52/100
//Mostra apenas duas casas decimais do campo F
valor_f = parseInt(valor_f*100)/100

valor_d = valor_a*0.4/100
//Mostra apenas duas casas decimais do campo D
valor_d = parseInt(valor_d*100)/100

if (valor_d>650) {
valor_d = 650
}

document.formulario1.valor_assessoria.value = valor_b
document.formulario1.comissao_corretor.value = valor_c
document.formulario1.valor_analise.value = valor_d
document.formulario1.comissao_gerente.value = valor_e
document.formulario1.comissao_vip.value = valor_f
}
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}


</script>

<form id="formulario1" name="formulario1" method="post" action="">
  <p><br />
  </p>
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><table width="628" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="3" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
        </tr>
        <tr>
          <td width="1" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          <td width="518"><table width="100%" border="0" cellspacing="4" cellpadding="0">
            <tr>
              <td width="200" align="right"><span class="style2">Valor Unidade:</span></td>
              <td width="286">R$
                <input name="valor_unidade" type="text" onchange="MM_callJS('Calcula()')" id="valor_unidade" /></td>
            </tr>
          </table>
            <table width="100%" border="0" cellspacing="4" cellpadding="0">
              <tr>
                <td width="200" align="right"><span class="style2">Valor Assessoria:</span></td>
                <td width="286">R$
                  <input name="valor_assessoria"  type="text"  id="valor_assessoria" />
                  (3%)</td>
              </tr>
            </table>
            <table width="100%" border="0" cellspacing="4" cellpadding="0">
              <tr>
                <td width="200" align="right"> </td>
                <td width="286"> </td>
              </tr>
            </table></td>
          <td width="81" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
        </tr>
        <tr>
          <td colspan="3" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
        </tr>
      </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="9" align="right"><img src="icon/linhasbancas.gif" width="1" height="1" /></td>
          </tr>
        </table>
        <table width="520" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="3" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          </tr>
          <tr>
            <td width="1" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
            <td><table width="100%" border="0" cellspacing="4" cellpadding="0">
              <tr>
                <td width="208" align="right"><span class="style2">Comissão corretor:</span></td>
                <td width="371">R$
                  <input name="comissao_corretor" type="text"  id="comissao_corretor" />
                  (40% da assessoria)</td>
              </tr>
            </table>
              <table width="100%" border="0" cellspacing="4" cellpadding="0">
                <tr>
                  <td width="208" align="right"><span class="style2">Comissão Gerente:</span></td>
                  <td width="389">R$
                    <input name="comissao_gerente" type="text"  id="comissao_gerente" />
                    (8% da assessoria)</td>
                </tr>
              </table>
              <table width="100%" border="0" cellspacing="4" cellpadding="0">
                <tr>
                  <td width="208" align="right"><span class="style2">Comissão empresa:</span></td>
                  <td width="394">R$
                    <input name="comissao_vip" type="text"  id="comissao_vip" />
                    (52% da assessoria)</td>
                </tr>
              </table></td>
            <td width="1" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          </tr>
          <tr>
            <td colspan="3" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="9" align="right"><img src="icon/linhasbancas.gif" width="1" height="1" /></td>
          </tr>
        </table>
        <table width="520" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="3" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          </tr>
          <tr>
            <td width="1" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
            <td><table width="100%" border="0" cellspacing="4" cellpadding="0">
              <tr>
                <td width="200" align="right"><span class="style2">Valor Análise:</span></td>
                <td width="288"><label> R$
                  <input name="valor_analise" type="text"  id="valor_analise" />
                  (0,4% da unidade)</label></td>
              </tr>
            </table></td>
            <td width="1" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          </tr>
          <tr>
            <td colspan="3" background="icon/linhas.gif"><img src="icon/linhas.gif" width="1" height="1" /></td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="2" align="right"><img src="icon/linhasbancas.gif" width="1" height="1" /></td>
          </tr>
        </table></td>
    </tr>
  </table>
  <p>  </p>
</form>

Obrigado mesmo.

Amigo to precisando agora criar um selct dinamicamente com o javascript. Consegui criar um unput, so que não consigo usar o mesmo caminho para o select. Segue o input:

function addInput_valor()
{

  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'valor'+input_cont);
  input.setAttribute('id', 'valor'+input_cont);
  input.setAttribute('value', '');
  input.setAttribute("class", "campos_form04"); 
  input.setAttribute("className", "campos_form04"); // para o IE

  var add_input_div = document.getElementById('add_input_div');
  add_input_div.appendChild(input);

  input_cont++;

}[/codebox]

Preciso que o select criado seja assim:

[codebox] <select name="Destino" id="Destino">
<option>Selecione...</option>
<option value="Vip">Vip</option>
<option value="Corretor">Corretor</option>
<option value="MR">MR</option>
<option value="Analise">Analise</option>
</select>

Obrigado

Romerito · Janeiro 7, 2009

olá Wilder, tenta isso:

function criaSelect()
{
    var minhaDiv  = document.getElementById( "selec" );

    var newSelect = document.createElement( 'select' );
        newSelect.setAttribute( 'name' , 'Destino' );
        newSelect.setAttribute( 'id'   , 'Destino' );
        minhaDiv.appendChild( newSelect );

    var meuSelect = document.getElementById( 'Destino' );

        newOption = document.createElement( 'option' );
        newOption.innerHTML = 'Selecione...';
        meuSelect.appendChild( newOption );

        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , 'Vip' );
        newOption.innerHTML = 'Vip';
        meuSelect.appendChild( newOption );

        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , 'Corretor' );
        newOption.innerHTML = 'Corretor';
        meuSelect.appendChild( newOption );

        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , 'Mr' );
        newOption.innerHTML = 'Mr';
        meuSelect.appendChild( newOption );

        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , 'Analise' );
        newOption.innerHTML = 'Analise';
        meuSelect.appendChild( newOption );

}

abraço.

Wilder · Janeiro 9, 2009

Romerito, não estou conseguindo. Veja meu codigo:

&lt;script language="javascript">
// - Funcao para somar a quantidade de loop's- Inicio - //
var num = 0;

function soma(sinal){

    if (sinal == "+") num++;
    else if (sinal == "-" && num>1) num--;
    

document.form1.n_vezes.value = num;
var obj = document.getElementById("num");
obj.innerHTML = num;
document.getElementById("n_vezes").value = num;

}
// - Funcao para somar a quantidade de loop's- Inicio - //
// - Funcao para inserir input's- Inicio - //
var input_cont = 0;

function addInput_valor()
{

  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'valor'+input_cont);
  input.setAttribute('id', 'valor'+input_cont);
  input.setAttribute('value', '');
  input.setAttribute("class", "campos_form04"); 
  input.setAttribute("className", "campos_form04"); // para o IE

  var add_input_div = document.getElementById('add_input_div');
  add_input_div.appendChild(input);

  input_cont++;
  
}
var input_cont_data_saida = 0;
function addInput_data_saida()
{

  var input_data_saida = document.createElement('input');
  input_data_saida.setAttribute('type', 'text');
  input_data_saida.setAttribute('name', 'data'+input_cont_data_saida);
  input_data_saida.setAttribute('id', 'data'+input_cont_data_saida);
  input_data_saida.setAttribute('value', '<%=Day(Date()) & "/" & Month(Date()) & "/" & Year(Date())%>');
  input_data_saida.setAttribute("class", "campos_form03"); 
  input_data_saida.setAttribute("className", "campos_form03"); // para o IE

  var add_input_div_data_saida = document.getElementById('add_input_data_saida');
  add_input_div_data_saida.appendChild(input_data_saida);

  input_cont_data_saida++;
  
}
var input_cont_n_documento = 0;
function addInput_n_documento()
{

  var input_n_documento = document.createElement('input');
  input_n_documento.setAttribute('type', 'text');
  input_n_documento.setAttribute('name', 'n_documento'+input_cont_n_documento);
  input_n_documento.setAttribute('id', 'n_documento'+input_cont_n_documento);
  input_n_documento.setAttribute('value', '');
  input_n_documento.setAttribute("class", "campos_form04"); 
  input_n_documento.setAttribute("className", "campos_form04"); // para o IE

  var add_input_div_n_documento = document.getElementById('add_input_n_documento');
  add_input_div_n_documento.appendChild(input_n_documento);

  input_cont_n_documento++;
  
}
var input_cont_quitada = 0;
function addInput_quitada()
{

  var input_quitada = document.createElement('input');
  input_quitada.setAttribute('type', 'checkbox');
  input_quitada.setAttribute('name', 'quitada'+input_cont_quitada);
  input_quitada.setAttribute('id', 'quitada'+input_cont_quitada);
  input_quitada.setAttribute('value', 'Sim');


  var add_input_div_quitada = document.getElementById('add_input_quitada');
  add_input_div_quitada.appendChild(input_quitada);

  input_cont_quitada++;
  
}
var input_cont_destino = 0;
function addInput_destino()
{

  var input_destino = document.createElement('input');
  input_destino.setAttribute('type', 'text');
  input_destino.setAttribute('name', 'destino'+input_cont_destino);
  input_destino.setAttribute('id', 'destino'+input_cont_destino);
  input_destino.setAttribute('value', '');
  input_destino.setAttribute("class", "campos_form04"); 
  input_destino.setAttribute("className", "campos_form04"); // para o IE

  var add_input_div_destino = document.getElementById('add_input_destino');
  add_input_div_destino.appendChild(input_destino);

  input_cont_destino++;
  
}

Segue o div:

<table width="498" height="43" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="90" align="center" class="style2">N. Documento</td>
                <td width="65"  align="center" class="style2">Data saida:</td>
                <td width="90" align="center" class="style2">Valor:</td>
                <td width="90" align="center" class="style2">Destino</td>
                <td width="30" align="center" class="style2">                  Pg</td>
                <td width="155" align="center" class="style2"><span id="num"></span></span><img src="icon/linhas.gif" width="1" height="1" /></td>
              </tr>
              <tr>
                <td width="90" height="24" align="center" valign="top"><div class="campos_form04" id="add_input_n_documento"></div></td>
                <td height="24" align="center" valign="top"><div class="campos_form03" id="add_input_data_saida"></div></td>
                <td width="90" height="24" align="center" valign="top"><div class="campos_form04" id="add_input_div"></div></td>
                <td width="90" height="15" align="center" valign="top"><div class="campos_form04" id="add_input_destino"></div></td>
                <td width="30" height="15" align="center" valign="top"><div class="campos_form" id="add_input_quitada"></div></td>
                <td width="155" align="center" valign="top"><label>
                  <input type="button" class="campos_form" onClick="soma('+');addInput_valor();addInput_data_saida();addInput_n_documento();addInput_quitada();addInput_destino();criaSelect()" value="  +  " />
                  <input type="hidden" name="n_vezes" id="n_vezes" />
                </label></td>
              </tr>
            </table>

O campo destino esta sendo um input, não consigo gerar ele como select varias vezes de acordo com o restante.

Se não der para entender me retorne que tento colocar na web para você acessar.

Obrigado

Romerito · Janeiro 12, 2009

i aew camaradinha, saca só, tenta assim:

adiciona isso no seu script:

var conta_select = 0;
function criaSelect()
{
    var minhaDiv  = document.getElementById( "selec" );
    var Acampos   = new Array( "Selecione..." , "Vip" , "Corretor" , "Mr" , "Analise" );

    var newSelect = document.createElement( 'select' );
        newSelect.setAttribute( 'name' , 'Destino' + conta_select );
        newSelect.setAttribute( 'id'   , 'Destino' + conta_select );
        minhaDiv.appendChild( newSelect );

    var meuSelect = document.getElementById( 'Destino' + conta_select );

    for ( var i = 0; i <= 4; i++ )
    {
        newOption = document.createElement( 'option' );
        newOption.setAttribute( 'value' , Acampos[i] );
        newOption.innerHTML = Acampos[i];
        meuSelect.appendChild( newOption );
    }
    conta_select++;
}

e adiciona uma div na sua tabela com a id passada na função:

<td><div id="selec" name="selec"></div></td>

espero que funcione abraço.

Wilder · Janeiro 12, 2009

Ei amigo, bom dia.. consegui assim:

input_cont_destino=0
function addInput_destino()
{

if(navigator.appName == "Microsoft Internet Explorer"){
classe="className='campos_form04'"
}
else {
classe="class='campos_form04'"
}
//vip corretor mr analise
document.all['add_input_destino'].innerHTML+="<select name='destino"+input_cont_destino+"' id='destino"+input_cont_destino+"' "+classe+"><o"+"ption>Selecione</option><option value='Vipimovel'>Vipimóvel</option><option value='Corretor'>Corretor</option><option value='Gerente'>Gerente</option><option value='MRV'>MRV</option><op"+"tion value='Analise'>Análise</option></select>"
input_cont_destino++;
  
}

Só não funciona o class, sabe me dier porq?

valeu

Romerito · Janeiro 12, 2009

sei sim cara, coloca na var classe do primeiro if pra receber assim:

classe="class='campos_form04'"

abraço.

Entrar

Somar campos de formulario (JAVASCRIPT)

Pergunta

Wilder

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

flavio

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Wilder

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

Wilder

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

Wilder

Link para o comentário

Compartilhar em outros sites

Romerito

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades