Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

calculation part in form using javascript

Posted on 2010-01-07
14
Medium Priority
?
371 Views
Last Modified: 2013-11-19
small query on javascript...
i'm having a form having 2 fields
area
total amount
what i want is to get amount per area and to display the  same in real time in txt form not inside input box.
lets say
area = 200
total amount = 5000
below that is want to 25 per area unit
i.e. total amount/area

next..
how to display total amount in words i.e. 5000 to be show as
Five thousands only

if you want you can check the form at http://www.makaan.com/property/create-listing.php 

need urgent help
0
Comment
Question by:global_expert_advice
  • 7
  • 5
  • 2
14 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1000 total points
ID: 26199052
some thing like this

<input type='text' id='area' onblur='calculatePricePerArea()'\>
<input type='text' id='amount' onblur='calculatePricePerArea()'\>
<div id='pricePerArea'></div>
<script>
    function calculatePricePerArea()
    {
         var area = document.getElementById('area').value;
         var amount = document.getElementById('amount').value;
         if ( amount != "" && area!= "")
        {
             document.getElementById('pricePerArea').innerHTML = "total : " +(amount/area) ;
         }
    }
</script>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26199062
0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 26199520
thanks
but after inputing your code... nothing happening under div
i place the code inside form
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26199558
please post your code
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26199586
Also, you need to test by adding the values in both the textbox and then tabbing out of the textbox (on blur event).
0
 
LVL 5

Expert Comment

by:code-colors
ID: 26199592
Hi,

Onblur fired when focus lost from the text box, So try it with using the "TAB" Key.

0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 26199766
okay fine...
i checked in new form and its working perfectly.. don't know whats wrong with my current form..
actually my current form is inside <div> and <fieldset> below is the code for the same including urs please check,,,,moreover i'm using the form in smarty like its form.tpl file... but hope it should work as other javascripts too working.

