Form data into mailing form output to addressee

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.

I’m still searching for help on this one. But now I have time to work on it. So more guided explanation would be appriciated!