Question

I am trying to create a function that updates another value, and initially (after the first submit it works correctly, I know this because I have an alert that pops up with the data. However, a number of oddities then occur. FIRST the innerHTML which it should be updating disappears almost immediately. SECOND the function (and seemingly all of the JavaScript) doesn’t run again. I have no idea why it would be acting this way. Does anyone have any suggestions?

Thanks in advance for all the help!

<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>

Answer 1

You are updating the hrs_planned element immediately after you set the onsubmit handler, not when it is invoked. Check your JS console for errors, if you get a fatal error in your script, it will likely not run anymore.