Solved

Total to display as text not textbox

Posted on 2010-11-10
7
302 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

738 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