www.webdeveloper.com
Results 1 to 6 of 6

Thread: Javascript to make a form calculate prices

Hybrid View

  1. #1
    Join Date
    Apr 2005
    Posts
    23

    Javascript to make a form calculate prices

    I need some Javascript to make my form calculate a price, below is an example of my form.

    I tried many variations of Javascripts but none seem to do exactly what I want, maybe it not possible, but if it is then I believe this forum is the best place to find out.

    Firstly their is a dropdown box that allows a user to select how many years they wish to register a domain name, the option value show the price for each selection.

    Then the user needs to select how many domain names they wish to register, the option value shows the amount of domain names for each selection.

    Finally the user is asked if they require the(se) domain names to be transferred from a previous host, if no then their is no additional cost, if yes their is a transfer fee of 4.50 for each domain name, the option value show the transfer cost.

    To Summarize
    The first choice needs to be multiplied by the second, for instance, if a users selects a registration period of 2 years and wishes to register 5 domain names then 6.49 needs to be multiplied by 5.

    Finally if the user wishes to transfer the(se) domain names then their is an additional 4.50 that needs to be added for each domain name to be transferred. (e.g. 6.49 x 5 = x 6.49 x 4.50 = y x + y=z or a x b = x a x c = y x + y=z).



    Code:
    <form>
    	<select name="a">
    	<option value="4.49">1 Year</option>
            <option value="6.49">2 Years</option>
            <option value="9.47">3 Years</option>
            <option value="12.47">4 Years</option>
            <option value="15.45">5 Years</option>
            <option value="18.44">6 Years</option>
            <option value="21.43">7 Years</option>
            <option value="24.42">8 Years</option>
            <option value="27.41">9 Years</option>
            <option value="30.40">10 Years</option>
    	</select>
    	<select name="b">
    		<option value="1">1 domain name</option>
            <option value="2">2 domain names</option>
            <option value="3">3 domain name</option>
            <option value="4">4 domain names</option>
            <option value="5">5 domain names</option>
            <option value="6">6 domain names</option>
            <option value="7">7 domain names</option>
            <option value="8">8 domain name</option>
            <option value="9">9 domain names</option>
            <option value="10">10 domain names</option>
            <option value="11">11 domain names</option>
    	</select>
    	<select name="c">
    		<option value="0">No</option>
    		<option value="4.50">Yes</option>
    	</select>
            <select name="z">
            some form of output=z goes here
            </select>
    </form>

  2. #2
    Join Date
    Feb 2013
    Posts
    46
    Very possible, and simple, too. Except for trying to make cash-values in JS, which is a little weird.. I did so by converting the end result to a string and assuring it as 2 numbers in the cent spot, or 0's of none are there. So 4.5 becomes 4.50, and 9 becomes 9.00, and 3.3333333 becomes 3.33.

    http://jsfiddle.net/tMqX4/

    Code:
    <form id="buy">
    	<select name="years">
    	    <option value="4.49">1 Year</option>
            <option value="6.49">2 Years</option>
            <option value="9.47">3 Years</option>
            <option value="12.47">4 Years</option>
            <option value="15.45">5 Years</option>
            <option value="18.44">6 Years</option>
            <option value="21.43">7 Years</option>
            <option value="24.42">8 Years</option>
            <option value="27.41">9 Years</option>
            <option value="30.40">10 Years</option>
    	</select>
    	<select name="names">
    		<option value="1">1 domain name</option>
            <option value="2">2 domain names</option>
            <option value="3">3 domain name</option>
            <option value="4">4 domain names</option>
            <option value="5">5 domain names</option>
            <option value="6">6 domain names</option>
            <option value="7">7 domain names</option>
            <option value="8">8 domain name</option>
            <option value="9">9 domain names</option>
            <option value="10">10 domain names</option>
            <option value="11">11 domain names</option>
    	</select>
    	<select name="transfer">
    		<option value="0">No</option>
    		<option value="4.50">Yes</option>
    	</select>
    </form>
    <input type="text" id="total" readonly="readonly" />
    <script>
    function setPrice () {
        var years = $('#buy').find('[name="years"]').val();
        var names = $('#buy').find('[name="names"]').val();
        var transfer = $('#buy').find('[name="transfer"]').val();
        var result = parseFloat(years * names + names * transfer, 10).toString().split('.');
        if (result[1] === void 0) {
            result[1] = '';
        }
        while (result[1].length < 2) {
            result[1] += '0';
        }
        result = result[0] + '.' + result[1].substr(0,2);
        $('#total').val(result);
    }
    $('form>select').change(setPrice);
    setPrice();
    </script>

  3. #3
    Join Date
    Apr 2005
    Posts
    23
    Thanks s-p-n, I'm no expert with Javascript so I was having problems with many pieces of code that just did not work, but those that did were producing odd final values just like you said. So my confusion was amplified, you have managed to get me back on track.

    The example you showed on jsfiddle works perfectly, but I tried it on an stand along webpage on my site and the box that shows the result was blank.

    What have I done wrong?

  4. #4
    Join Date
    Apr 2005
    Posts
    23
    It's okay, I've just realized that I needed to reference the jquery-2.0.0b1.js in the head of my document.

    All is working fine, so now I add the code to my table, but for some reason it no longer works, it appears that once I put the code into separate cells of my table it breaks, the only way I can get the final results is when I refresh my browser.....any ideas how to fix this, see the code below:

    Take the <td> </td> out and it works fine

    Code:
    <!DOCTYPE html>
    <head>
    <TITLE>test</TITLE>
    <script src="javascript/jquery-2.0.0b1.js"></script>
    <link rel="stylesheet" href="css/domain-name-price-guide-table.css" />
    </head>
    <body>
    <div class="datagrid">
    <form id="buy">
    <table>
    <thead>
    </thead>
    <tbody>
    <tr>
    <td>
    	<select name="years">
            <option value="4.49">1 Year</option>
            <option value="6.49">2 Years</option>
            <option value="9.47">3 Years</option>
            <option value="12.47">4 Years</option>
            <option value="15.45">5 Years</option>
            <option value="18.44">6 Years</option>
            <option value="21.43">7 Years</option>
            <option value="24.42">8 Years</option>
            <option value="27.41">9 Years</option>
            <option value="30.40">10 Years</option>
    	</select>
    </td>
    <td>
    	<select name="names">
    		<option value="1">1 domain name</option>
            <option value="2">2 domain names</option>
            <option value="3">3 domain names</option>
            <option value="4">4 domain names</option>
            <option value="5">5 domain names</option>
            <option value="6">6 domain names</option>
            <option value="7">7 domain names</option>
            <option value="8">8 domain names</option>
            <option value="9">9 domain names</option>
            <option value="10">10 domain names</option>
            <option value="11">11 domain names</option>
    	</select>
    </td>
    <td>
    	<select name="transfer">
    		<option value="0">No</option>
    		<option value="4.50">Yes</option>
    	</select>
    </td>
    <td>
        &pound;
        	<input type="text" id="total" readonly />
    </td>
    </tr>
    </tbody>
    </table>
    </form>
    <script>
    function setPrice () {
        var years = $('#buy').find('[name="years"]').val();
        var names = $('#buy').find('[name="names"]').val();
        var transfer = $('#buy').find('[name="transfer"]').val();
        var result = parseFloat(years * names + names * transfer, 10).toString().split('.');
        if (result[1] === void 0) {
            result[1] = '';
        }
        while (result[1].length < 2) {
            result[1] += '0';
        }
        result = result[0] + '.' + result[1].substr(0,2);
        $('#total').val(result);
    }
    $('form>select').change(setPrice);
    setPrice();
    </script>
    </div>
    
    </body>
    </html>

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    I don't see the need for JQuery here, but use it if you want...
    Formatting may change since the CSS info is missing.

    Code:
            <!DOCTYPE html>
            <head>
            <TITLE>test</TITLE>
    <!--  1st, I don't use
            <script src="javascript/jquery-2.0.0b1.js"></script>
          2nd, not provided
            <link rel="stylesheet" href="css/domain-name-price-guide-table.css" />
    -->
            </head>
            <body>
            <div class="datagrid">
            <form id="buy">
            <table>
            <thead>
            </thead>
            <tbody>
            <tr>
            <td>
            	<select id="years" onchange="setPrice()">
                    <option value="4.49">1 Year</option>
                    <option value="6.49">2 Years</option>
                    <option value="9.47">3 Years</option>
                    <option value="12.47">4 Years</option>
                    <option value="15.45">5 Years</option>
                    <option value="18.44">6 Years</option>
                    <option value="21.43">7 Years</option>
                    <option value="24.42">8 Years</option>
                    <option value="27.41">9 Years</option>
                    <option value="30.40">10 Years</option>
            	</select>
            </td>
            <td>
            	<select id="domain" onchange="setPrice()">
            	<option value="1">1 domain name</option>
                    <option value="2">2 domain names</option>
                    <option value="3">3 domain names</option>
                    <option value="4">4 domain names</option>
                    <option value="5">5 domain names</option>
                    <option value="6">6 domain names</option>
                    <option value="7">7 domain names</option>
                    <option value="8">8 domain names</option>
                    <option value="9">9 domain names</option>
                    <option value="10">10 domain names</option>
                    <option value="11">11 domain names</option>
            	</select>
            </td>
            <td>
            	<select id="transfer" onchange="setPrice()">
            	<option value="0">No</option>
            	<option value="4.50">Yes</option>
            	</select>
            </td>
            <td>
                &pound; <input type="text" id="total" readonly />
            </td>
            </tr>
            </tbody>
            </table>
            </form>
            <script>
            function $_(IDS) { return document.getElementById(IDS); }
    
            function setPrice () {
                var years = parseFloat($_('years').value);
                var names = parseInt($_('domain').value);
                var transfer = parseFloat($_('transfer').value);
                var result = (years * names + names * transfer).toFixed(2);
                $_('total').value = result
            }
            setPrice();
            </script>
            </div>
    
            </body>
            </html>

  6. #6
    Join Date
    Apr 2005
    Posts
    23
    Thanks JMRKER, I've used jQuery only because s-p-n replied with a sound working script, and it happened to be in jQuery.

    The reason why my form didn't work when I put it into my table is because $('form>select').change(setPrice); should have read $('form select').change(setPrice);

    If anyone is interested the script should read as follows:

    Code:
    <script>
    function setPrice () {
        var years = $('#buy').find('[name="years"]').val();
        var names = $('#buy').find('[name="names"]').val();
        var transfer = $('#buy').find('[name="transfer"]').val();
        var result = parseFloat(years * names + names * transfer, 10).toString().split('.');
        if (result[1] === void 0) {
            result[1] = '';
        }
        while (result[1].length < 2) {
            result[1] += '0';
        }
        result = result[0] + '.' + result[1].substr(0,2);
        $('#total').val(result);
    }
    $('form select').change(setPrice);
    setPrice();
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles