Wordpress jquery 表单提交

Question

我有一些 jquery，我通过一些文本字段插入一些数字，然后它应该打印出结果，这在我的本地计算机上运行良好。

但是，当我添加到我的 WordPress 环境时，提交按钮只会刷新页面..

知道这是为什么吗？

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>

Answer 1

由于这是一个由客户端 JavaScript 提供支持的在线计算器，因此您实际上不需要表单来通过 Post 或 Get 方法提交数据。

因此，在您的情况下，您可以将提交按钮替换为普通按钮，例如 （在类属性值中添加“calculate-roi”）：

<button type="button" class="btn btn-primary btn-block calculate-roi">Calculate ROI</button>

然后我更改了您的 JavaScript 代码来处理该问题，优化并压缩了您的代码：

jQuery(function($){
    // Function that formats a raw price amount
    function formatPrice( rawPrice ) {
        return rawPrice.toLocaleString("en-US", {
            style: "currency",
            currency: "USD"
        });
    }

    $('form#roi').on('click', '.calculate-roi', function() {
        const cost_by_industry = parseInt($("#cost_by_ind").val()),
            cost_by_employee_count = parseInt($("#cost_by_employee_c").val()),
            no_empoyees = parseInt($("#no_emp").val()),
            month_invest = parseInt($("#month_inv").val()),
            expected_a_grow = 0.05,
            aas = 120000,
            fpr = 0.75,
            avr = 0.75,
            //managed risk year 1
            result = ((0.3 * (cost_by_industry + cost_by_employee_count)) / 2) * 0.2,
            formattedPrice1 = formatPrice( result ),
            //managed risk year 2
            result2 = result * (1 + expected_a_grow),
            formattedPrice2 = formatPrice( result2 ),
            //managed risk year 3
            result3 = result2 * (1 + expected_a_grow),
            formattedPrice3 = formatPrice( result3 ),
            //managed risk total
            results_total = result + result2 + result3,
            formattedPrice_total_mr = formatPrice( results_total ),
            //Empower Analysts year 1
            ea_result = (no_empoyees / 2000) * aas,
            formattedPrice_ea_1 = formatPrice( ea_result ),
            //Empower Analysts year 2
            ea_result2 = ea_result * (1 + expected_a_grow),
            formattedPrice_ea_2 = formatPrice( ea_result2 ),
            //Empower Analysts year 3
            ea_result3 = ea_result2 * (1 + expected_a_grow),
            formattedPrice_ea_3 = formatPrice( ea_result3 ),
            //Empower Analysts total
            emp_results_total = ea_result + ea_result2 + ea_result3,
            formattedPrice_total_ea = formatPrice( emp_results_total ),
            //TP year 1
            tp1_results = month_invest * (1 - fpr) * 3 * 2 * (aas / 2080) * 12,
            //fp year 1
            fp1_results = month_invest * fpr * 3 * 1 * (aas / 2080) * 12,
            //TP year 2
            tp2_results = month_invest * (1 - avr) * (1 - fpr) * 3 * 1 * (aas / 2080) * 12,
            //fp year 2
            fp2_results = month_invest * (1 - avr) * fpr * 3 * 0.5 * (aas / 2080) * 12,
            //reduce aleart vol year 1
            rav_results_1 = tp2_results + fp2_results + tp1_results + fp1_results,
            formattedPrice_year_rav_1 = formatPrice( rav_results_1 ),
            //reduce aleart vol year 2
            rav_results_2 = rav_results_1 * (1 + expected_a_grow),
            formattedPrice_year_rav_2 = formatPrice( rav_results_2 ),
            //reduce aleart vol year 3
            rav_results_3 = rav_results_2 * (1 + expected_a_grow),
            formattedPrice_year_rav_3 = formatPrice( rav_results_3 ),
            //reduce aleart vol total
            rav_results = rav_results_1 + rav_results_2 + rav_results_3,
            formattedPrice_total_rav = formatPrice( rav_results );

        $("#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);
    });
});

现在您在 WordPress 中的相关页面将不再重新加载。