Calculate Values of Select Boxes On Form

Hi,
Using knockoutjs and jquery I've hacked together the following code so that when the user makes a selection (select box) the value is shown in a text box. Then if they make a selection in another select box the two values are added together; the results are then stored in a database. This works fine, but the user can also come back and edit the page. If I add "selected"  to one of the options in the select boxes it doesn't work, and if I define values it doesn't work either.

What changes need to be made so a user can edit previous selections that are loaded when the page loads?

    <form action="#" method="post" id="form">
        <label class="">Option One</label>
        <select name="welcomedinnermain" data-bind="value:welcomedinnermain" data-val="true" id="welcomedinnermain" class="formbasic fieldsession">
            <option></option>
            <option value="22">One</option>
            <option value="33">Two</option>
            <option value="44">Three</option>
            <option value="55">Four</option>
        </select><br />
        <label class="reglabel rlight">Option Two</label>
        <select name="baseprice" data-bind="value:baseprice" data-val="true" id="baseprice" class="formbasic fieldsession">
            <option></option>
            <option value="22">One</option>
            <option value="33">Two</option>
            <option value="44">Three</option>
            <option value="55">Four</option>
        </select><br />
        <p class="costtotaltext">
            The total cost of your registration is
        </p>
        <span class="eurototal">&euro;</span><input readonly data-bind="value:Number(baseprice()) + Number(welcomedinnermain())" data-val="true" id="total" name="total" type="text" value="0" class="costtotal" />
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
    <script>
        $(document).ready(function () {
            function AppViewModel() {
                this.baseprice = ko.observable(0);
                this.welcomedinnermain = ko.observable(0);
                this.total = ko.computed(function () { return Number(this.baseprice()) + Number(this.welcomedinnermain()) }, this);
            }
            ko.applyBindings(new AppViewModel());
        });
    </script>

Open in new window


Thanks in advance for any help or guidance!
abigulAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Terry WoodsIT GuruCommented:
I haven't done this in quite a while, so can't provide code within a reasonable amount of time, but I think this page in the docs describes how to do what you want to do: http://knockoutjs.com/documentation/options-binding.html
abigulAuthor Commented:
Thanks for your comment I was trying to do it in the frame of the code I have already written, the page you pointed to looks like I need to go in a different direction. Judging by the lack of comments though, maybe the way I am doing it is completely wrong.

Thanks
abigulAuthor Commented:
Hi,
In the end I found the solution with the following plugin using jquery only, without having to make too many changes.

http://www.xsanisty.com/project/calx/

A

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
abigulAuthor Commented:
Hi,
This plugin allows simple and complex calculations and calculates on load if select boxes are selected.

http://www.xsanisty.com/project/calx/

A
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.