I have a form, where each selected product 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 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, it leaves for free! The customer chooses two: one is free and the other R $ 2,00 The customer chooses three: one is for free and each sauce is over $ 2.00 - leaving the total for $ 4.00.
It would be this 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 do not know how to create the rule that one leaves for free and the others are charged, unitary. I know I'll have to create this rule and put it in the form.js file.
I appreciate the attention of everyone! 1
I put it like this, but it did not work, as I said I'm too lazy!
$( "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.