Javascript .提交仅发射一次

我正在尝试创建一个更新另一个值的函数，最初（在第一次提交后）它工作正常，我知道这一点，因为我有一个弹出数据的警报。但是，随后出现了一些奇怪的情况。首先，它应该更新的innerHTML几乎立即消失。其次，该函数（看起来所有的JavaScript）都不再运行了。我不知道它为什么会这样。有人有什么建议吗

提前感谢所有的帮助

<script type="text/javascript">
    var INIT_PLANNED_HRS = 5;
    var values = {};
    $(document).ready(function () {
        $('#addCourse').submit(function () {
            var $inputs = $('#addCourse :input');
            $inputs.each(function () {
                values[this.name] = $(this).val();
            });
            INIT_PLANNED_HRS += Number(values['hours']);
            document.getElementById('hrs_planned').innerHTML = 'HOURS =    ' + INIT_PLANNED_HRS + ' GPA = ';
            alert("values[this.name] =  " + values['hours'] + " INIT_PLANNED_HRS    " + INIT_PLANNED_HRS); 
        });
        document.getElementById('hrs_planned').innerHTML = 'HOURS =    ' + INIT_PLANNED_HRS + ' GPA';
    });
</script>



<li><h3>Planned Courses</h3><p id = "hrs_planned"> gpa </p></li>

var初始计划小时数=5；
var值={}；
$（文档）.ready（函数（）{
$（'#addCourse'）。提交（函数（）{
变量$inputs=$（“#添加课程：输入”）；
$inputs.每个（函数（）{
值[this.name]=$（this.val（）；
});
初始计划小时数+=个数（值['hours']）；
document.getElementById（'hrs_planned'）。innerHTML='HOURS='+INIT_planned_hrs+'GPA='；
警报（“值[this.name]=”+值['hours']+“初始计划小时数”+初始计划小时数）；
});
document.getElementById（'hrs_planned'）。innerHTML='HOURS='+INIT_planned_hrs+'GPA'；
});
计划课程gpa

在设置

onsubmit

处理程序后，而不是在调用该处理程序时，您将立即更新

hrs\u planned

元素。请检查JS控制台是否有错误，如果您的脚本中出现致命错误，它很可能不会再运行