How to put a sum in my JS formula?

Question

How to put a sum in my JS formula?

Asked 7 years, 12 months ago

Viewed 87 times

0

How do I place a formula that adds a value to a ZIP Code group on my order form?

Example: in ceps 22750-670, 22750-700 and 22750-750 will be added the value of R$ 4.00 (4.00) to the total order.

The file I am responsible for calculating my form is form.js, below I have it complete:

var str = "";
var id = "";
var sub = 0.00;
var total = 0.00;
var qcount = 0;
var scount = 0;
var opc = 0;

var options = "";
for (i=1; i<21; i++){
    options += "<option value='" + i + "'>" + i + "</option>";
}

$( document ).ready(function() {

$( "div div select" ).html(options); 
$( "div div :text" ).attr("value","1");
$( "#btemporio" ).click(function() {
  $( "#emporio" ).css("display","block");
});
$( "#mudaopcao" ).click(function() {
  location.reload(true);
});
    function alerta(txt){
        $( "div#alerta" ).html( txt ).show( 0 ).delay( 2500 ).fadeOut( 500 );
    }
function atencao(txt){
        $( "div#atencao" ).html( txt ).show( 0 ).delay( 2500 ).fadeOut( 500 );
    }
function mens(){
    var d = new Date();
    var n = d.getDate() + "|" + (d.getMonth()+1) + "|" + d.getFullYear() + " - " + d.getHours() + ":" + d.getMinutes();

    $( "div#quentes :checkbox:checked" ).each(function() {
          str = str + $(this).parent().children("strong").text();
          if (opc == 4){
              var sel = $(this).parent().children("span").children("select").val();
              str = str + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",");
          }
          str = str + "<br>";
    })
    $('input[name=quentes]').val(str);
    str = "";

    $( "div#saladas :checkbox:checked" ).each(function() {
          str = str + $(this).parent().children("strong").text();
          if (opc == 4){
              var sel = $(this).parent().children("span").children("select").val();
              str = str + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",");
          }
          str = str + "<br>";
    })
    $('input[name=saladas]').val(str);
    str = "";

    $( "div#sobremesas :checkbox:checked" ).each(function() {
          var sel = $(this).parent().children("select").val();
          str = str + $(this).parent().children("strong").text() + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",") + "<br>";
    })
    $('input[name=sobremesas]').val(str);
    str = "";

    $( "div#sucos :checkbox:checked" ).each(function() {
          var sel = $(this).parent().children("select").val();
          var val = $(this).parent().children("input:radio:checked").val();
          str = str + $(this).parent().children("strong").text() + " - " + $(this).parent().children("input:radio:checked").attr("l") + ": R$ " + val.replace(".", ",") + " x " + sel + " = R$ " + (val * sel).toFixed(2).replace(".", ",") + "<br>";
    })
    $('input[name=sucos]').val(str);
    str = "";

    $( "div#bebidas :checkbox:checked" ).each(function() {
          var sel = $(this).parent().children("select").val();
          str = str + $(this).parent().children("strong").text() + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",") + "<br>";
    })
    $('input[name=bebidas]').val(str);
    str = "";

    $( "div#sopas :checkbox:checked" ).each(function() {
          var sel = $(this).parent().children("select").val();
          str = str + $(this).parent().children("strong").text() + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",") + "<br>";
    })
    $('input[name=sopas]').val(str);
    str = "";

    $( "div#emporio :checkbox:checked" ).each(function() {
          var sel = $(this).parent().children("select").val();
          str = str + $(this).parent().children("strong").text() + ": R$ " + $(this).val().replace(".", ",") + " x " + sel + " = R$ " + (($(this).val() * sel).toFixed(2)).replace(".", ",") + "<br>";
    })
    $('input[name=emporio]').val(str);
    str = "";

    str = String(total.toFixed(2)).replace(".", ",");
    $('input[name=mtotal]').val(str);
    str = "";

    if(opc==1){
        $('input[name=op]').val("3 Quentes e 3 Saladas");
    }else if(opc==2){
        $('input[name=op]').val("4 Quentes e 4 Saladas");
    }else if(opc==3){
        $('input[name=op]').val("5 Quentes e 5 Saladas");
    }else{
        $('input[name=op]').val("");
    }

    if(opc==0){
        $('input[name=nop]').val("");       
    } else {
        str = "<strong>Opção " + opc + ": </strong>";
        $('input[name=nop]').val(str);
        str = "";
    }

    $('input[name=data]').val(n);
}

  $("div#quentes :checkbox").click(function(){
      if($(this).prop("checked") == true){
          qcount++;
          if (opc == 1){
              if (qcount == 4){
                  $( this ).prop( "checked", false );
                  atencao("Você só pode escolher 3 pratos quentes, para mais escolha outra opção");
                  qcount = 3;
              }
              if (qcount == 1){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 2 pratos quentes");

              }
              if (qcount == 2){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 1 prato quente");

              }
          } else if (opc == 2){
              if (qcount == 5){
                  $( this ).prop( "checked", false );
                  atencao("Você só pode escolher 4 pratos quentes, para mais escolha outra opção");
                  qcount = 4;
              }
               if (qcount == 1){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 3 pratos quentes");

              }
              if (qcount == 2){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 2 pratos quentes");

              }
               if (qcount == 3){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 1 prato quente");

              }
          } else if (opc == 3){
              if (qcount == 6){
                  $( this ).prop( "checked", false );
                  atencao("Você só pode escolher 5 pratos quentes, para mais escolha outra opção");
                  qcount = 5;
              }
                if (qcount == 1){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 4 pratos quentes");

              }
              if (qcount == 2){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 3 pratos quentes");

              }
               if (qcount == 3){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 2 pratos quentes");

              }
               if (qcount == 4){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 1 prato quente");

              }
          }
      } else if($(this).prop("checked") == false){
          qcount--;
      }
  })

  $("div#saladas :checkbox").click(function(){
      if($(this).prop("checked") == true){
          scount++;
          if (opc == 1){
              if (scount == 4){
                  $( this ).prop( "checked", false );
                  atencao("Você só pode escolher 3 saladas, para mais escolha outra opção");
                  scount = 3;
              }
              if (scount == 1){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 2 saladas");
              }
              if (scount == 2){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 1 salada");
              }

          } else if (opc == 2){
              if (scount == 5){
                  $( this ).prop( "checked", false );
                  atencao("Você só pode escolher 4 saladas, para mais escolha outra opção");
                  scount = 4;
              }
               if (scount == 1){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 3 saladas");
              }
              if (scount == 2){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 2 saladas");
              }
              if (scount == 3){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 1 salada");
              }

          } else if (opc == 3){
              if (scount == 6){
                  $( this ).prop( "checked", false );
                  atencao("Você só pode escolher 5 saladas, para mais escolha outra opção");
                  scount = 5;
              }
              if (scount == 1){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 4 saladas");
              }
              if (scount == 2){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 3 saladas");
              }
              if (scount == 3){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 2 saladas");
              }
              if (scount == 4){
                  $( this ).prop( "checked", true );
                  alerta("Você ainda pode escolher 1 salada");
              }
          }
      } else if($(this).prop("checked") == false){
          scount--;
      }
  })

  $( ":input" ).click(function() {
  total = 0;
  sub = 0;

  if ($( "div#opcoes input:radio:checked" ).length > 0) {
    $( "#mudaopcao, #titulo2, div#quentes :checkbox, div#saladas :checkbox" ).css("display","inline-block");
    sub += $( "div#opcoes input:radio:checked" ).val() * 1;
    if ($( "div#opcoes input:radio:checked" ).attr("op") == 1){
        opc = 1;
        $( "#op2,#op3,#op4,div#quentes span" ).css("display","none");
    } else if ($( "div#opcoes input:radio:checked" ).attr("op") == 2){
        opc = 2;
        $( "#op1,#op3,#op4,div#quentes span" ).css("display","none");
    } else if ($( "div#opcoes input:radio:checked" ).attr("op") == 3){
        opc = 3;
        $( "#op1,#op2,#op4,div#quentes span" ).css("display","none");
    } else if ($( "div#opcoes input:radio:checked" ).attr("op") == 4){
        opc = 4;
        $( "#op1,#op2,#op3,div#quentes span" ).css("display","none");
        $("div#quentes span, div#saladas span").css("display","inline-block");
        $( "div#quentes :checkbox:checked" ).each(function() {
            sub += $( this ).val() * $( this ).parent().find("select").val();
        }) //each quentes
        $( "div#saladas :checkbox:checked" ).each(function() {
            sub += $( this ).val() * $( this ).parent().find("select").val();
        }) //each saladas
    }
  }

    $( "div#sobremesas :checkbox:checked" ).each(function() {
        sub += $( this ).val() * $( this ).parent().children( "select" ).val();
    }) //each sobremesas

    $( "div#sucos :checkbox:checked" ).each(function() {
        sub += $( this ).parent().children( ":radio:checked" ).val() * $( this ).parent().children( "select" ).val();
    }) //each sucos

    $( "div#bebidas :checkbox:checked" ).each(function() {
        sub += $( this ).val() * $( this ).parent().children( "select" ).val();
    }) //each bebidas

    $( "div#sopas :checkbox:checked" ).each(function() {
        sub += $( this ).val() * $( this ).parent().children( "select" ).val();
    }) //each sopas

    $( "div#emporio :checkbox:checked" ).each(function() {
        sub += $( this ).val() * $( this ).parent().children( "select" ).val();
    }) //each emporio

    total += sub;

    $( "div#total" ).html( "Valor total da sua<br>encomenda: R$ " + String(total.toFixed(2)).replace(".", ",") );
    $( "div#total" ).css("display", "block");
    $( "#total2" ).html( "R$ " + String(total.toFixed(2)).replace(".", ",") );
  }) //click
  $( "#total2" ).html( "R$ " + String(total.toFixed(2)).replace(".", ",") );


  $( "form" ).submit(function( event ) {
     if (opc == 4 && (qcount + scount)<6){
        event.preventDefault();
        alerta("Você deve escolher, no mínimo, 6 itens, entre os pratos quentes e saladas");
        return false;
    } else if (total < 17.90){
        event.preventDefault();
        alerta("O valor mínimo do pedido é R$ 17,90");
        return false;
    } else if ($("#nome").val()=="" || $("#endereco").val()=="" || $("#email").val()=="" || $("#cep").val()=="" || $("#telefone").val()==""){
        event.preventDefault();
        alerta("Todos os campos de informação são obrigatórios");
        return false;
    }
    mens();
  }); //form

}); // doc ready

