Hello,
I have two script that I’m trying to squeeze together. This probably isn’t the correct way of doing this I know. But I’m not getting there at all in the proper way and now I need a quick and dirty solution for a short time so I can put the project up online.
I need to have the calculateTotal() or the result of the calculating form to appear in the mailing order.
//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var cupcake_prices = new Array();
cupcake_prices["cc12"]=12;
cupcake_prices["cc18"]=18;
cupcake_prices["cc24"]=24;
cupcake_prices["cc30"]=30;
cupcake_prices["cc36"]=36;
cupcake_prices["cc42"]=42;
cupcake_prices["cc48"]=48;
cupcake_prices["cc54"]=54;
cupcake_prices["cc60"]=60;
//Set up an associative array
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var topping_prices = new Array();
topping_prices["Standaard"]=1;
topping_prices["Boterroom"]=1.35;
topping_prices["Logo/Foto"]=1.45;
topping_prices["Boterroomfondant"]=1.6;
topping_prices["Afgewerkt"]=2.1;
// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCupCakeSizePrice() {
var cakeRadio = document.getElementsByName('selectedcupcake');
for (i=0; i < cakeRadio.length; i++) {
if (cakeRadio[i].checked) {
user_input = cakeRadio[i].value;
}
}
return cupcake_prices[user_input];
}
// getFillingPrice() finds the price based on the filling of the cake.
// Here, we need to take user's the selection from selection list
function getToppingPrice() {
var cakeSelect = document.getElementById('topping');
//alert(filling_prices[cakeSelect.value]);
return topping_prices[cakeSelect.value];
}
// getCandlesPrice() finds the price based if Candles is selected or not.
f/*unction getSeperatlyPrice() {
const cakeSeperatly = document.getElementById('baggedseperatly');
const multipl = 5;
if(cakeSeperatly.checked) {
return( cupcake_prices * multipl);
} else {
return(0);
}
}
*/
// getInscriptionPrice() finds the price based if Inscription is selected or not.
function getSeperateCupCake() {
var cakeSeperate = document.getElementById('SeperateCupCake');
if(cakeSeperate.checked) {
return(3);
} else {
return(0);
}
}
function calculateTotal() {
const total = getCupCakeSizePrice() * getToppingPrice() + /*getSeperatlyPrice() +*/ getSeperateCupCake();
const totalEl = document.getElementById('totalPrice');
const roundedtotal = total.toFixed(2);
document.getElementById('totalPrice').innerHTML = "Totaalprijs* € " + roundedtotal;
totalEl.style.display = 'block';
}
///////// Form script ///////
function isEmpty(messageElement, field)
{
valid = true;
$("#" + messageElement).html(" ");
$("#" + field).css("border-color", "#2ecc71");
var fname = $("#" + field).val();
if (fname == "") {
$("#" + messageElement).html("required.");
$("#" + field).css("border-color", "#E46B66");
valid = false;
}
return valid;
}
function isValidEmailFormat(messageElement, field)
{
valid = true;
$("#" + messageElement).html(" ");
$("#" + field).css("border-color", "#2ecc71");
var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = $("#" + field).val();
if (!emailRegex.test(email)) {
$("#" + messageElement).html("Invalid email.");
$("#" + field).css("border-color", "#E46B66");
valid = false;
}
return valid;
}
function validateEmail()
{
var valid = true;
valid = (isEmpty("email-info", "pp-email"))
&& (isValidEmailFormat("email-info", "pp-email"));
return valid;
}
function validate()
{
var valid = true;
var nameValid = true;
var emailValid = true;
var subjectValid = true;
var messageValid = true;
$("input[type='text']").removeClass("error-field");
nameValid = isEmpty("name-info", "pp-name");
if (nameValid == false) {
$("#pp-name").addClass("error-field");
}
emailValid = validateEmail();
if (emailValid == false) {
$("#pp-email").addClass("error-field");
}
subjectValid = isEmpty("subject-info", "pp-subject");
if (subjectValid == false) {
$("#pp-subject").addClass("error-field");
}
messageValid = isEmpty("message-info", "pp-message");
if (messageValid == false) {
$("#pp-message").addClass("error-field");
}
if (nameValid == false || emailValid == false || subjectValid == false || messageValid == false) {
valid = false;
$(".error-field").first().focus();
}
return valid;
}
$(document).ready(function (e) {
$("#frm-contact").on('submit',(function (e) {
e.preventDefault();
var valid = validate();
if (valid == true) {
$("#mail-status").hide();
$('#btn-send').hide();
$('#loader-icon').css("display","inline-block");
$.ajax({
url : "contact.php",
type : "POST",
dataType : 'json',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success : function (response) {
$("#mail-status").css("display","inline-block");
$('#loader-icon').hide();
if (response.type == "error") {
$('#btn-send').show();
$("#mail-status").attr("class","error");
} else if (response.type == "message") {
$('#btn-send').hide();
$("#mail-status").attr("class","success");
}
$('input[name="pp-name"]').val(''),
$('input[name="pp-email"]').val(''),
$('input[name="pp-phone"]').val(''),
$('select[name="pp-subject"]').val(''),
$('textarea[name="pp-message"]').val(''),
$('totalprice'),
$("#mail-status").html(response.text);
},
error : function () {}
});
}
}));
});
I am in need of a quick answer but! also guidance or remarks on why or why not this works.