We help IT Professionals succeed at work.

javascript function to calculate the fields

PNKJ
PNKJ asked
on
I need a javascript function on page load that would fill in  textbox_3 and textbox_4 on client side and add $ sign since it is

amount and can be decimals.
In my form the values for textbox_5, textbox_1 and textbox_2 are filled through database.

textbox_3  should be = textbox_5 * textbox_1    for eg:( .10 * $590.00)
textbox_4 =  textbox_5 * textbox_2    for eg:(.10 * $400)

<tr>
    <td align="left" >
     Rate:<br />
    <asp:TextBox runat="server" ID="textbox_5" ></asp:TextBox></td>
</tr>

<tr>
 <td width="130" align="left" >
 Totals
  </td>
<td>
  <asp:TextBox runat="server" ID="textbox_1"></asp:TextBox></td>
 <td>
  <asp:TextBox runat="server" ID="textbox_2"> </asp:TextBox></td>
 <td>

</tr>
                                           
 <tr>
 <td>
 <asp:TextBox runat="server" ID="textbox_3"></asp:TextBox></td>
 <td>
 <asp:TextBox runat="server" ID="textbox_4"></asp:TextBox></td>
 <td>
 </tr>                                      
 </table>
                   
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

Author

Commented:
No this is different one.

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
Try this:
<!-- I need a javascript function on page load that would fill in  textbox_3 and textbox_4 on client side and add $ sign since it is 
 
amount and can be decimals.
In my form the values for textbox_5, textbox_1 and textbox_2 are filled through database.
 
textbox_3  should be = textbox_5 * textbox_1    for eg:( .10 * $590.00)
textbox_4 =  textbox_5 * textbox_2    for eg:(.10 * $400)
 -->
<script type="text/javascript"><!--
window.onload=init;
function init()
{
	var t1 = clean(document.getElementById("textbox_1").value);
	var t2 = clean(document.getElementById("textbox_2").value);
	var t5 = clean(document.getElementById("textbox_5").value);
	document.getElementById("textbox_3").value = "$" +(parseFloat(t5) * parseFloat(t1)).toFixed(2) ;
	document.getElementById("textbox_4").value = "$"+(parseFloat(t5) * parseFloat(t2)).toFixed(2) ;
}
function clean(str)
{
	return str.replace(/[^\d\.]/g,"");
}
//--></script>
<tr>
    <td align="left" >
     Rate:<br />
    <!-- <asp:TextBox runat="server" ID="textbox_5" ></asp:TextBox> -->
    <input type="text" ID="textbox_5" value=".10"/>
    </td>
</tr>
 
<tr>
 <td width="130" align="left" >
 Totals
  </td>
<td>
  <!-- <asp:TextBox runat="server" ID="textbox_1"></asp:TextBox> -->
  <input type="text" ID="textbox_1" value="$590.00"/>
 </td>
 <td>
  <!-- <asp:TextBox runat="server" ID="textbox_2"> </asp:TextBox> -->
  <input type="text" ID="textbox_2" value="$400"/>
  </td>
 <td>
 
</tr>
                                            
 <tr>
 <td>
 <!-- <asp:TextBox runat="server" ID="textbox_3"></asp:TextBox> -->
 <input type="text" ID="textbox_3" value=""/>
 </td>
 <td>
 <!-- <asp:TextBox runat="server" ID="textbox_4"></asp:TextBox> -->
 <input type="text" ID="textbox_4" value=""/>
 </td>
 <td>
 </tr>                                      
 </table>
                   

Open in new window

Author

Commented:
Hi,

I tried to use this function but it is not working.  Looks like the way i am calling this function on my page is not correct
I have a master page and many.aspx pages .
I am trying to add attribute on my codebehind page as
 myMasterpage.Attributes.Add("onload", "init();")  


Im my master page I have this function already for onload
  Public Sub SetBodyOnLoadScript(ByVal strOnLoad As String)
        body.Attributes.Add("onload", "javascript:" & strOnLoad)
    End Sub

If I use  myMasterpage.Attributes.Add("onload", "javascript;"  "init();")  I get error object does not support this method
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Then rename MY init to hielo:
function hielo()...

then at the end of your already existing init, simply call hielo();
Nothing to it!

Author

Commented:
var t1 = clean(document.getElementById("textbox_1").value);

What does clean do?

I have to add this function on windows onload but looks like the syntax is not correct
myMasterpage.Attributes.Add("onload", "init();")  
 I am sure it will work

      

Author

Commented:
body.Attributes.Add("onUnload", "init();");
}

In my mster page body id "body'' runat = server
How can I reference the body tag in my code behind file and correctly add the javascript onUnload event, which calls the function "init();???    I am using vb.net found this code in c charp but don't know the syntax for vb.net
 {
            MasterPageBodyTag = (HtmlGenericControl)Page.Master.FindControl("MainBody");
            MasterPageBodyTag.Attributes.Add("Onload", "Popup()");
        }
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>What does clean do?
It takes a string and cleans it so that the only thing that remains is either numeric or a period

>>I have to add this function on windows onload but looks like the syntax is not correct
I am not sure what you mean by "this" when you say "this function". To clarify things, YOU already had a function named init AND your page was already calling YOUR init:

Im my master page I have this function already for onload
  Public Sub SetBodyOnLoadScript(ByVal strOnLoad As String)
        body.Attributes.Add("onload", "javascript:" & strOnLoad)
    End Sub

Since you cannot have to functions with the same name, rename MY init function to hielo. Then you can modify YOUR init function so that the last statement in it is to call MY former init function now named hielo:
function init()
{
 ...
 //the original statemens for init are above this line
 hielo();//added call to hielo
}

I am not 100% sure, but I believe that an alternate way of calling hielo would have been to simple add it to the attributes after init, and that way you don't need to modify YOUR original init:
myMasterpage.Attributes.Add("onload", "init(); hielo();")  

>>If I use  myMasterpage.Attributes.Add("onload", "javascript;"  "init();")  I get error
I believe that line should have been:
If I use  myMasterpage.Attributes.Add("onload", "javascript: init();")
The way you coded it is as if though you are passing it three arguments AND forgot the comma to separate the second and third arguments.

>>onUnload event, which calls the function "init();???
All along you have been working with the "onload" event handler to call init, which is typically meant to be called as soon as the page loads (init is short for initialize). The "onunload" is triggered as soon as the browser needs to redraw the screen (refresh, go to another page withing the site, leave the site altogether). I doubt you "need" to call the onunload event. If you think you do, kindly explain.

Author

Commented:
In my master page(code behind) I have this sub
 Public Sub SetBodyOnLoadScript(ByVal strOnLoad As String)
        body.Attributes.Add("onload", "javascript:" & strOnLoad)
    End Sub


function placefocus()
{
       alert ("Hello I am here");
      var t1= clean(window.document.getElementBy('<%=textbox_1.ClientID %>').value);      alert (t1);
    }
I tried  adding this  placefocus function to my page_load event to test
myMasterpage.SetBodyOnLoadScript("placefocus();")
IT gives me the alert for hello I am here but for the next line it says object does not support this property or method. Also tried to see if I can call on blur to test but it still gives the error object does not support this property or method
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
It sounds like you are not sending all the javascript code to the browser. You need to open your page via the browser, view the source code the browser gets, and make sure all the "necessary" code is there. In this case the browser needs the "clean" function AND due to this:
<%=textbox_1.ClientID %>
You must verify the you have a text field with UNIQUE id and that the id is the same as the one being generated by the line above.

Author

Commented:
Excellent works fine It was mistake Instead of GetElementById I types GetElementBy

Explore More ContentExplore courses, solutions, and other research materials related to this topic.