Form: one choice is free, two have to charge. How do I?

Question

Form: one choice is free, two have to charge. How do I?

Asked 8 years, 2 months ago

Viewed 124 times

3

I have a form, where each product selected has a value, and at the end of the form has the total, all this works through the form.js file follows code:

var str = "";
var id = "";
var sub = 0.00;
var taxa = 0;
var taxadeentrega = total - taxa;
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");
    $( "#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 = "";

        str = String(+ taxa.toFixed(2)).replace(".", ",");
        $('input[name=taxadeentrega]').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;

        //aqui eu pego o cep
var cep = document.getElementById("cep").value;

//verifica se deve incrementar ou não
if(cep == "20040-010" || cep == "20071-002" || cep == "20090-910" ||cep == "20210-010" || cep == "20080-102" || cep == "20230-130" || cep == "20081-250" || cep == "20090-030" || cep == "20090-030" || cep == "20211-340" || cep == "20211-351" || cep == "20221-240" || cep == "20221-250" || cep == "20230-010" || cep == "20230-011" || cep == "20230-025" || cep == "20230-150" || cep == "20230-160" || cep == "20230-240" || cep == "20231-016" || cep == "20231-030" || cep == "20231-031" || cep == "20231-050" || cep == "20231-085" || cep == "20240-180" || cep == "20240-200"){

        //se for um dos ceps acima, incrementa 4 no valor final
    taxa = 4.0;


    //verifica se deve incrementar ou não
}if(cep == "20241-220" || cep == "22210-015" || cep == "20240-200"){

        //se for um dos ceps acima, incrementa 5.5 no valor final
    taxa = 5.5;


}if(cep == "20050-091" || cep == "20060-050" || cep == "20071-000" || cep == "20080-003" || cep == "20081-000" || cep == "20081-050" || cep == "20090-000" || cep == "20090-003" || cep == "20231-046" || cep == "20231-047" || cep == "20231-048" || cep == "20231-093"){

    //se for um dos ceps acima, incrementa 3.5 no valor final
    taxa = 3.5;


}if(cep == "20031-170" || cep == "20040-004" || cep == "20040-020" || cep == "20040-908" || cep == "20071-000" || cep == "20241-180" || cep == "20230-070" || cep == "20230-060"){

    //se for um dos ceps acima, incrementa 3 no valor final
    taxa = 3.0;

}if(cep == "20010-010" || cep == "20020-906" || cep == "20031-908" || cep == "20031-917" || cep == "20040-001" || cep == "20040-006" || cep == "20050-090" || cep == "20070-022" || cep == "20241-110"){

    //se for um dos ceps acima, incrementa 2.5 no valor final
    taxa = 2.50;


}if(cep == "20010-020" || cep == "20011-000" || cep == "20011-020" || cep == "20011-030" || cep == "20011-040" || cep == "20011-901" || cep == "20020-000" || cep == "20010-170" || cep == "20011-000" || cep == "20021-260" || cep == "20021-350" || cep == "20031-040" || cep == "20031-050" || cep == "20031-130" || cep == "20031-204" || cep == "20040-000" || cep == "20040-003" || cep == "20040-007"){

    //se for um dos ceps acima, incrementa 1.7 no valor final
    taxa = 1.70;


}if(cep == "20010-090" || cep == "20020-100" || cep == "20021-130" || cep == "20021-315" || cep == "20030-001" || cep == "20031-000" || cep == "20031-003" || cep == "20031-010" || cep == "20031-050" || cep == "20031-141" || cep == "20031-143" || cep == "20031-005" || cep == "20031-001" || cep == "20020-903" || cep == "20031-144" || cep == "24220-280"){

    //se for um dos ceps acima, incrementa 1.2 no valor final
    taxa = 1.20;


}if(cep == "20020-010" || cep == "20020-040" || cep == "20020-080" || cep == "20021-060" || cep == "20021-120" || cep == "20021-900" || cep == "20021-903" || cep == "20030-002" || cep == "20030-013" || cep == "20030-020" || cep == "20030-021" || cep == "20030-060" || cep == "20030-070" || cep == "20030-120" || cep == "20030-905"){

    //se for um dos ceps acima, incrementa 0.7 no valor final
    taxa = 0.70;

}

total += taxa;      

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

        $( "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

My question is, I have to create a sauce category, where the selection of ONE SAUCE is free, but that selecting more than one is charged a value (per sauce). Example: I have 5 sauces (X sauce, Y sauce, D sauce, A sauce and J sauce) The customer chooses only one, gets out for free! The client chooses two: one is free and the other R $ 2,00 The client chooses three: one is for free and each sauce to R $ 2,00 - coming out the total for R $ 4,00.

That would be the area:

<!-- MOLHOS -->
<div id="molhos">
<span class="titulo">Escolha o seu Molhor (Você pode escolher 1 sem custo):</span><br>
<div><input type="checkbox" value="2.00"> <strong>MOLHO 1</strong>: R$ 2,00 - Quant.: <select></select></div>
<div><input type="checkbox" value="2.00"> <strong>MOLHO 2</strong>: R$ 2,00 - Quant.: <select></select></div>
<div><input type="checkbox" value="2.00"> <strong>MOLHO 3</strong>: R$ 2,00 - Quant.: <select></select></div>
<div><input type="checkbox" value="2.00"> <strong>MOLHO 4</strong>: R$ 2,00 - Quant.: <select></select></div>
<div><input type="checkbox" value="2.00"> <strong>MOLHO 5</strong>: R$ 2,00 - Quant.: <select></select></div>
</div>
<br>

It seems simple, but I don’t know how to create the rule that one goes out for free and the others are charged, unitary. I know I will have to create this rule and put it in the form.js file.

Thanks for your attention! 1

I put it like this, but it didn’t work, as I said I’m very lay!

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

        var molhos = $(":checkbox:checked").length;
        if(molhos > 1){
        console.log('paga o acrescimo');
        }

      }) //each molhos


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

        total += sub;

