Solved

Total to display as text not textbox

Posted on 2010-11-10
7
295 Views
Last Modified: 2012-05-10
hi,
can anyone please tell me how to display total as text not as a form textbox.
thanks,
mskazza
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    <script type='text/javascript'>

var pricex = {

	'0' : {

		'0'  : '0.00',

		'250'  : '0.00',

		'500'  : '0.00',

		'1000' : '0.00',

		'2000' : '0.00',

		'3000' : '0.00',

		'4000' : '0.00',

		'5000' : '0.00',

		'10000' : '0.00',

		'15000' : '0.00',

		'20000' : '0.00'

	},

	'Full1' : {

		'0'  : '0.00',

		'250'  : '49.00',

		'500'  : '59.00',

		'1000' : '69.00',

		'2000' : '109.00',

		'3000' : '149.00',

		'4000' : '189.00',

		'5000' : '229.00',

		'10000' : '339.00',

		'15000' : '449.00',

		'20000' : '559.00'

	},

	'Full2' : {

		'0'  : '0.00',

		'250'  : '59.00',

		'500'  : '69.00',

		'1000' : '79.00',

		'2000' : '119.00',

		'3000' : '159.00',

		'4000' : '199.00',

		'5000' : '239.00',

		'10000' : '349.00',

		'15000' : '459.00',

		'20000' : '569.00'

	},

	'Double' : {

		'0'  : '0.00',

		'250'  : '89.00',

		'500'  : '99.00',

		'1000' : '109.00',

		'2000' : '149.00',

		'3000' : '189.00',

		'4000' : '229.00',

		'5000' : '269.00',

		'10000' : '379.00',

		'15000' : '489.00',

		'20000' : '599.00'

	},

	'Tripple' : {

		'0'  : '0.00',

		'250'  : '109.00',

		'500'  : '119.00',

		'1000' : '129.00',

		'2000' : '169.00',

		'3000' : '209.00',

		'4000' : '249.00',

		'5000' : '289.00',

		'10000' : '399.00',

		'15000' : '509.00',

		'20000' : '619.00'

	},

	'TrippleDouble' : {

		'0'  : '0.00',

		'250'  : '110.00',

		'500'  : '120.00',

		'1000' : '130.00',

		'2000' : '170.00',

		'3000' : '210.00',

		'4000' : '250.00',

		'5000' : '290.00',

		'10000' : '400.00',

		'15000' : '510.00',

		'20000' : '620.00'

	}

};



function totalise() {    

    var qtd   = document.getElementById('qt').value;

    var price  = document.getElementById('prices').value;

    var result = document.getElementById("total");

    //alert(pricex[price][qtd]);

    var TotalPrice = pricex[price][qtd]

    result.value = TotalPrice;

    

}

function addDesignPrice(val) {

    var result = document.getElementById("total");

    var FinalVal = (eval(result.value) + val) ;

    result.value = FinalVal.toFixed(2);

}

function hideAll() {}

    </script>



</head>

<body>

    <table>

        <tr>

            <td>

                <select id="qt" onchange="totalise()">

                    <option value="0">Please Select....</option>

                    <option value="250">250</option>

                    <option value="500">500</option>

                    <option value="1000">1,000</option>

                    <option value="2000">2,000</option>

                    <option value="3000">3,000</option>

                    <option value="4000">4,000</option>

                    <option value="5000">5,000</option>

                    <option value="10000">10,000</option>

                    <option value="15000">15,000</option>

                    <option value="20000">20,000</option>

                </select>

            </td>

            <td>

                <select id="prices" onchange="totalise()">

                    <option value="0">Please Select....</option>

                    <option value="Full1">Full Colour One Side</option>

                    <option value="Full2">Full Colour Both Sides</option>

                    <option value="Double">Double Size or a Bookmark</option>

                    <option value="Tripple">Tripple Colour Side</option>

                    <option value="TrippleDouble">Tripple Colour Side Double</option>

                </select>

            </td>

            <td>

                <input type="radio" name="artwork" onclick="hideAll();addDesignPrice(49);">

                Professionally designed by Absolute Graphics <strong>(+€49)</strong>

                <br />

                <input type="radio" name="artwork" onclick="hideAll(); changeDiv('upload','block');">I

                will supply my own artwork<br />

                <div id="upload" style="margin-left: 30px; display: none">

                    <br />

                    If you have your own business card design upload it now.<br />

                    <br />

                    Please choose file to upload:

                    <input type="file" name="upload" id="upload2" />

                </div>

            </td>

            <td>

                <input id="total" type="text" readonly />

            </td>

        </tr>

    </table>

</body>

</html>

Open in new window

0
Comment
Question by:Karen Liddy
  • 4
  • 2
7 Comments
 
LVL 20

Expert Comment

by:Sathish David Kumar N
ID: 34101294

Use div tag
<div id="textmsg" name="textmsg"></div>
 
"Sathish"=document.getElementbyId("textmsg").value
0
 

