0

Tenho esse site e preciso implementar uma soma com input[type=radio].

Essa é página onde faço as somas

Esse é o código JavaScript que faz as somas.

<script>
        function formatCurrency(num) { // função original - sem modificação
          num = num.toString().replace(/\$|\,/g, '');
          if (isNaN(num)) num = "0";
          cents = Math.floor((num * 100 + 0.5) % 100);
          num = Math.floor((num * 100 + 0.5) / 100).toString();
          if (cents < 10) cents = "0" + cents;
          for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
          return ("" + num + "." + cents);
        }

        var form = document.forms[0];
        var inputs = form.querySelectorAll('input[type=radio]');
        // iterar todos os inputs
        for (var i = 0; i < inputs.length; i++) {
          // vincular função ao evento "change"
          inputs[i].addEventListener('change', function() {
            var soma = 0;
            for (var j = 0; j < inputs.length; j++) {
              if (inputs[j].checked) {
                // interpreta como float, usando parseFloat ao invés de eval
                soma += parseFloat(inputs[j].value);
              }
            }
            form.hiddentotal.value = soma; // atribui valor ao campo oculto
            form.total.value = formatCurrency(soma) // exibe valor formatado
          }, false);
        }
                        </script>

Mas não aparece nada... ele não gera o resultado...

Neste outro link ele funciona perfeitamente... será que deve ser algo no código?

Link que funciona

2
  • Isso ai não é java, é javascript. São linguagens bem diferentes.
    – user28595
    Commented 2/08/2017 às 15:41
  • @Moltres desculpe :D Commented 2/08/2017 às 18:56

2 Respostas 2

2

Modificações a serem feitas

  • O formulario <form action="/teste.php" name="formulario" id="formulario" method="post">
  • Coloque valores value="10.00" e não nomes value="Com moldura" em todos os input type radio no sem moldura coloque value="0"
  • No script altere para var form = document.getElementById('formulario');

Abaixo um exemplo executável

function formatCurrency(num) { // função original - sem modificação
   num = num.toString().replace(/\$|\,/g, '');
   if (isNaN(num)) num = "0";
	cents = Math.floor((num * 100 + 0.5) % 100);
	num = Math.floor((num * 100 + 0.5) / 100).toString();
	if (cents < 10) cents = "0" + cents;
	  for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
	    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
	    return ("" + num + "." + cents);
}
							
	var form = document.getElementById('formulario');
	var inputs = form.querySelectorAll('input[type=radio]');
	// iterar todos os inputs
	for (var i = 0; i < inputs.length; i++) {
	  // vincular função ao evento "change"
	  inputs[i].addEventListener('change', function() {
	    var soma = 0;
	    for (var j = 0; j < inputs.length; j++) {
		if (inputs[j].checked) {
		  // interpreta como float, usando parseFloat ao invés de eval
		  soma += parseFloat(inputs[j].value);
		}
	    }
	    form.hiddentotal.value = soma; // atribui valor ao campo oculto
	    form.total.value = formatCurrency(soma) // exibe valor formatado
          }, false);
        }

function show2nomes() { 
 document.getElementById('show2nomes').style.display='';
 document.getElementById('show1nome').style.display='none';
}

function show1nome() {
 document.getElementById('show1nome').style.display='';
 document.getElementById('show2nomes').style.display='none';
}

function escondeMolduraDetalhe() {
 document.getElementById('escondeMolduraDetalhe').style.display='none';
 document.getElementById('showMolduraDetalhe').style.display='none';
}

function showMoldura() {
 document.getElementById('showMoldura').style.display='';
}
function showPessoas() {
 document.getElementById('showPessoas').style.display='';
}
function showMaterial() {
 document.getElementById('showMaterial').style.display='';
}
function showFormato() {
 document.getElementById('showFormato').style.display='';
}
function showMolduraDetalhe() {
 document.getElementById('showMolduraDetalhe').style.display='';
}
<div class="page_content_offset" id="anchor">
<div class="container">				
<div class="row clearfix">						
<!--<form name="formulario" id="dadosPlacas" action="/modulos/loja/funLoja.php?op=add&produto_id=" method="post" enctype="multipart/form-data">-->
<form action="/teste.php" name="formulario" id="formulario" method="post">												
						