There are other areas of the form, I just put a piece to illustrate.

Total = ( qtde_sauce * value_unitario ) - value_unitario

– Reginaldo Rigo

2016/09/26 at 20:11

2 answers

2

Add the following code after the calculation of Time:

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

    $( "div#molhos :checkbox:checked" ).each(function(i) {
        if (i > 0) {
          sub += $( this ).val() * 1;
        }
    }); // each molhos

In the code above, we check each selected sauce. The variable i indicates the index of the sauce being calculated. As indexes in Javascript always start in the 0, the verification

if (i > 0)

makes the code calculate correctly, in case the user has chosen more than one sauce.

1

PERFECT!! Thank you very much, you saved my life!!!

– Alessandro Ramos

2016/09/26 at 19:47

Browser other questions tagged php javascript form

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

by rray • **66,288** points · Answer 1 · 2016-09-26T19:03:47+00:00

3

With Jquery you can use $(":checkbox:checked").length this will take all checkboxes marked and return an array, the property length returns the number of elements in this array.

With this just apply an if.

var molhos = $(":checkbox:checked").length;
if(molhos > 1){
   total += (molhos-1)*2;
   console.log('paga o acrescimo');
}

Excuse the ignorance, but how do I put this rule in that form.js file? This file was not what I made and yes a professional who no longer have contact...:(

– Alessandro Ramos

2016/09/26 at 19:12
@Alessandroramos this code when calculating the total snack.

– rray

2016/09/26 at 19:18
In this case it would not be enough to add total += (molhos-1)*2; within the if ?

– Giovanni Bernini

2016/09/26 at 19:23
@Giovannibernini that would only take the -1 the idea is to go in there to collect.

– rray

2016/09/26 at 19:25
I put it like this, that’s it?

– Alessandro Ramos

2016/09/26 at 19:39
' $( "div#sauces :checkbox:checked" ).each(Function() { sub += $( this ).val() * $( this ).Parent(). Children( "select" ).val(); var sauces = $(":checkbox:checked"). length; if(sauces > 1){ console.log('pays the acrescimo'); } }) //each sauces'

– Alessandro Ramos

2016/09/26 at 19:39
"The customer chooses only one, goes out for free! The customer chooses two: one is free and the other R$ 2,00" Always one will come out for free.. @rray

– Giovanni Bernini

2016/09/26 at 19:53
@Giovannibernini Aaah now understood, you’re right, thanks for the correction/clarification.

– rray

2016/09/26 at 19:58

Show 3 more comments