Author Comment

by:Karen Liddy
ID: 34101376
do i put the second line in the head tag? and what is sathish? just a random name?
0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34102082
While using a <div> tag would work, the proper way to do it is using a tag that is meant to display text such as the <span> tag.

To do so, just make the following 3 changes to your document:

1. Change this line:

    <input id="total" type="text" readonly />

to this:

    <span id="total"></span>

2. Change this line:

    result.value = TotalPrice;

to this:

    result.innerHTML = TotalPrice;

3. Change this line:

    result.value = FinalVal.toFixed(2);

to this:

    result.innerHTML = FinalVal.toFixed(2);


In the end, your document should look like the code attached below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type='text/javascript'>
        var pricex = {
            '0': {
                '0': '0.00',
                '250': '0.00',
                '500': '0.00',
                '1000': '0.00',
                '2000': '0.00',
                '3000': '0.00',
                '4000': '0.00',
                '5000': '0.00',
                '10000': '0.00',
                '15000': '0.00',
                '20000': '0.00'
            },
            'Full1': {
                '0': '0.00',
                '250': '49.00',
                '500': '59.00',
                '1000': '69.00',
                '2000': '109.00',
                '3000': '149.00',
                '4000': '189.00',
                '5000': '229.00',
                '10000': '339.00',
                '15000': '449.00',
                '20000': '559.00'
            },
            'Full2': {
                '0': '0.00',
                '250': '59.00',
                '500': '69.00',
                '1000': '79.00',
                '2000': '119.00',
                '3000': '159.00',
                '4000': '199.00',
                '5000': '239.00',
                '10000': '349.00',
                '15000': '459.00',
                '20000': '569.00'
            },
            'Double': {
                '0': '0.00',
                '250': '89.00',
                '500': '99.00',
                '1000': '109.00',
                '2000': '149.00',
                '3000': '189.00',
                '4000': '229.00',
                '5000': '269.00',
                '10000': '379.00',
                '15000': '489.00',
                '20000': '599.00'
            },
            'Tripple': {
                '0': '0.00',
                '250': '109.00',
                '500': '119.00',
                '1000': '129.00',
                '2000': '169.00',
                '3000': '209.00',
                '4000': '249.00',
                '5000': '289.00',
                '10000': '399.00',
                '15000': '509.00',
                '20000': '619.00'
            },
            'TrippleDouble': {
                '0': '0.00',
                '250': '110.00',
                '500': '120.00',
                '1000': '130.00',
                '2000': '170.00',
                '3000': '210.00',
                '4000': '250.00',
                '5000': '290.00',
                '10000': '400.00',
                '15000': '510.00',
                '20000': '620.00'
            }
        };

        function totalise() {
            var qtd = document.getElementById('qt').value;
            var price = document.getElementById('prices').value;
            var result = document.getElementById("total");
            //alert(pricex[price][qtd]);
            var TotalPrice = pricex[price][qtd]
            result.innerHTML = TotalPrice;

        }
        function addDesignPrice(val) {
            var result = document.getElementById("total");
            var FinalVal = (eval(result.value) + val);
            result.innerHTML = FinalVal.toFixed(2);
        }
        function hideAll() { }
    </script>

</head>
<body>
    <table>
        <tr>
            <td>
                <select id="qt" onchange="totalise()">
                    <option value="0">Please Select....</option>
                    <option value="250">250</option>
                    <option value="500">500</option>
                    <option value="1000">1,000</option>
                    <option value="2000">2,000</option>
                    <option value="3000">3,000</option>
                    <option value="4000">4,000</option>
                    <option value="5000">5,000</option>
                    <option value="10000">10,000</option>
                    <option value="15000">15,000</option>
                    <option value="20000">20,000</option>
                </select>
            </td>
            <td>
                <select id="prices" onchange="totalise()">
                    <option value="0">Please Select....</option>
                    <option value="Full1">Full Colour One Side</option>
                    <option value="Full2">Full Colour Both Sides</option>
                    <option value="Double">Double Size or a Bookmark</option>
                    <option value="Tripple">Tripple Colour Side</option>
                    <option value="TrippleDouble">Tripple Colour Side Double</option>
                </select>
            </td>
            <td>
                <input type="radio" name="artwork" onclick="hideAll();addDesignPrice(49);">
                Professionally designed by Absolute Graphics <strong>(+€49)</strong>
                <br />
                <input type="radio" name="artwork" onclick="hideAll(); changeDiv('upload','block');">I
                will supply my own artwork<br />
                <div id="upload" style="margin-left: 30px; display: none">
                    <br />
                    If you have your own business card design upload it now.<br />
                    <br />
                    Please choose file to upload:
                    <input type="file" name="upload" id="upload2" />
                </div>
            </td>
            <td>
                <span id="total"></span>
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Karen Liddy
ID: 34102152
Thanks for your response, that code works great, until, you add the 49 from the radio button then i get NaN as the total.

