Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Total to display as text not textbox

Posted on 2010-11-10
7
Medium Priority
?
308 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

963 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