SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make item appear in textarea

    i need the item/s ticked to be displayed in the textarea along with the price of that item.. and when unticked.. they should be removed from the textarea..

    i have tried to keep the page as simple as possible..you can see the page here.
    http://www.londonheathrowcars.com/newding.htm

    here is the code.. thanks in advance.. running out of time..someone please help me.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    </HEAD>
    
    <BODY>
    <script language="JavaScript">
    <!-- hide contents from old browsers
    
            var Cost, Grand_Total;
    
    function tally()
            {
            Cost = 0;
            if (document.orderform.Item1.checked) { Cost = Cost + 180;    }
            if (document.orderform.Item2.checked) { Cost = Cost + 160;    }
            if (document.orderform.Item3.checked) { Cost = Cost + 500;               }
            if (document.orderform.Item4.checked) { Cost = Cost + 100;               }
           
    
           
    
            Cost = dollar(Cost);
            Grand_Total = parseFloat(Cost);
            Grand_Total = dollar(Grand_Total);
    
            document.orderform.Total.value = "&#163;" + Cost;
            document.orderform.GrandTotal.value = "&#163;" + Grand_Total;
            }
    
    function dollar (amount)
    {
            amount = parseInt(amount * 100);
            amount = parseFloat(amount/100);
            if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
            {
                    amount = amount + ".00"
                    return amount;
            }
            if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
            {
                    amount = amount + "0";
                    return amount;
            }
            if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
            {
                    amount = amount;
                    return amount;
            }
            return amount;
    }
    
    //-->
    </script>
    
    <form method="post" name="orderform">
    <table border="0">
        <tr><td colspan="4">
    <p><input type="checkbox" name="Item1" value="Item1_chosen" onclick="tally()"> XBOX 360 (&#163;180.00)
    <p><input type="checkbox" name="Item2" value="Item2_chosen" onclick="tally()"> Nintendo Wii (&#163;160.00)
    <p><input type="checkbox" name="Item3" value="Item3_chosen" onclick="tally()"> Playstation 3 (&#163;500.00)
    <p><input type="checkbox" name="Item4" value="Item4_chosen" onclick="tally()"> Playstation 2 (&#163;100.00)
        </td></tr>
    	<tr><td><textarea name="lstItems" rows="5" cols="20"></textarea></td></tr>
    <tr>
    <td> Total <input type="text" name="Total" value="&#163;0" size="7"></td>
    
    </tr>
    
       
          <tr><td colspan="4" height="3"><hr></td></tr>
          
      </table>
    </form>
    
    </BODY>
    </HTML>

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an idea. I don't know how cross-browser it will be because of my use of "nextSibling.nodeValue". Also, the use of '\r\n' may be platform dependent, I'm not sure.
    Code:
    function tally()
    {
      var d, i = 1, price = 0, f = document.forms['orderform'];
      var ta = f.lstItems;
      var c = f['Item' + i];
      while (c) {
        d = c.nextSibling.nodeValue;
        if (c.checked) {
          if (ta.value.indexOf(d) == -1) {
            ta.value += d + '\r\n';
          }
          price += parseFloat(d.substr(d.indexOf('&#163;') + 1, d.length - 2));
        }
        else { // not checked
          ta.value = ta.value.replace(d + '\r\n', '');
        }
        c = f['Item' + (++i)];
      }
      f.Total.value = '&#163;' + price;
    }

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw, you need to close the <p> elements that contain the <input> elements, or it might cause problems.

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that.. its great..

    the page code is below.. the prob is when you untick the tickbox.. the total changes but the item doesnt remove from the textarea.

    dont worry about accessibility.. this is just a temp little task for my friends coursework..

    you can see the page here..
    http://www.londonheathrowcars.com/newding.htm

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    </HEAD>
    
    <BODY>
    <script language="JavaScript">
    <!-- hide contents from old browsers
    
            var Cost, Grand_Total;
    
    function tally()
    {
      var d, i = 1, price = 0, f = document.forms['orderform'];
      var ta = f.lstItems;
      var c = f['Item' + i];
      while (c) {
        d = c.nextSibling.nodeValue;
        if (c.checked) {
          if (ta.value.indexOf(d) == -1) {
            ta.value += d + '\r\n';
          }
          price += parseFloat(d.substr(d.indexOf('&#163;') + 1, d.length - 2));
        }
        else { // not checked
          ta.value = ta.value.replace(d + '\r\n', '');
        }
        c = f['Item' + (++i)];
      }
      f.Total.value = '&#163;' + price;
    }
    
    function dollar (amount)
    {
            amount = parseInt(amount * 100);
            amount = parseFloat(amount/100);
            if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
            {
                    amount = amount + ".00"
                    return amount;
            }
            if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
            {
                    amount = amount + "0";
                    return amount;
            }
            if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
            {
                    amount = amount;
                    return amount;
            }
            return amount;
    }
    
    //-->
    </script>
    
    <form method="post" name="orderform">
    <table border="0">
        <tr><td colspan="4">
    <p><input type="checkbox" name="Item1" value="Item1_chosen" onclick="tally()"> XBOX 360 (&#163;180.00)</p>
    <p><input type="checkbox" name="Item2" value="Item2_chosen" onclick="tally()"> Nintendo Wii (&#163;160.00)</p>
    <p><input type="checkbox" name="Item3" value="Item3_chosen" onclick="tally()"> Playstation 3 (&#163;500.00)</p>
    <p><input type="checkbox" name="Item4" value="Item4_chosen" onclick="tally()"> Playstation 2 (&#163;100.00)</p>
        </td></tr>
    	<tr><td><textarea name="lstItems" rows="5" cols="30"></textarea></td></tr>
    <tr>
    <td> Total <input type="text" name="Total" value="&#163;0" size="7"></td>
    
    </tr>
    
       
          <tr><td colspan="4" height="3"><hr></td></tr>
          
      </table>
    </form>
    
    </BODY>
    </HTML>

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh.. it does remove in ie7.. but not in ff..

    if you could do me a favour.. the pc it will be tested on i think has an older ie.. i dont have that anymore.. can you make sure that it works in ie5 or 6.. and that will be fine..
    thanks.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This thing is starting to get a little ugly, eh?

    Try this:

    Code:
    function tally()
    {
      var idx, d, i = 1, price = 0, f = document.forms['orderform'];
      var ta = f.lstItems;
      var c = f['Item' + i];
      while (c) {
        d = xTrim(c.nextSibling.nodeValue);
        idx = ta.value.indexOf(d);
        if (c.checked) {
          if (idx == -1) { // if not in TA then append it
            ta.value += d + '\n';
          }
          price += parseFloat(d.substr(d.indexOf('&#163;') + 1, d.length - 2));
        }
        else if (idx != -1) { // not checked and is in TA so remove it
          ta.value = ta.value.replace(d, '');
          // Op9.02, IE5 and IE7 (WinXP), IE6 (Win2K)
          ta.value = ta.value.replace(/^\r\n/g, '');
          ta.value = ta.value.replace(/\r\n\r\n/g, '\r\n');
          // FF2 (WinXP)
          ta.value = ta.value.replace(/^\n/g, '');
          ta.value = ta.value.replace(/\n\n/g, '\n');
        }
        c = f['Item' + (++i)];
      }
      f.Total.value = '&#163;' + price;
    }
    
    function xTrim(s) {
      return s.replace(/^\s+|\s+$/g, '');
    }


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
  •