Fazendo Soma De Valores Sem Refresh Com Javascript

12 de fevereiro de 2004

Fala galera.

Bem, eu queria vazer uma soma dos valores dos radios button, conforme a pessoa o selecionasse. Isso é para uma loja de informatica.

Coloquei um checkbox para memoria, pois a pessoa tem mais de uma opcao, e coloquei radiobuttons para os processadores. Contudo, eu não estou conseguindo colocar mais do que essas 2 opções. Se eu colocar um item Hard Disk, e colocar vario radiobuttons, esse codigo que eu peguei não faz a soma.

Portanto, eu queria ter varios titulos: Processador, Hard Disk, placa-mãe, Mouse, com varios radiobuttons cada um e num campo apareceria a soma dos valores, conforme a pessoa fizesse a selecao.

Esse é o codigo javascript que eu coloquei no <head>


<script LANGUAGE="JavaScript">
<!-- Begin
	function CheckChoice(whichbox)
	{
  with (whichbox.form)
  {
  	//Handle differently, depending on type of input box.
  	if (whichbox.type == "radio")
  	{
    //First, back out the prior radio selection's price from the total:
    hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
    //Then, save the current radio selection's price:
    hiddenpriorradio.value = eval(whichbox.price);
    //Now, apply the current radio selection's price to the total:
    hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
  	}
  	else
  	{
    //If box was checked, accumulate the checkbox value as the form total,
    //Otherwise, reduce the form total by the checkbox value:
    if (whichbox.checked == false)
    	{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
    else  { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
  	}

  	//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
  	if (hiddentotal.value < 0)
    {
    InitForm();
    }

  	//Now, return with formatted total:
  	return(formatCurrency(hiddentotal.value));
  }
	}

	//Define function to format a value as currency:
	function formatCurrency(num)
	{
    // Courtesy of [url]http://www7.brinkster.com/cyanide7/[/url]
  num = num.toString().replace(/\R$|\,/g,'');
  if(isNaN(num))
     num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/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 (((sign)?'':'-') + 'R$' + num + '.' + cents);
	}

	//Define function to init the form on reload:
	function InitForm()
  {
  //Reset the displayed total on form:
  document.myform.total.value='R$0';
  document.myform.hiddentotal.value=0;
  document.myform.hiddenpriorradio.value=0;
  document.myform2.total.value='R$0';
  document.myform2.hiddentotal.value=0;
  document.myform2.hiddenpriorradio.value=0;
  document.myform2.hiddenpriorradio.value=0;

  //Set all checkboxes and radio buttons on form-1 to unchecked:
  for (xx=0; xx < document.myform.elements.length; xx++)
  {
     if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
  	{
  	document.myform.elements[xx].checked = false;
  	}
  }
  //Set all checkboxes and radio buttons on form-2 to unchecked:
  for (xx=0; xx < document.myform2.elements.length; xx++)
  {
     if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
  	{
  	document.myform2.elements[xx].checked = false;
  	}
  }

	}

//  End -->
</script>

Esse é o codigo que eu coloquei no <body>:

  
<form method="POST" name="myform">
Memória 64MB
<input type="checkbox" name="mem64" value=12.39 onclick="this.form.total.value=CheckChoice(this);">
Memória 128MB
<input type="checkbox" name="mem128"   value=18.75  onclick="this.form.total.value=CheckChoice(this);">

[b]Processador:[/b]
<input type="hidden" name="hiddentotal" value=0>
<input type="hidden" name="hiddenpriorradio" value=0>
Total: 
<input name="total" type="text" onFocus="this.blur();" readonly>
<table width="300" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td width="300"><font face=Arial size=2> 
       <input name="processador" type="radio"
       onClick="this.form.total.value=CheckChoice(this);" value=amd1   price=20.00>
       AMD Athlon XP 2800 + BOX</font></td>
     </tr>
     <tr>
        <td width="300"><font face=Arial size=2>
         <input type="radio" name="processador" value=amd2   price=10.99
   onClick="this.form.total.value=CheckChoice(this);">
         AMD Athlon XP 2200 +</font></td>
        </tr>
    </table>
</form>

Obrigado

Guilherme Blanco · 14 de fevereiro de 2004

Não vou postar um código pronto, mas explicarei como fazer...

Você deverá checar, ao usuário clicar no botão de "Fazer orçamento", um looping por todos os elementos to formulário.

Para isto, deverá usar um laço for, e o length do form.

Para os radiobuttons e checkboxes, você checará qual está checked = "true" (marcado) e adicionará o valor a uma variável amount qualquer.

Para adicionar o valor, não utilize eval( exp ). Isto consome muitos recursos e poderá travar o browser.

Utilize a função parseFloat (que converte para número de ponto flutuante) e em seguida adicione ao total. Lembre-se que se você não fizer isto, o valor contido no value será tratado como uma String.

Ao final, utilize innerHTML para atribuir a um objeto de texto o valor total. Exemplo:

document.getElementById("mySpanId").innerHTML = amount;

sendo que:

Espero que isto te ajude.

[]s,