<section class="col-lg-6 col-md-6 col-sm-6 m_xs_bottom_30 pull-right">								
<h4 class="text-center m_bottom_25"><strong>Dados para fabricação</strong></h4>
<h4 class="text-center m_bottom_25"><strong>TAMANHO DA MOLDURA</strong></h4>
<div class="row texto-radio">
																		
<div class="col-md-3">											
<input type="radio" value="1.00" name="tamanho" id="tamanho1" onClick="showPessoas();">
<label for="tamanho1">06x08 cm</label>										
</div>
<div class="col-md-3">											
<input type="radio" value="2.00" name="tamanho" id="tamanho2" onClick="showPessoas();">
<label for="tamanho2">08x10 cm</label>
</div>
<div class="col-md-3">											
<input type="radio" value="3.00" name="tamanho" id="tamanho3" onClick="showPessoas();">
<label for="tamanho3">09x12 cm</label>
</div>
<div class="col-md-3">											
<input type="radio" value="4.00" name="tamanho" id="tamanho4" onClick="showPessoas();">
<label for="tamanho4">11x14 cm</label>										
</div>																	        <div class="col-md-3">											
<input type="radio" value="5.00" name="tamanho" id="tamanho5" onClick="showPessoas();">
<label for="tamanho5">13x18 cm</label>
</div>
<div class="col-md-3">											
<input type="radio" value="6.00" name="tamanho" id="tamanho6" onClick="showPessoas();">
<label for="tamanho6">18x24 cm</label>
</div>
																			
</div>
								
<!-- FOTOS -->
<div id="showPessoas" style="display: none">
<hr>
<div class="row texto-radio">
<div class="col-lg-4 col-md-4 col-sm-12">
<h4 class="pt-20"><strong>PESSOAS NA FOTO</strong></h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<input type="radio"  value="10.00" name="imagem" id="campo-radio1" onChange="show1nome();" onClick="(show1nome(), showFormato());">
<label for="campo-radio1">1 PESSOA</label>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<input type="radio"  value="20.00" name="imagem" id="campo-radio2" onChange="show2nomes();" onClick="(show2nomes(), showFormato());">
<label for="campo-radio2">2 PESSOAS</label>
</div>
</div>
</div>
<!-- CAMADAS NOME INPUT -->
<div class="row">
<div id="show1nome" style="display: none;">
<input type="file" class="full_width">
</div>
</div>
<div class="row">
<div id="show2nomes" style="display: none;">
<div class="f_left half_column">
<label for="cf_name" class="required d_inline_b m_bottom_5">1ª foto</label>
<input type="file" id="cf_name" name="cf_name" class="full_width r_corners">
</div>
<div class="f_left half_column">
<label for="cf_name" class="required d_inline_b m_bottom_5">2ª foto</label>
<input type="file" id="cf_name" name="cf_name" class="full_width r_corners">
</div>
</div>
</div>									
<!--. CAMADAS NOME INPUT -->
<!--. FOTOS -->
									
<!-- FORMATO -->
<div id="showFormato" style="display: none">
<hr>
<div class="row texto-radio">
<div class="col-lg-4 col-md-4 col-sm-12">
<h4 class="pt-20"><strong>FORMATO</strong></h4>
</div>
										
<div class="col-lg-4 col-md-4 col-sm-12">										
<input type="radio" value="4.00" name="formato" id="formato1" onClick="showMoldura();">
<label for="formato1">Oval</label>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">										
<input type="radio" value="6.00" name="formato" id="formato2" onClick="showMoldura();">
<label for="formato2">Retangular</label>
</div>																				
										
</div>
</div>
									
<!-- MOLDURA -->
<div id="showMoldura" style="display: none">
<hr>									
<div class="row texto-radio">									
<div class="col-lg-4 col-md-4 col-sm-12">
<h4 class="pt-20"><strong>MOLDURA</strong></h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<input type="radio" value="0" name="moldura" id="sem-moldura" onClick="(escondeMolduraDetalhe(), showMaterial());">
<label for="sem-moldura">SEM MOLDURA</label>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<input type="radio"  value="10.00" name="moldura" id="com-moldura" onChange="showMolduraDetalhe();" onClick="showMolduraDetalhe();">
<label for="com-moldura">COM MOLDURA</label>
</div>									
</div>									
</div>
									  									   									
