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 5 of 5
  1. #1
    Regular Coder DR.Wong's Avatar
    Join Date
    Jan 2005
    Posts
    360
    Thanks
    23
    Thanked 1 Time in 1 Post

    Multiply number in textbox and display result

    Hey there guys,

    I'm a php programmer and trying to learn Javascript.

    At the moment I have a little interface thing I want to do but have no idea where to start.

    I have the following form :

    Code:
    <table width="708" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">1 cent</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="1c" type="text" id="1c" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">2 cent</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="2c" type="text" id="2c" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of<font color="#FF0000"> 5 cent</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="5c" type="text" id="5c" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">10 cent</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="10c" type="text" id="10c" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">20 cent</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="20c" type="text" id="20c" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">50 cent</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="50c" type="text" id="50c" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">1 rand</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="1r" type="text" id="1r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287"><div align="center"></div></td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">2 rand</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="2r" type="text" id="2r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">5 rand</font> coins :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="5r" type="text" id="5r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">10 rand</font> notes :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="10r" type="text" id="10r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">20 rand</font> notes :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="20r" type="text" id="20r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">50 rand</font> notes :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="50r" type="text" id="50r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">100 rand</font> notes :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="100r" type="text" id="100r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td width="213"><div align="left">Number of <font color="#FF0000">200 rand</font> notes :</div></td>
                                    <td width="208"><div align="left">
                                        <label>
                                        <input name="200r" type="text" id="200r" value="0" />
                                        </label>
                                    </div></td>
                                    <td width="287">&nbsp;</td>
                                  </tr>
                                </table>
    It's basically a form to count coins and then add up the amount of money I have at the end.

    So, in the first row, there is a 1 cent coin, if i type in 5 it must multiply it by 0.01 to show the dollar value which must be displayed in the empty column to the right of the textfield. I suppose we could use an onkeyup or onchange.. I'm not entirely sure.

    There are textfields for each denomination so the multiplication would be different for each one.

    If someone could show me the first one I could do the rest.

    Also, how would I add each of these variables to show the total at the bottom of the page???

    Any help would be appreciated!
    -DR.Wong

    Wheres the food at?

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    <script type="text/javascript">
    window.addEventListener?window.addEventListener('load',function()
    	{
    		ray.multiply(); // Call multiply method
    	},false):
    window.attachEvent('onload',function()
    	{
    		ray.multiply(); // Call multiply method
    	}); // FF : IE
    var ray=
    {
    multiply:function()
    	{
    	var inps=this.getEl('input'); // Get all input elements
    	for(var i=0;i<inps.length;i++)
    		{
    		inps[i].onkeyup=function()
    			{
    			var divisor = this.getAttribute('id').indexOf('c')>-1?100:1; // Set divisor
    			var rate = this.getAttribute('id').split(divisor===100?'c':'r')[0];
    			convert = ((Number(rate)/divisor)*Number(this.value)); // Do the computation
    			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('td')[2].firstChild.nodeValue=
    				convert; // Show the converted value to the last td
    			} // End of the anonymous function assigned to the onkeyup event
    		} // End of the for loop
    	},
    getEl:function(el)
    	{
    		return document.getElementsByTagName(el); // Get elements by 'el' tagName
    	}
    }
    </script>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder DR.Wong's Avatar
    Join Date
    Jan 2005
    Posts
    360
    Thanks
    23
    Thanked 1 Time in 1 Post
    Whoa! Thanks a lot.

    How would I call this function?
    -DR.Wong

    Wheres the food at?

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Just add that script on your page. It runs onload.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    DR.Wong (11-27-2008)

  • #5
    Regular Coder DR.Wong's Avatar
    Join Date
    Jan 2005
    Posts
    360
    Thanks
    23
    Thanked 1 Time in 1 Post
    That's amazing! Thank you so much!!!!!!!!
    -DR.Wong

    Wheres the food at?


  •  

    Posting Permissions

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