Question

I have a form that has two select lists:

<select name="rating1" id="rating1">
  <option>1</option>
  <option>2</option>
</select>

<select name="rating2" id="rating2">
  <option>1</option>
  <option>2</option>
</select>

I tried to create a script that would add the two selected values, so for example if a user selected 1 for rating 1, and 2 for rating 2, “Category total: 3” would be displayed at the table head. This script is as follows:

<p><script>

    $("select").keyup(function () {
        var add = parseInt($("#rating1").val())+ parseInt($("#rating2").val());
                   $("p").html("Category Total: "+add+" ");
    }).keyup();
</script></p>

It seems like it should work, but what am I doing wrong?
Thanks!

Answer 1

You script tag is strangely nested inside the p tag. Also make sure that the DOM is loaded before trying to attach handlers to elements.

<script type="text/javascript">
    $(function() {
        $("select").keyup(function () {
            var add = parseInt($("#rating1").val()) + parseInt($("#rating2").val());
            $("p").html("Category Total: " + add + " ");
        }).keyup();
    });
</script>
<p></p>

Here’s a demo.

Remark: The $(document).ready is not necessary if this script is located after the select declaration.