<div>
                  
            <fieldset><form method="POST" action="list_property_optional_details.php" name="listproperty_frm">
                                    <input type="hidden" name="makaan_id" size="5" value="{$makaan_id}">
                                                                                                <table border="0" width="100%" cellspacing="0" cellpadding="5">
                                                                                                      <tr>
                                                                                                            <td>
                                                                                                            <div align="center">
                                                                                                                  <table border="0" width="100%" cellpadding="0">
                                                                                                                        <tr>
                                                                                                                              <td style="border: 1px solid #3399CC; padding: 0" bgcolor="#3399CC" height="25"><b><font color="#FFFFFF" face="Arial" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; List Your Property :: Sell / Rent / Lease ::</font></b></td>
                                                                                                                        </tr>
                                                                                                                        <tr>
                                                                                                                              <td style="border: 1px solid #3399CC; padding: 0">
                                                                                                                              <div align="center">
                                                                                                                                    <table border="0" width="100%" cellpadding="2">
                                                                                                                                          <tr>
                                                                                                                                                <td bgcolor="#BCDEFA">
      
                  
                  <div align="center">
                        <table width="100%">
                              <tr>
                                    <td height="25">
                                    &nbsp;</td>
                                    <td height="25">
                                    &nbsp;</td>
                                    <td height="25">
                                    &nbsp;</td>
                              </tr>
                        </table></div>
                  <div align="center">
                        <table cellpadding="2" width="100%">
                              <tr>
                                    <td width="42%">
                                    <p align="right"><font face="Arial" size="2">Listing Type<font color="#FF0000">*</font></font></td>
                                    <td width="2%">
                                    &nbsp;</td>
                                    <td width="56%">
                                    <font face="Arial">
                                    <input type="radio" name="listingtype" value="Fast Response"><font size="2">Fast
                                    Response
                                    </font>
                                    <input type="radio" name="listingtype" value="Basic" checked><font size="2">Basic</font></font></td>
                              </tr>
                              <tr>
                                    <td width="42%">
                                    <p align="right"><font face="Arial" size="2">Transaction
                                    Type</font><font color="#FF0000" face="Arial" size="2">*</font></td>
                                    <td width="2%">
                                    <p align="center"><font face="Arial" size="2">:</font></td>
                                    <td width="56%">
                                    <font face="Arial">
                                    <input type="radio" name="transactiontype" value="Sell" class="transactiontype"><font size="2">Sell&nbsp;
                                    </font>
                                    <input type="radio" name="transactiontype" value="Rent / Lease"  class="transactiontype"><font size="2">Rent
                                    / Lease</font></font></td>
                              </tr>
                        </table></div>
                  
                  <div>
                        <table cellpadding="2" width="100%"><tr>
                              <td align="right" width="42%">
                        <font face="Arial" size="2">Property Type</font></td>
                              <td align="center" width="2%">
                        <font face="Arial" size="2">:</font></td>
                        <td width="56%">
                        <select name='propertytype' style='width:175px;' onChange="onSelectChange();">
                        <option style='background-color: #ffffff;' value=''>---Select Property Type---</option>
      <optgroup label='Residential Property' style='background-color: #FDF6B5;'></optgroup>
      <option style='background-color: #ffffff;' value='3'>Apartment</option>
      <option style='background-color: #ffffff;' value='4'>Plot/Land</option>
      <option style='background-color: #ffffff;' value='5'>Builder Floor</option>
      <option style='background-color: #ffffff;' value='6'>Bungalow/Villa</option>
      <option style='background-color: #ffffff;' value='7'>Farm House</option>
      <option style='background-color: #ffffff;' value='8'>Service/Studio Apartment</option>
      <option style='background-color: #ffffff;' value='9'>Other Residential</option>
      <optgroup label='Commercial Property' style='background-color: #FDF6B5;'></optgroup>
      <option style='background-color: #ffffff;' value='10'>Land</option>
      <option style='background-color: #ffffff;' value='11'>Office</option>
      <option style='background-color: #ffffff;' value='12'>Business Centre</option>
      <option style='background-color: #ffffff;' value='13'>Warehouse/Godown</option>
      <option style='background-color: #ffffff;' value='14'>Industrial setup</option>
      <option style='background-color: #ffffff;' value='15'>Shop</option>
      <option style='background-color: #ffffff;' value='16'>Other Commercial</option>
      </select></td></tr>
                        <tr><td align="right" width="42%">
                        <font face="Arial" size="2">Project / Society Name</font></td>
                                    <td align="center" width="2%">
                        <font face="Arial" size="2">:</font></td><td width="56%">
                        <input type="text" name="proj_soc_name" size="20"></td></tr>
                        <tr><td align="right" width="42%">
                        <font face="Arial" size="2">Property Address</font></td>
                                    <td align="center" width="2%">
                        <font face="Arial" size="2">:</font></td><td width="56%">
                        <textarea rows="2" name="prop_address" cols="20"></textarea></td></tr></table>
                  </div>
                  <div>
                        <table cellpadding="2" width="100%">
                              <tr>
    <td align="right" width="42%"><font face="Arial" size="2">Country</font></td>
    <td align="center" width="2%">:</td>
    <td  width="56%">
      
      <font face="Arial">
