Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    .js
    .js is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    [JAVASCRIPT] I need your help. Simple calculations.

    Hi guys, this is my very first thread.
    I really need your help. It's very easy for you (I think) but not for me. Hehe :D

    Okay so if I select the radio button Yes (yes for GST - 10%) then the Discount amount should show 5.00 and then the Total Bill Amount should show the total cost 55.00 (Cost + GST = 55.00)

    Image: (Click to understand what I mean)
    [JAVASCRIPT] I need your help. Simple calculations.-v6qp2hp.png

    If I select No then the Discount amount should stay 0.00 and Total Bill Amount should be 50.00. How would I do that? Please help me if you don't mind. Hope you know what I mean.

    This is my javascript code so far:
    Code:
    // JavaScript Document
    
    function dispTypeMeal()
    {
        document.form1.cost.value = document.form1.meal.value;    
    }
    
    function calculate()
    {
        //get values from form
        var mealCost = document.form1.cost.value;
        var totalGst = document.form1.gst.value;
        
        //do calculations
        var Amount = mealCost * 0.10;
        
        //display the values
        document.form1.gst.value = Amount;
    
        return false;
    }

    This is my HTML code in case you need to see:
    PHP Code:
    <!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" language="javascript" src="assets/OrderFormJava.js"></script>
    </head>

    <body>
    <form id="form1" name="form1" method="post" action="">
      <table width="60%" border="1" align="center" cellpadding="3" cellspacing="3">
        <tr>
          <th>Item</th>
          <th>Details</th>
        </tr>
        <tr>
          <td>Meal</td>
          <td><label for="meal"></label>
            <select name="meal" size="1" id="meal" onchange="dispTypeMeal();">
              <option value="50.00" selected="selected">Full meal</option>
              <option value="15.00">Mains only</option>
              <option value="18.00">Main and drink</option>
              <option value="45.00">Full, no dessert</option>
              <option value="40.00">Full, no seafood</option>
          </select></td>
        </tr>
        <tr>
          <td>Cost</td>
          <td><label for="cost"></label>
          <input name="cost" type="text" disabled="disabled" id="cost" value="50.00" size="6" /></td>
        </tr>
        <tr>
          <td>GST (10%)</td>
          <td><label for="gst"></label>
          <input name="gst" type="text" disabled="disabled" id="gst" value="0.00" size="6" /></td>
        </tr>
        <tr>
          <td>Regular customer?</td>
          <td><input name="radio" type="radio" id="regular" value="regular" checked="checked" />
          <label for="regular">Yes 
            <input type="radio" name="radio" id="regular2" value="regular" />
          No</label></td>
        </tr>
        <tr>
          <td>Discount amount</td>
          <td><label for="discountAmount"></label>
          <input name="discountAmount" type="text" disabled="disabled" id="discountAmount" value="0.00" size="6" /></td>
        </tr>
        <tr>
          <td>Total Bill Amount</td>
          <td><label for="billAmount"></label>
          <input name="billAmount" type="text" disabled="disabled" id="billAmount" value="0.00" size="6" /></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="submit" name="button" id="button" value="Submit" onclick="javascript:return calculate();"/>
          <input type="reset" name="button2" id="button2" value="Reset" /></td>
        </tr>
      </table>
    </form>
    </body>
    </html> 
    Your help would be greatly appreciated! Thanks.

    Kind regards.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,174
    Thanks
    23
    Thanked 601 Times in 600 Posts
    the Discount amount should show 5.00 and then the Total Bill Amount should show the total cost 55.00
    A discount is a lessening of the total bill, not adding to it. The Total Bill Amount should show the total cost 45.00
    So that's how I did the JS.
    I removed the disabled="disabled" from all the input tags, cause it's too hard to read. I think the onblur I added will keep cheaters from messing up the bill.
    I also made the bill automatic so the submit and rest was not needed.

    If you have questions I'll answer them:
    Code:
    <!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>
    </head>
    
    <body>
    <form id="form1" name="form1" method="post" action="">
      <table width="60%" border="1" align="center" cellpadding="3" cellspacing="3">
        <tr>
          <th>Item</th>
          <th>Details</th>
        </tr>
        <tr>
          <td>Meal</td>
          <td><label for="meal"></label>
            <select name="meal" size="1" id="meal" onchange="dispTypeMeal();">
    		<option value="0.00"></option>
              <option value="50.00">Full meal</option>
              <option value="15.00">Mains only</option>
              <option value="18.00">Main and drink</option>
              <option value="45.00">Full, no dessert</option>
              <option value="40.00">Full, no seafood</option>
          </select></td>
        </tr>
        <tr>
          <td>Cost</td>
          <td><label for="cost"></label>
          <input name="cost" type="text" id="cost" value="0.00" size="6" onblur="dispTypeMeal();" /></td>
        </tr>
        <tr>
          <td>GST (10%)</td>
          <td><label for="gst"></label>
          <input name="gst" type="text" id="gst" value="0.00" size="6" /></td>
        </tr>
        <tr>
          <td>Regular customer?</td>
          <td>
    	  <input name="radio" type="radio" id="regular" value="regular" onclick="dispTypeMeal();" />
          <label for="regular">Yes</label>
            <input type="radio" name="radio" id="regular2" value="regular" onclick="dispTypeMeal();" />
          <label for="regular2">No</label>
    	  </td>
        </tr>
        <tr>
          <td>Discount amount</td>
          <td><label for="discountAmount"></label>
          <input name="discountAmount" type="text" id="discountAmount" value="0.00" size="6" /></td>
        </tr>
        <tr>
          <td>Total Bill Amount</td>
          <td><label for="billAmount"></label>
          <input name="billAmount" type="text" id="billAmount" value="0.00" size="6" /></td>
        </tr>
      </table>
    </form>
    
    <script type="text/javascript">
    
    function dispTypeMeal(){
        document.form1.cost.value = document.form1.meal.value;
    	calculate();
    }
    function calculate(){
    	if(document.getElementById('regular').checked)
    		document.form1.gst.value = (.10*(document.form1.meal.value)).toFixed(2);
    	else
    		document.form1.gst.value = '0.00';
    	document.form1.discountAmount.value = document.form1.gst.value;
    	document.form1.billAmount.value = (document.form1.meal.value - document.form1.discountAmount.value).toFixed(2);
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    .js (06-10-2014)

  • #3
    .js
    .js is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OMG you're a friggin genius! Thank you very much for this. Going to learn how you did that.
    Thank you again.

    Kind regards.


  •  

    Posting Permissions

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