I have some jQuery that I plug some numbers in via some text fields then it should print out the results, this works fine on my local machine.
However, when I add to my WordPress environment, the submit button just refreshes the page.
Any idea why this is?
jQuery("#roi").submit(function (event) { event.preventDefault(); window.cost_by_industry = parseInt($("#cost_by_ind").val()); window.cost_by_employee_count = parseInt($("#cost_by_employee_c").val()); window.no_empoyees = parseInt($("#no_emp").val()); window.month_invest = parseInt($("#month_inv").val()); window.expected_a_grow = 0.05; window.aas = 120000; window.fpr = 0.75; window.avr = 0.75; //managed risk year 1 var roiCalc = function () { return ((0.3 * (cost_by_industry + cost_by_employee_count)) / 2) * 0.2; }; var result = roiCalc(); const formattedPrice1 = result.toLocaleString("en-US", { style: "currency", currency: "USD" }); //managed risk year 2 var roiCalc2 = function () { return result * (1 + expected_a_grow); }; var result2 = roiCalc2(); const formattedPrice2 = result2.toLocaleString("en-US", { style: "currency", currency: "USD" }); //managed risk year 3 var roiCalc3 = function () { return result2 * (1 + expected_a_grow); }; var result3 = roiCalc3(); const formattedPrice3 = result3.toLocaleString("en-US", { style: "currency", currency: "USD" }); //managed risk total var roiCalcfinal = function () { return result + result2 + result3; }; var results_total = roiCalcfinal(); const formattedPrice_total_mr = results_total.toLocaleString("en-US", { style: "currency", currency: "USD" }); //Empower Analysts year 1 var roiCalc_emp_1 = function () { return (no_empoyees / 2000) * aas; }; var ea_result = roiCalc_emp_1(); const formattedPrice_ea_1 = ea_result.toLocaleString("en-US", { style: "currency", currency: "USD" }); //Empower Analysts year 2 var roiCalc_emp_2 = function () { return ea_result * (1 + expected_a_grow); }; var ea_result2 = roiCalc_emp_2(); const formattedPrice_ea_2 = ea_result2.toLocaleString("en-US", { style: "currency", currency: "USD" }); //Empower Analysts year 3 var roiCalc_emp_3 = function () { return ea_result2 * (1 + expected_a_grow); }; var ea_result3 = roiCalc_emp_3(); const formattedPrice_ea_3 = ea_result3.toLocaleString("en-US", { style: "currency", currency: "USD" }); ///Empower Analysts total var roiCalc_emp_final = function () { return ea_result + ea_result2 + ea_result3; }; var emp_results_total = roiCalc_emp_final(); const formattedPrice_total_ea = emp_results_total.toLocaleString("en-US", { style: "currency", currency: "USD" }); //TP year 1 var tp1 = function () { return month_invest * (1 - fpr) * 3 * 2 * (aas / 2080) * 12; }; var tp1_results = tp1(); //FP year 1 var fp1 = function () { return month_invest * fpr * 3 * 1 * (aas / 2080) * 12; }; var fp1_results = fp1(); //TP year 2 var tp2 = function () { return month_invest * (1 - avr) * (1 - fpr) * 3 * 1 * (aas / 2080) * 12; }; var tp2_results = tp2(); //fp year 2 var fp2 = function () { return month_invest * (1 - avr) * fpr * 3 * 0.5 * (aas / 2080) * 12; }; var fp2_results = fp2(); //reduce aleart vol year 1 var rav1 = function () { return tp2_results + fp2_results + tp1_results + fp1_results; }; var rav_results_1 = rav1(); const formattedPrice_year_rav_1 = rav_results_1.toLocaleString("en-US", { style: "currency", currency: "USD" }); //reduce aleart vol year 2 var rav2 = function () { return rav_results_1 * (1 + expected_a_grow); }; var rav_results_2 = rav2(); const formattedPrice_year_rav_2 = rav_results_2.toLocaleString("en-US", { style: "currency", currency: "USD" }); //reduce aleart vol year 3 var rav3 = function () { return rav_results_2 * (1 + expected_a_grow); }; var rav_results_3 = rav3(); const formattedPrice_year_rav_3 = rav_results_3.toLocaleString("en-US", { style: "currency", currency: "USD" }); //reduce aleart vol total var rav_total = function () { return rav_results_1 + rav_results_2 + rav_results_3; }; var rav_results = rav_total(); const formattedPrice_total_rav = rav_results.toLocaleString("en-US", { style: "currency", currency: "USD" }); $("#output").show(); $(".manage_risk_1").text(formattedPrice1); $(".manage_risk_2").text(formattedPrice2); $(".manage_risk_3").text(formattedPrice3); $(".results_total").text(formattedPrice_total_mr); $(".emp_results_1").text(formattedPrice_ea_1); $(".emp_results_2").text(formattedPrice_ea_2); $(".emp_results_3").text(formattedPrice_ea_3); $(".emp_results_total").text(formattedPrice_total_ea); // $(".tp1_results").text(tp1_results); // $(".tp2_results").text(tp2_results); // $(".fp1_results").text(fp1_results); // $(".fp2_results").text(fp2_results); $(".rav_results_1").text(formattedPrice_year_rav_1); $(".rav_results_2").text(formattedPrice_year_rav_2); $(".rav_results_3").text(formattedPrice_year_rav_3); $(".rav_results_total").text(formattedPrice_total_rav);});
#output { display: none; font-size: 26px; margin-top: 50px;}.help-inline { display: none;}.result { padding-top: 10px;}.roi-success { background: #269526; color: white;}.roi-danger { background: #d74e26; color: white;}input[type="text"] { width: 100%; display: block; margin: 15px 0;}.btn { display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><div class="container"><div class="row"><div class="col-lg-8 col-lg-offset-2"><h1>Calculator</h1><p class="lead">copy copy copy </p><form id="roi"><b>test</b><select id="cost_by_ind"><option value="10930000">Healthcare</option><option value="5900000">Financial</option><option value="4820000">Pharmaceuticals</option><option value="4780000">Energy</option></select><b>Cost by employe count</b><select id="cost_by_employee_c"><option value="3310000">0 - 499</option><option value="3290000">500 - 1000-</option><option value="4870000">1001 - 5000</option><option value="4330000">5001 - 10000</option><option value="5460000">10001 - 25000</option><option value="5420000">25001 - 100000</option></select><div class="control-group"><b>No Employees</b><input id="no_emp" class="form-control" type="text" placeholder="Number of Employees"></div><div class="control-group"><b>Monthly </b><input id="month_inv" class="form-control" type="text" placeholder="Monthly Investigations"></div><button type="submit" class="btn btn-primary btn-block">Calculate ROI</button></form><!--show output here--><div class="well" id="output"><p> year 1 = <span class="manage_risk_1"></span></p><p> year 2 = <span class="manage_risk_2"></span></p><p> year 3 = <span class="manage_risk_3"></span></p><strong>Total k = <span class="results_total"></span></strong><p>Es year 1 = <span class="emp_results_1"></span></p><p>year 2 = <span class="emp_results_2"></span></p><p>year 3 = <span class="emp_results_3"></span></p><strong>Total = <span class="emp_results_total"></span></strong><!-- <p>TP1 <span class="tp1_results"></span></p><p>TP2 <span class="tp2_results"></span></p><p>FP1 <span class="fp1_results"></span></p><p>FP2 <span class="fp2_results"></span></p> --><p> year 1 = <span class="rav_results_1"></span></p><p> year 2 = <span class="rav_results_2"></span></p><p> year 3 = <span class="rav_results_3"></span></p><strong>Total = <span class="rav_results_total"></span></strong></div></div></div></div>