<select name="country" onchange="getState(this.value)" size="1">
<optgroup label="Select Country">
{section name=id loop=$countriesname}
<option value="{$countriesid[id]}">{$countriesname[id]}</option>
{/section}</optgroup>
</select></font></td>
                                                                          </tr>
                              <tr>
    <td align="right" width="42%"><font face="Arial" size="2">State</font></td>
    <td align="center" width="2%">:</td>
    <td width="56%" ><div id="statediv"><font face="Arial">
    <select name="state" >
      <option>Select Country First</option>
        </select></font></div></td>
                                                                          </tr>
                              <tr>
    <td align="right" width="42%"><font face="Arial" size="2">City</font></td>
    <td align="center" width="2%">:</td>
    <td width="56%" ><div id="citydiv"><font face="Arial">
    <select name="city">
            <option>Select State First</option>
        </select></font></div></td>
                                                                          </tr>
                              <tr>
    <td align="right" width="42%"><font face="Arial" size="2">Locality</font></td>
    <td align="center" width="2%">:</td>
    <td width="56%" ><div id="localitydiv"><font face="Arial">
            <select name="locality">
            <option>Select City First</option>
        </select></font></div></td>
                                                                          </tr>
                              <tr>
                                          <td width="42%" align="right">
                                          <font face="Arial" size="2">Area </font>
                                          <font color="#FF0000">*<br>
                                          </font><font face="Arial" style="font-size: 9pt">(As
                                          in property document)</font></td>
                                          <td width="2%" align="center">
                                          :</td>
                                          <td width="56%" align="left">
                        <table border="0" width="100%" cellspacing="0" cellpadding="0">
                              <tr>
                                    <td><input type="text" name="area" size="20"></td>
                                    <td>
                                    <select name='unit'style='width:90px;'>
                                    <option value='' selected >-- Unit --</option>
                                    <option value='Sq.Yd'>Sq.Yd</option>
                                    <option value='Sq.Mtr'>Sq.Mtr</option>
                                    <option value='Sq.Ft'>Sq.Ft</option></select></span></td>
                              </tr>
                              <tr>
                                    <td colspan="2">
                                    <p align="center"><font face="Arial" size="2">Unit Converter</font></td>
                              </tr>
                        </table>
                                          </td>
                                                                        </tr>
                              </table>
                  </div>
                  <div id="price">
                        <table width="100%"><tr><td width="42%" align="right">
                        <font face="Arial" size="2">Total Price (Rs.)</font><font color="#FF0000" face="Arial" size="2">*</font></td>
                                    <td width="2%" align="center">
                        <font face="Arial" size="2">:</font></td>
                                    <td width="56%" align="left">
                        <input type="text" name="price" size="20"></td></tr><tr><td width="42%" align="right">
                        <font face="Arial" size="2">Is This Price Negotiable</font><font color="#FF0000" face="Arial" size="2">*</font></td>
                                    <td width="2%" align="center">
                        &nbsp;</td>
                                    <td width="56%" align="left">
                        <font face="Arial">
                        <input type="radio" name="negotiateprice" value="Yes" checked><font size="2">Yes</font><input type="radio" name="negotiateprice" value="No"><font size="2">No</font></font></td></tr><tr><td width="42%" align="right">
                                                                                                      <input type='text' id='area' onblur='calculatePricePerArea()'\>
<input type='text' id='amount' onblur='calculatePricePerArea()'\>
<div id='pricePerArea'></div>
<script>
    function calculatePricePerArea()
    {
         var area = document.getElementById('area').value;
         var amount = document.getElementById('amount').value;
         if ( amount != "" && area!= "")
        {
             document.getElementById('pricePerArea').innerHTML = "total : " +(amount/area) ;
         }
    }
</script></td>
                                    <td width="2%" align="center">
                        &nbsp;</td>
                                    <td width="56%" align="left">
                        &nbsp;</td></tr></table>
                  </div>
                  <div id="rent">
                        
                        <table width="100%"><tr><td width="42%" align="right">
                        <font face="Arial" size="2">Rent (Rs.)</font><font color="#FF0000" face="Arial" size="2">*</font></td>
                                    <td width="2%" align="center">
                        <font face="Arial" size="2">:</font></td>
                                    <td width="56%" align="left">
                        <input type="text" name="rent" size="20"></td></tr><tr><td width="42%" align="right">
                        <font face="Arial" size="2">Is This Rent Negotiable</font><font color="#FF0000" face="Arial" size="2">*</font></td>
                                    <td width="2%" align="center">
                        &nbsp;</td>
                                    <td width="56%" align="left">
                        <font face="Arial">
                        <input type="radio" name="negotiaterent" value="Yes" checked><font size="2">Yes</font><input type="radio" name="negotiaterent" value="No"><font size="2">No</font></font></td></tr></table>
                  </div>
                  <div>
                        <table cellspacing="0" cellpadding="0" width="100%"><tr><td width="42%">
                        <tr><th id="output1"></th></tr>
      <tr><th id="output2"></th></tr></table>
                  </div>
                  </td>
                                                                                                                                          </tr>
                                                                                    <tr><td bgcolor="#BCDEFA">
            </td></tr>
                                                                                    <tr><td bgcolor="#BCDEFA">
                                                                                          <p align="center">
                                    <input type="image" src="http://img.makaan.com/images/requirement/submit-button.gif" name="I1"></td></tr>
                                                                                                                                          </table>
                                                                                                                              </div>
                                                                                                                              </td>
                                                                                                                        </tr>
                                                                                                                  </table>
                                                                                                            </div>
                                                                                                            </td>
                                                                                                      </tr>                                                                                          </table></form></fieldset>                  </div>
0
 
LVL 5

