Hi,

I am a complete begineer in relation to js and jquery, and am attempting to modify an existing order form script from;


Site: http://dabrook.org/blog/articles/jqu...nd-checkboxes/
Page: http://dabrook.org/examples/cdia/jav...t/05/form.html

Currently the order form script only supports check boxes and radio buttons, but i am trying to update it to also support drop down lists and then only form elements with a specific id.

Is this possible with jquery?

Many thanks in advance!

Code:
//////////////////////////////////////////////////////
ORIGINAL CODE:
// JavaScript Document

$(document).ready(function()
{    
    var total = 0;
    
function calcTotal()
{
    $("input:checked").each(function()
    {
        //This happens for each checked input field
        var value = $(this).attr("value");
        total += parseInt(value); //total = total + value            
       });
}
 
    //This happens when the page loads
    calcTotal();    
    $("form").before('<p class="total">Total: <strong>' + total + '</strong></p>');
    $(":submit").before('<p class="total">Total: <strong>' + total + '</strong></p>');
        
    $("input:checkbox, input:radio").click(function()
    {
        total = 0;
        calcTotal();
        $("p.total").html("Total: <strong>" + total + "</strong>");
    });
});
HTML Code:
//////////////////////////////////////////////////////
ORDER FORM HTML TO SUPPORT AS EXAMPLE;
<div class="packages1">
<form action="" method="post">
    <fieldset id="packages1">
        <legend>Packages1</legend>
                <input id="selectList" name="package1" type="radio" value="99" checked />
                <label for="package1_basic">Basic: This package is aight. ($99)</label>
              <input id="selectList" type="radio" name="package1" value="149" />
              <label for="package1_pro">Professional: This package straight rocks. ($149)</label>
    </fieldset>

    <fieldset id="browser_support1">
        <legend>Browser Support</legend>   
            <input id="selectList" type="checkbox" name="browser1" value="100" />
            <label for="browser1">Will work in IE 12 ($100)</label>
    </fieldset>
   
    <fieldset>
        <legend>Packages1 Options</legend>       
    <select id="selectList" name="packages1_options" size="1">
  <option value="0" selected="selected">Choose</option>
  <option value="10">Option 1</option>
  <option value="20">Option 2</option>
  <option value="30">Option 3</option>
    </select>   
</fieldset>
</form>
</div>