I believe that it is in this file that we will have to put the formula!! I am layman, what I managed to put together so far was through the help of this site and some forums, but I believe that this formula will always have to read this INPUT to be able to put the sum or not?

<td>CEP:</td>
<td><input id="cep" name="cep" type="text" size="60" value="<? echo $cep ?>"></td>

1 answer

Browser other questions tagged javascript form

You are not signed in. Login or sign up in order to post.

by Julyano Felipe • **581** points · Answer 1 · 2016-07-05T13:47:49+00:00

0

Under the line total += sub; you must put an if to verify which zip code and whether to increase the value. Ex: You must create a span with the id idTaxa or another for javascript to display later.

<span id="idTaxa" />

total += sub;
var taxa = 0;
//aqui eu pego o cep
var cep = document.getElementById("cep").value;
//verifica se deve incrementar ou não
if(cep == "22750-670" || cep == "22750-700" || cep == "22750-750"){
    //se for um dos ceps acima, incrementa 4 no valor final
    taxa = 4;
}if(...){
    //segundo if caso tenha para taxa de 6 reais
    taxa = 6;
}

total += taxa;

if(taxa != 0){
    //caso a taxa seja diferente de 0, mostra ao usuário
    document.getElementById('idTaxa').innerHTML = "Custo adicional: R$" + taxa;
}

You gave it right, thank you very much!! Without wanting to abuse, there is how I create an echo where PHP will pull the information of how much is this rate? The sum is already made automatically, was show, but wanted to show at the end of the form how much he is paying delivery fee. I will create other if for different delivery rate values, Ceps.

– Alessandro Ramos

2016/07/05 at 17:31
I edited the answer. If you’re right, please mark as the right answer so other users can know that your question has already been answered

– Julyano Felipe

2016/07/05 at 17:59
Hi Julyano, thanks again. But now, this formula did not work, it does not load the values. In the previous one.

– Alessandro Ramos

2016/07/05 at 19:25
I’ve done a lot of tests, and I find that the part that makes it not work is just this: if(taxa != 0){
 //caso a taxa seja diferente de 0, mostra ao usuário
 doccument.getElementById('idTaxa').innerHTML = "Custo adicional: R$" + taxa;
} Apart from that part, everything works, but that part would appear the fee in the form? In the span part? I created the area in the form.

– Alessandro Ramos

2016/07/05 at 20:27
1

I found the error, it was in typing, is doccment.get... the right is Document with only a C. Thank you very much for the help!!!

– Alessandro Ramos

2016/07/05 at 21:29