Expert Comment

by:code-colors
ID: 26199903
Hi,

You have another input box in this page with the same id "Area". Thats the problem.

Change the input id and try it.

<input type='text' id='NewArea' onblur='calculatePricePerArea()'\>
<input type='text' id='amount' onblur='calculatePricePerArea()'\>
<div id='pricePerArea'></div>
<script>
    function calculatePricePerArea()
    {
         var area = document.getElementById('NewArea').value;
         var amount = document.getElementById('amount').value;
         if ( amount != "" && area!= "")
        {
             document.getElementById('pricePerArea').innerHTML = "total : " +(amount/area) ;
         }
    }
</script>
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26199983
There are 2 input areas and amount your code.
You have not called the javascript method from the right input text box.

One suggestion: Please format your code properly, it is very painful to read and understand otherwise.

thanks
0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 26199989
oppss... one small error i had...
actually i had one more input field which is having same  name of area... so result not coming
now working like chart...
thanks gurvinder372
now just one thing left...  number to words...
i checked your link but didnt get exactly... i'm not a java expert...
so please guide me this is the last step of my form and much important.... to show amount in words..
regards
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26200037
can you post the code where you tried this number to word conversion, using the links i posted.
I will be happy to pitch in case they didn't work.

thanks
0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 26201049
guys thanks a lot...
for the calculation part..
however the rupees to word... code i got from EE only.. using below link its like charm...
I'm sure you too will like this code..
However i gave it onblur effect instead click option
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_20423341.html

My changed code
<html>

<head>

<script language="JavaScript"><!--
function makeArray0() {
  for (i = 0; i<makeArray0.arguments.length; i++)
  this[i] = makeArray0.arguments[i];
}

var numbers = new makeArray0('','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifthteen','sixteen','seventeen','eighteen','nineteen');

var numbers10 = new makeArray0('','ten','twenty','thirty','fourty','fifty','sixty','seventy','eighty','ninety');

function chequeAmount(input) {
  var rupees = Math.floor(input);
  var paise = Math.round((input*100 - rupees*100));
  var thousands = (rupees - rupees % 1000) / 1000;

  var lakhs = 0;
  var crores = 0;
  rupees -= thousands * 1000;
  if(thousands > 99) {
     lakhs = Math.floor(thousands / 100) ;
     thousands = thousands - lakhs*100;
  }
  if(lakhs > 99) {
     crores = Math.floor(lakhs / 100) ;
     lakhs = lakhs - crores*100;
  }
  if(crores > 99) {
       alert ("Amount Too Long");
       return '';
  }

  var hundreds = (rupees - rupees % 100) / 100;
  rupees -= hundreds * 100;

  var output = '';
  output += (crores > 0 ? fN(crores) + ' Crores ' : '') +
            ((( lakhs >0 || thousands > 0 ||
                hundreds > 0 || rupees > 0 ||
                paise > 0
              ) && crores > 0) ? 'and ' : '') +
                 (lakhs > 0 ? fN(lakhs) + ' Lakhs ' : '') +
                 (thousands > 0 ? fN(thousands) + ' thousand ' : '') +
            (hundreds > 0 ? fN(hundreds) + ' hundred ' : '') +
            (rupees > 0 ? fN(rupees) + ' ' : '') +
            ((lakhs >0 || thousands > 0 || hundreds > 0 || rupees > 0) ? 'rupees ' : '') +
            ((Math.floor(input) > 0 && paise > 0) ? 'and ' : '') +
            (paise > 0 ? fN(paise) + ' paise' : '');

  return output.substring(0,1).toUpperCase() + output.substring(1);
}

function fN(i) {
  if (i<20) return numbers[i];
  var tens = (i - i % 10) / 10, units = i - (i - i % 10);
  return numbers10[tens] + ((tens > 0 && units > 0) ? '-' : '') + numbers[units];
}
//--></script>
</head>
<body>
<form>
<input type="text" name="amount" onblur="document.getElementById('Convert').innerHTML=chequeAmount(this.form.amount.value - 0)">
<span id="Convert"></span>
</form>
</body>
</html>
0
 
LVL 1

Author Closing Comment

by:global_expert_advice
ID: 31673948
instant answer
and good support
love to give him paid projects
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26207057
Thanks for the points :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

578 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