SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Get amount and put into inputbox

    IŽd like to get the amount between "(+$" and ")" and add it to the value of the inputbox.

    For example, you select the following:

    Solero Exotic (+$1.85)
    Cappuccino (+$2.49)
    iMac 27-inch 3.1GHz (+$1,999.00)

    These amounts will be subtracted from the options you've selected:
    1.85
    2.49
    1,999.00

    The inputbox will display: 2003.34


    Anyone know how to do this?


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Get amount and put into inputbox</title>
    </head>
     
    <body>
     
    <form action="">
     
      <fieldset>
     
        <ul style="list-style:none;padding-left:0;">
          <li>Ice Cream:
            <select class="optionsIceCream" name="IceCream">
              <option value="IceCream01">Select Ice Cream</option>
              <option value="IceCream02">Solero Exotic (+$1.85)</option>
              <option value="IceCream03">Magnum Ecuador (+$4.85)</option>
              <option value="IceCream04">Cornetto Enigma (+$2.00)</option>
            </select>
          </li>
     
          <li>Coffee:
            <select class="optionsCoffee" name="Coffee">
              <option value="Coffee01">Select Coffee</option>
              <option value="Coffee02">Cup of Joe (+$0.99)</option>
              <option value="Coffee03">Cappuccino (+$2.49)</option>
              <option value="Coffee04">Latte Macchiato (+$2.99)</option>
            </select>
          </li>
     
          <li>Computers:
            <select class="optionsComputers" name="Computers">
              <option value="Computer01">Select Computer</option>
              <option value="Computer02">Dell Inspiron 620 (+$449.99)</option>
              <option value="Computer03">HP Pavilion dv7t (+$949.99)</option>
              <option value="Computer04">iMac 27-inch 3.1GHz (+$1,999.00)</option>
            </select>
          </li>
        </ul>
     
        Total: <input class="totalAmount" type="text" disabled="disabled" value="0.00" />
     
      </fieldset>
     
    </form>
     
    </body>
    </html>

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a few ways you can do this.

    1- use a regular expression to extract just the numerical price.

    2- use substring() to extract the numerical price

    3- If you need the current value of each option as well, you can add the numerical price to the value as well and separate each option's values with a unique character(s) like '#' and then use spilt() to separate out the values for the selected option.

    Can you post the javascript you have so far.

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Another (perhaps easier) option would be to use HTML5 Data Attributes to add the price to the option element.
    e.g.

    Code:
    <select name="whatever">
      <option value="some value" data-price="1.95">Some text here ($1.95)</option>
      <option value="some other value" data-price="3.52">Some other text here ($3.52)</option>
    </select>
    You could then get the price quite easily from the data-price attribute.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    Another (perhaps easier) option would be to use HTML5 Data Attributes to add the price to the option element.
    e.g.
    as long as the op is aware that html5 will remain in development for a few years yet and that the final release of html5 could be different to what it is today. Also support for html5 currently varies greatly between the major browsers.

  5. #5
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    as long as the op is aware that html5 will remain in development for a few years yet and that the final release of html5 could be different to what it is today. Also support for html5 currently varies greatly between the major browsers.
    XHTML specifications allow for custom attributes however using them as "data-*" will result in validation errors. That doesn't stop most people from using them however, functionally they will work fine.

    See: When can I use... Support tables for HTML5, CSS3, etc

    You could also specify attributes with an xml namespace to get around the validation issues.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Anthony.Barnes View Post
    XHTML specifications allow for custom attributes however using them as "data-*" will result in validation errors. That doesn't stop most people from using them however, functionally they will work fine.
    You can just use the HTML5 doctype to avoid the validation errors.

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    or *gasp* take the validation with a grain of salt
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    or *gasp* take the validation with a grain of salt
    Yes, quite so; although I figure if you are starting to use HTML5 it makes sense to use the doctype too.

  9. #9
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    True enough, might as well go the full monty and play the part

    Not to mention that <!DOCTYPE html> is just *SO* much easier to remember.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    Not to mention that <!DOCTYPE html> is just *SO* much easier to remember.
    But you did mention it. After much internal debate, I've decided just to go for that doctype all the time now. Nice and neat, and seems to do the job.

  11. #11
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    But you did mention it. After much internal debate, I've decided just to go for that doctype all the time now. Nice and neat, and seems to do the job.
    We use it for all new design cutups as well, as far as I can tell there is no reason not too.

  12. #12
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But what if the final release of html5 (which is still a few years away) has things in it that will cause pages with "current" html5 code to "malfunction"?

    If you want validated html and it can be done in html4 or xhtml1.0, why risk using html5 before it is finished?

  13. #13
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The final release of HTML5 will be like another decade away. While it *is* so far away, it doesn't mean we can't start using things from the spec now.

    Anthony.Barnes posted a link to Can I Use, which is a great guide to things that you can start using NOW that are supported in many browsers. For browsers that don't support a particular feature there are many polyfill scripts available.

    HTML will likely end up somewhat a "living standard", which would mean the language (in theory) would always keep evolving.

    The challenge is of course for browser vendors to make sure that their browser is backwards compatible with any changes in the spec.

    While there are certain elements of HTML5 that probably aren't quite ready yet, there are many things that are. And as the spec evolves and matures, and browsers continue to update, it will definitely be one of the better ways to build websites IMO.

    Having said all that, nobody *has* to start using HTML5, XHTML is still a valid standard, as is HTML4. As with most things web dev related, there are advantages and disadvantages to using particular technologies. It's up to us (developers / IT folks) to weigh those up and make a decision about which technologies we will use to build our web stuff. (Web stuff is a technical term, clearly)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  14. #14
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have not yet familiarized myself with html5, and I would also like this to work in ie6. Can you post an example of a javascript that can do this?

  15. #15
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had the similar issue. I have used this method below:

    Code:
    private String removeDollarAndCommaSign(String amount)
      {
        if(amount != null)
        {
          amount = amount.replace(",", "");
          amount = amount.replace("$", "");
        }else
        {
          amount = "0";
        }
        return amount;
      }
    Hope it helps!

  16. #16
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I've put together a quick example of how to get data attributes:

    Code HTML4Strict:
    <!DOCTYPE html>
    <html xml:lang="en-au" lang="en-au">
    <head>
    	<meta charset="utf-8">
    	<title>Getting data attributes</title>
    	<script type="text/javascript">
    		function onSubmit() {
    			var idx, selects, price, selectedIdx;
     
    			selects = document.getElementById("theSelects").getElementsByTagName("select");
     
    			for (idx in selects) {
    				selectedIdx = selects[idx].selectedIndex
    				if (selectedIdx > 0 && selects[idx][selectedIdx].value != "") {
    					price = selects[idx][selectedIdx].getAttribute("data-price");
    					alert(price);
    				}
    			}
    		}
    	</script>	
    </head>
    <body>
    	<ul id="theSelects">
    		<li>Section 1
    			<select name="someName" id="someId">
    				<option value="">Please Select</option>
    				<option value="item1" data-price="1.95">Item 1  ($1.95)</option>
    				<option value="item2" data-price="2.50">Item 2 ($2.50)</option>
    			</select>
    		</li>
    		<li>Section 2
    			<select name="someName2" id="someId2">
    				<option value="">Please Select</option>
    				<option value="item1" data-price="3.50">Item 1 ($3.50)</option>
    				<option value="item2" data-price="1999.99">Item 2 ($1,999.99)</option>
    			</select>
    		</li>
    	</ul>
    	<input type="button" onclick="onSubmit();" value="Submit" />
    </body>
    </html>

    Here is the JS with some highlighting and additional comments:
    Code JavaScript:
    function onSubmit() {
    	var idx, selects, price, selectedIdx;
     
    	// get all the selects we want to get the price from
    	selects = document.getElementById("theSelects").getElementsByTagName("select");
     
    	for (idx in selects) {
    		selectedIdx = selects[idx].selectedIndex
    		// we're skipping if the first el is selected because it's
    		// the "please select" item. As an additional, more pragmatic
    		// implementation we'll also check that the value is empty.
     
    		if (selectedIdx > 0 && selects[idx][selectedIdx].value != "") {
    			// get the price data attribute
    			price = selects[idx][selectedIdx].getAttribute("data-price");
    			// do something with the price.
    			alert(price);
    		}
    	}
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  17. #17
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you AussieJohn, but the problem is, I cannot use the data attribute in the Option tag, cause the Option tag will be automatically created by an other script, I cannot manually include the data attribute in each Option tag.
    You will need to get the amount from the text between the Option tags, i.e. <option value="IceCream02">Solero Exotic (+$1.85)</option>
    Also, the plus sign has to be included, i.e. (+$1.85), not ($1.85).


    Anyone know how to do this without adding more attributes to the Option tag?

  18. #18
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Macchiato View Post
    You will need to get the amount from the text between the Option tags,
    Then options 1 or 2 in post #2 will do that for you.

  19. #19
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show me an example?

  20. #20
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Macchiato View Post
    Can you show me an example?
    This looks like a homework exercise to me.

    Earlier I asked

    Can you post the javascript you have so far.
    Make an attempt at it and post your javascript if you get stuck and someone will try to help.

  21. #21
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution, thanks to Dominic H from Yahoo! Answers

    It's simple but very effective and it works perfectly!


    Here's the entire code:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Get amount and put into inputbox</title>
    </head>
     
    <body>
     
    <form action="">
     
      <fieldset>
     
        <ul style="list-style:none;padding-left:0;">
          <li>Ice Cream:
            <select class="optionsIceCream" name="IceCream">
              <option value="IceCream01">Select Ice Cream</option>
              <option value="IceCream02">Solero Exotic (+$1.85)</option>
              <option value="IceCream03">Magnum Ecuador (+$4.85)</option>
              <option value="IceCream04">Cornetto Enigma (+$2.00)</option>
            </select>
          </li>
     
          <li>Coffee:
            <select class="optionsCoffee" name="Coffee">
              <option value="Coffee01">Select Coffee</option>
              <option value="Coffee02">Cup of Joe (+$0.99)</option>
              <option value="Coffee03">Cappuccino (+$2.49)</option>
              <option value="Coffee04">Latte Macchiato (+$2.99)</option>
            </select>
          </li>
     
          <li>Computers:
            <select class="optionsComputers" name="Computers">
              <option value="Computer01">Select Computer</option>
              <option value="Computer02">Dell Inspiron 620 (+$449.99)</option>
              <option value="Computer03">HP Pavilion dv7t (+$949.99)</option>
              <option value="Computer04">iMac 27-inch 3.1GHz (+$1,999.00)</option>
            </select>
          </li>
        </ul>
     
        Total: <input class="totalAmount" type="text" disabled="disabled" value="0.00" />
     
      </fieldset>
     
    </form>
     
    <script type="text/javascript">
        //<![CDATA[
            (function () {
                var selects = document.getElementsByTagName("select"),
                    L = selects.length,
                    i;
     
                for (i = 0; i < L; i++) {
                    selects[i].setAttribute("onchange", "calcTotal();");
                }
            }());
     
            function calcTotal() {
                var icecream = [0.00, 1.85, 4.85, 2.00],
                    coffee = [0.00, 0.99, 2.49, 2.99],
                    computer = [0.00, 449.99, 949.99, 1999.00],
                    total = document.getElementsByTagName("input")[0],
                    select = document.getElementsByTagName("select");
     
                total.value = (icecream[select[0].selectedIndex] +
                    coffee[select[1].selectedIndex] + 
                    computer[select[2].selectedIndex]).toFixed(2);
            }
        //]]>
    </script>
     
    </body>
    </html>
    "Take a seat and have a coffee." -- Macchiato

  22. #22
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The down side of that solution is that if you want to change the prices, you have to do it in 2 places - the html and javascript.

    An easier to maintain solution will enable you to set the prices in only one location (either the js or html) and the second location gets the data it needs from the first location automatically.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •