Solved

Total to display as text not textbox

Posted on 2010-11-10
7
298 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
3 Use Cases for Connected Systems

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

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

777 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