Your help much appreciated.

MsKazza
0
 

Author Comment

by:Karen Liddy
ID: 34102175
oh and how can i make the initial value of total be 0.00 at the moment its blank when the page loads.
0
 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 500 total points
ID: 34103834
Q: "how can i make the initial value of total be 0.00 at the moment its blank when the page loads"

A: Place "0.00" inside the <span> tags like this:

<span id="total">0.00</span>


Also, to fix your other issue, you need to change your javascript a bit, as what you had wasn't functioning properly.
Have a look at the attached code.  I changed your functions, and I added totalize() to your "I will supply my own artwork" radio button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type='text/javascript'>
        var pricex = {
            '0': {
                '0': '0.00',
                '250': '0.00',
                '500': '0.00',
                '1000': '0.00',
                '2000': '0.00',
                '3000': '0.00',
                '4000': '0.00',
                '5000': '0.00',
                '10000': '0.00',
                '15000': '0.00',
                '20000': '0.00'
            },
            'Full1': {
                '0': '0.00',
                '250': '49.00',
                '500': '59.00',
                '1000': '69.00',
                '2000': '109.00',
                '3000': '149.00',
                '4000': '189.00',
                '5000': '229.00',
                '10000': '339.00',
                '15000': '449.00',
                '20000': '559.00'
            },
            'Full2': {
                '0': '0.00',
                '250': '59.00',
                '500': '69.00',
                '1000': '79.00',
                '2000': '119.00',
                '3000': '159.00',
                '4000': '199.00',
                '5000': '239.00',
                '10000': '349.00',
                '15000': '459.00',
                '20000': '569.00'
            },
            'Double': {
                '0': '0.00',
                '250': '89.00',
                '500': '99.00',
                '1000': '109.00',
                '2000': '149.00',
                '3000': '189.00',
                '4000': '229.00',
                '5000': '269.00',
                '10000': '379.00',
                '15000': '489.00',
                '20000': '599.00'
            },
            'Tripple': {
                '0': '0.00',
                '250': '109.00',
                '500': '119.00',
                '1000': '129.00',
                '2000': '169.00',
                '3000': '209.00',
                '4000': '249.00',
                '5000': '289.00',
                '10000': '399.00',
                '15000': '509.00',
                '20000': '619.00'
            },
            'TrippleDouble': {
                '0': '0.00',
                '250': '110.00',
                '500': '120.00',
                '1000': '130.00',
                '2000': '170.00',
                '3000': '210.00',
                '4000': '250.00',
                '5000': '290.00',
                '10000': '400.00',
                '15000': '510.00',
                '20000': '620.00'
            }
        };

        function getTotalPrice() {
            var qtd = document.getElementById('qt').value;
            var price = document.getElementById('prices').value;
            var totalPrice = pricex[price][qtd];
            return totalPrice;
        }
        function totalise() {
            var result = document.getElementById("total");
            var totalPrice = getTotalPrice();
            result.innerHTML = totalPrice;
        }
        function addDesignPrice(val) {
            var totalPrice = getTotalPrice();
            var FinalVal = parseFloat(totalPrice) + val;
            document.getElementById("total").innerHTML = FinalVal.toFixed(2);
        }

        function hideAll() { }
    </script>

</head>
<body>
    <table>
        <tr>
            <td>
                <select id="qt" onchange="totalise()">
                    <option value="0">Please Select....</option>
                    <option value="250">250</option>
                    <option value="500">500</option>
                    <option value="1000">1,000</option>
                    <option value="2000">2,000</option>
                    <option value="3000">3,000</option>
                    <option value="4000">4,000</option>
                    <option value="5000">5,000</option>
                    <option value="10000">10,000</option>
                    <option value="15000">15,000</option>
                    <option value="20000">20,000</option>
                </select>
            </td>
            <td>
                <select id="prices" onchange="totalise()">
                    <option value="0">Please Select....</option>
                    <option value="Full1">Full Colour One Side</option>
                    <option value="Full2">Full Colour Both Sides</option>
                    <option value="Double">Double Size or a Bookmark</option>
                    <option value="Tripple">Tripple Colour Side</option>
                    <option value="TrippleDouble">Tripple Colour Side Double</option>
                </select>
            </td>
            <td>
                <input type="radio" name="artwork" onclick="hideAll(); addDesignPrice(49);">
                Professionally designed by Absolute Graphics <strong>(+€49)</strong>
                <br />
                <input type="radio" name="artwork" onclick="hideAll(); totalise(); changeDiv('upload','block');">I
                will supply my own artwork<br />
                <div id="upload" style="margin-left: 30px; display: none">
                    <br />
                    If you have your own business card design upload it now.<br />
                    <br />
                    Please choose file to upload:
                    <input type="file" name="upload" id="upload2" />
                </div>
            </td>
            <td>
                <span id="total">0.00</span>
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Karen Liddy
ID: 34104130
Thank you soooooo much for your help, very much appreciated.  
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now