我正在创建一个 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"> </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">
</div>
最佳答案
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();
});
});
关于javascript - 使用 jQuery 提交表单并更改 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48993592/