Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Total to display as text not textbox

Posted on 2010-11-10
7
Medium Priority
?
305 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

705 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