<!-- CAMADAS NOME INPUT -->
<div id="showMolduraDetalhe" style="display: none;">
<div class="row texto-radio">
<div class="col-lg-4 col-md-4 col-sm-12">&nbsp;</div>		
<div class="col-lg-4 col-md-4 col-sm-12">
<input type="radio"  value="6.00" name="modelo_moldura" id="modelo_moldura1" onClick="showMaterial();">
<label for="modelo_moldura1">Floral</label>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<input type="radio"  value="10.00" name="modelo_moldura" id="modelo_moldura2" onClick="showMaterial();">
<label for="modelo_moldura2">Lisa</label>
</div>
																					 									
</div>
</div>
									
<div class="row">
<div id="escondeMolduraDetalhe" style="display: none;">											
</div>
</div>									
<!--. CAMADAS NOME INPUT -->
  									
<!-- MATERIAL -->
<div id="showMaterial" style="display: none">
<hr>																		
<div class="row  texto-radio">
<div class="col-lg-4 col-md-4 col-sm-12">
<h4 class="pt-20"><strong>MATERIAL</strong></h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">											
<input type="radio" value="5.00" name="material" id="material1" onClick="(showPessoas(), showMaterial());">
<label for="material1">Alumínio</label>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">											
<input type="radio" value="10.00" name="material" id="material2" onClick="(showPessoas(), showMaterial());">
<label for="material2">Bronze</label>
</div>
</div>
</div>
<div>
<span>Valor Total:</span>
<input name="total" type="text" readonly disabled>
<input type="hidden" name="hiddentotal" value="0">
</div>
								  									
</section>							
</form>

exemplo em uma pagina online

4
0

o problema de não funcionar nesta página é que document.forms[0]; returna o primeiro formulário da página, neste caso, o formulário da pesquisa. atribua um id ao formulário que quer para fazer as contas, ou coloque (já que tem jquery):

var form = $(".page_content_offset form").first();

ALTERAÇÂO: Como o jquery é carregado depois desta função (o <script src="/js/jquery-2.1.1.min.js"></script> está depois), deve colocar dentro de um doc ready para executar só depois de carregar tudo. E como tens um id para formulário, podes "procurar" pelo id var form = $("#formulario");. Assim fica:

var form = document.forms[0];

<script>
        function formatCurrency(num) { // função original - sem modificação
          num = num.toString().replace(/\$|\,/g, '');
          if (isNaN(num)) num = "0";
          cents = Math.floor((num * 100 + 0.5) % 100);
          num = Math.floor((num * 100 + 0.5) / 100).toString();
          if (cents < 10) cents = "0" + cents;
          for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
          return ("" + num + "." + cents);
        }

    $( document ).ready( function () {
        var form = $("#formulario");
        var inputs = form.querySelectorAll('input[type=radio]');
        // iterar todos os inputs
        for (var i = 0; i < inputs.length; i++) {
          // vincular função ao evento "change"
          inputs[i].addEventListener('change', function() {
            var soma = 0;
            for (var j = 0; j < inputs.length; j++) {
              if (inputs[j].checked) {
                // interpreta como float, usando parseFloat ao invés de eval
                soma += parseFloat(inputs[j].value);
              }
            }
            form.hiddentotal.value = soma; // atribui valor ao campo oculto
            form.total.value = formatCurrency(soma) // exibe valor formatado
          }, false);
        }
  });
  </script>
4
  • Fiz conforme vc instruiu e não aconteceu nada... Commented 2/08/2017 às 18:43
  • alguma sugestao? Commented 2/08/2017 às 18:57
  • se eu fizer assim $( document ).ready( function () { var form = $("#formulario").first(); } está errado? Commented 2/08/2017 às 19:39
  • Como o jquery é carregado depois desta função, até deves colocar tudo dentro do $( document ).ready( function () { ... }. vou actualizar a resposta.
    – sadlyblue
    Commented 3/08/2017 às 10:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .