?
Solved

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

Posted on 2004-08-12
13
Medium Priority
?
453 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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
 
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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

770 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