Solved

Form text box to update static text value without user clicking submit

Posted on 2004-08-12
13
436 Views
Last Modified: 2006-11-17
One final question on js for today.

Thanks again in advance for reading this thread and offering your expertise :)

I have a form field which the user enters a value of money into.

Underneath - I want it to automatically change a text value by multiplying the value just entered into the text box by 28% (0.28)
So the text value below the form box will be blank until the user starts entering a value into the form box.  At this point, I want it to automatically update without the user having to click submit/update.

Is this possible?  Have you done it before?
0
Comment
Question by:tingleweb
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 15

Expert Comment

by:Colosseo
ID: 11784753
Hi tingle,

I knocked up a quick example for you hope it helps

<HTML>
<script language="JavaScript">

 function update_New_Val() {
   document.getElementById("new_Val").innerHTML = document.getElementById("txt_Val").value * 0.28;
 }

</script>
<BODY>

<form name="form1" method="post" action="">
</form>
<input type="text" name="txt_Val" onKeyUp="update_New_Val()">
<div id="new_Val"></div>
</BODY>
</HTML>

Let me know if you need any more help

Scott
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11784790
Hi

Yes. Have this on your money field:

<input type="text" onkeyup="this.value=this.value.replace(/[^\d\.]/,'');document.getElementById('hi').value=this.value*0.28;">
<input type="text" id="hi">



Regards,
Zyloch
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11784803
By the way, Colosseo, it's good to have you here answering questions :)

Regards
0
 
LVL 15

Expert Comment

by:Thogek
ID: 11785263
Note that the form elements' value property is a string property, and JavaScript may or may not figure out to convert this to a numeric type before applying the multiplication (*) operator.  (Some browsers may.)

If not, try modifying the above-given update_New_Val function to

    function update_New_Val() {
        document.getElementById("new_Val").innerHTML = '' + (parseFloat(document.getElementById("txt_Val").value) * 0.28);
    }
0
 

Author Comment

by:tingleweb
ID: 11786249
Guys!

Thank you and esp Colosseo for your quick response.
Your script does indeed work fine.

2 things though:

1.  How can I force the <div id="new_Val"></div> to be placed on the same line as some text, saying (for example) - the value of your transaction will be.....
At the moment it places the value on the line below.

2.  How can I put a £ sign before the value and change the format to be a currency format?  ie. 2 decimal places.
0
 
LVL 15

Expert Comment

by:Colosseo
ID: 11786488
Hi tingle

1 and part of 2 (pound sign) can be done like this. I have added the check so that if the user deletes out the number then the text should disappear.

If (document.getElementById("txt_Val").value != "") {
  document.getElementById("new_Val").innerHTML = 'The value of your transaction will be £' + document.getElementById("txt_Val").value * 0.28;
} else {
 document.getElementById("new_Val").innerHTML = "";
}

2. for the decimal places the following function found at http://www.webmasterworld.com/forum91/228.htm might work (afraid i am not at work so I can't test it)

You would have to change the code too this...

document.getElementById("new_Val").innerHTML = 'The value of your transaction will be £' + round(document.getElementById("txt_Val").value * 0.28);

function round(num){
num = num.toString();
var split = num.split(".");
var dec = split[1].substr(0,3);
var dec1 = dec.match(/\d{2,2}/);
var dec2 = dec.match(/(\d$)/);
var rounded = (dec1 + "." + dec2[0]);
return split[0] + "." + Math.round(rounded);
}

Regards and again apologies for not being able to test any of this...

Scott
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 15

Expert Comment

by:Colosseo
ID: 11786504
oh and hi Zyloch... its good to be here :)
0
 
LVL 15

Expert Comment

by:Colosseo
ID: 11791626
tingle,

finally had a chance to test the code above... only problem was the If needs to be if, everything else should work ok :)

Scott
0
 

Author Comment

by:tingleweb
ID: 11799060
Thanks for all your help Scott

I am running into a small problem and am sure you will know at a glance what it is.

I get a javascript error on the page with the following code.  



I have:

________________________________________________________________________________________________________________________

<head>
<script>
 function update_New_Val()
 
 //{
  //document.getElementById("new_Val").innerHTML = '£' + document.getElementById("amount").value * 1.28;
 //}
 
 if (document.getElementById("amount").value != "") {
  document.getElementById("new_Val").innerHTML = 'The value of your transaction will be £' + document.getElementById("amount").value * 0.28;
} else {
 document.getElementById("new_Val").innerHTML = "";
}
</head>
</script>



and in my code of the page, I have:

  This will increase your donation to the value of <div class="Normal" align="center" id="new_Val"></div>

________________________________________________________________________________________________________________________



The error is :

It is expecting a { on line 35.  
Line 35 is the start of the if statement.

The id="new_val" is still appearing on the line below and not on the same line as "this will increase your donation to the value of...."
0
 

Author Comment

by:tingleweb
ID: 11799076
I've changed the javascript code to the following but it is still complaining about the missing { at line 35 (the if statement)
I have tried wrapping the whole thing in {} but it complains of a syntax error at the ELSE line.

function update_New_Val()

 if (document.getElementById("amount").value != "") {
  //document.getElementById("new_Val").innerHTML = 'The value of your transaction will be £' + document.getElementById("amount").value * 0.28;
 //}
  document.getElementById("new_Val").innerHTML = 'The value of your transaction will be £' + round(document.getElementById("amount").value * 0.28);

function round(num){
num = num.toString();
var split = num.split(".");
var dec = split[1].substr(0,3);
var dec1 = dec.match(/\d{2,2}/);
var dec2 = dec.match(/(\d$)/);
var rounded = (dec1 + "." + dec2[0]);
return split[0] + "." + Math.round(rounded);
}

else {
 document.getElementById("new_Val").innerHTML = "";
}
0
 
LVL 15

Accepted Solution

by:
Colosseo earned 500 total points
ID: 11799096
Hi tingle

I just think you have just gotten a little confused so I will try to explain as I go :)

Every function has to be constructed similar to this example:

function [function name] {

 [code for the function here]

}

So we have two functions now update_New_Val and round. round is called by update_New_Val to round the number to two decimal places. It is completely seperate from update_New_Val

That is where you are going wrong as you had the function round inside the funcion update_New_Val.

So using the code from your last post what you need is...

function update_New_Val()  {
 
 // If the amount is not empty
 if (document.getElementById("amount").value != "") {
  // Output the following text concatenated with the rounded amount
  document.getElementById("new_Val").innerHTML = 'The value of your transaction will be £' + round(document.getElementById("amount").value * 0.28);
 } else {
  // Output an empty string
  document.getElementById("new_Val").innerHTML = "";
 }

}

function round(num){
num = num.toString();
var split = num.split(".");
var dec = split[1].substr(0,3);
var dec1 = dec.match(/\d{2,2}/);
var dec2 = dec.match(/(\d$)/);
var rounded = (dec1 + "." + dec2[0]);
return split[0] + "." + Math.round(rounded);
}

HTH. If you need me to explain any more just let me know mate

Regards

Scott
0
 

Author Comment

by:tingleweb
ID: 11799150
WOO HOO!

That works! :)

0
 
LVL 15

Expert Comment

by:Colosseo
ID: 11799155
YAY :)

Glad your happy tingle lol
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now