ORDER FORM WITH SUPPORT FOR LISTS AND ID

ORDER FORM WITH SUPPORT FOR LISTS AND ID

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/jquery-automatic-update-order-form-with-radio-buttons-and-checkboxes/
Page: http://dabrook.org/examples/cdia/javascript/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!

  1. // ORIGINAL CODE:

    $(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>");
        });
    });


























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









































      • Sticky Posts

      • My Zoho Story #19 - How and IT service provider, CTSP, are streamlining customer support using Zoho

        My Zoho Story is a video podcast series where we connect with Zoho users worldwide to hear from them about their experiences with Zoho and how it became an integral part of their everyday business life. Our recent 'My Zoho Story' took us to Australia

      • My Zoho Story #18- How Mirage Visual Limited achieved enhanced customer service experience, using Zoho

        My Zoho Story is a video podcast series where we connect with Zoho users worldwide to hear from them about their experiences with Zoho and how it became an integral part of their everyday business life. Our recent interview with Sam Blenkiron from Mirage

      • My Zoho Story #17 - How Superior Trucking Payroll Service scaled their business with Zoho

        My Zoho Story is a video podcast series where we connect with Zoho users worldwide to hear from them about their experiences with Zoho and how it became an integral part of their everyday business life. In our recent episode, we had the opportunity to

      • Update on the upcoming Zoho User Group meetups - Q1

        Hey Zoho Community!  How're you all doing? We have an important announcement about the Zoho User Group meetups this quarter - Owing to the looming threat of COVID - 19, we're recalling several of our ZUG meetups that can't be run locally and are pulling back our Zoho teams who have traveled for these events. We have also suspended Zoho meetups run by our local partners and user group leaders as we do not want any of our users to come in harm's way. For those of you who have not seen the email about

      • Eighth day of Christmas - Zoho Recruit

        Check out the story behind our sixth day of Christmas post. ​ The eighth day of the 12 days of Christmas relates to Zoho Recruit  "On the eighth day of Christmas my true love sent to me: eight maids a milking, seven swans a swimming, six geese a laying, five golden rings, four calling birds, three french hens, two turtle-doves, and a partridge in a pear tree." The eight maids walking up with portfolios in their hands signifies Zoho Recruit's recruitment solutions built to provide diverse, end-to-end