javascript - 使用 jQuery 提交表单并更改 DOM 元素

Question

我正在创建一个 401k 计算器，它将接受一些输入(并在幕后分配其他几个输入)。我将进行一些计算并在 tabledata 中呈现一个值表，但现在我只是尝试在用户提交时将 tabledata div 的值更改为“Testing”。我做错了什么？

jQuery(function () {
  $('#401k').submit(function () {
    var data = $("#401k :input").serializeArray();
    document.getElementById("tabledata").InnerHTML = "Testing";					
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="401k" action="#">
    <div class="row uniform">
      <div class="6u 12u$(xsmall)">
        Percentage to Contribute:
        <input type="text" name="percent" id="percent" value="" placeholder="" />
      </div>
    </div>
    <div class="row uniform">
      <div class="6u 12u$(xsmall)">
        Annual Salary Growth:
        <input type="text" name="salaryincrease" id="salaryincrease" value="" placeholder="" />
      </div>
    </div>
    <div class="row uniform">
      <div class="6u 12u$(xsmall)">
        Current Age:
        <input type="text" name="currentage" id="currentage" value="" placeholder="" />
      </div>
    </div>
    <div class="row uniform">
      <div class="6u 12u$(xsmall)">
        Retirement Age:
        <input type="text" name="retirementage" id="retirementage" value="" placeholder="" />
      </div>
    </div>
    <div class="row uniform">
      <div class="6u 12u$(xsmall)">
        Current 401k Balance:
        <input type="text" name="currentbalance" id="currentbalance" value="" placeholder="" />
      </div>
    </div>
    <div class="row uniform">
      <div class="6u 12u$(xsmall)">
        Expected Rate of Return:
        <input type="text" name="rateofreturn" id="rateofreturn" value="" placeholder="" />
      </div>
    </div>
    <div class="row uniform">&nbsp;</div>
    <div class="12u$">
      <ul class="actions">
        <li><input type="submit" value="Calculate" class="special" /></li>
        <li><input type="reset" value="Reset" /></li>
      </ul>
    </div>

  </form>
  <div id="tabledata">
    &nbsp;
  </div>

Answer 1

innerHTML 属性以小写“i”开头，因此应该这样写:

document.getElementById("tabledata").innerHTML = "Testing";

如果您不想刷新页面，请使用e.preventDefault()，就像这样:

jQuery(function () {
    $('#401k').submit(function (e) {
        var data = $("#401k :input").serializeArray();
        document.getElementById("tabledata").innerHTML = "Testing";
        e.preventDefault();
    });
});