Solved

Javascript Multiply TextBox with a Hidden Number - Very Simple

Posted on 2007-03-30
25
353 Views
Last Modified: 2010-05-18
Hello Experts,

I need to multiply a number from a textbox by a given number, click on a "GO" button and then display the answer in another textbox. I need the number that is being multiplied by to be hidden.

I need this to be done ASAP, that is why I give this question 500 points.

Thank you all in advance!

Igor
0
Comment
Question by:datzent83
  • 13
  • 11
25 Comments
 
LVL 11

Expert Comment

by:Manish
ID: 18824174
So what you have done so far?
0
 
LVL 8

Expert Comment

by:radnor
ID: 18824230
<html>
<head>
<title>test</title>
<script>
function mult (input) {
      var secret_number=42;
      document.form.answer.value = (input * secret_number)
}
</script>
</head>
<body>
<form name='form' action="javascript:mult(document.form.input.value)>
<input type='text' name='input'><br>
<input type='text' name='answer'><br>
<input type='submit'>
</body>
</html>
0
 
LVL 8

Expert Comment

by:radnor
ID: 18824244
Type in the 1st box your number and then click the button.  Answer in 2nd box.  Just a quick example...

Can do more to make it look better.  But this will get the job done.
0
 

Author Comment

by:datzent83
ID: 18824278
The code works perfectly! Thank you very much!

Instead of a button, can we create a link?
0
 
LVL 8

Expert Comment

by:radnor
ID: 18824294
Link to go where?  Or do you want "CLICK HERE TO SEE..."
0
 
LVL 8

Accepted Solution

by:
radnor earned 500 total points
ID: 18824311
<html>
<head>
<title>test</title>
<script>
function mult (input) {
      var secret_number=42;
      document.form.answer.value = (input * secret_number)
}
</script>
</head>
<body>
<form name='form'>
<input type='text' name='input'><br>
<input type='text' name='answer'><br>
<a href="#" onClick="javascript:mult(document.form.input.value)">Click here to see your answer...</a>
</body>
</html>
0
 

Author Comment

by:datzent83
ID: 18824327
That's it! That's exactly what I was looking for !

Thank you very much rodnor. Point well earned! :)
0
 

Author Comment

by:datzent83
ID: 18824363
Hmmmm! It looks like I missed something.

I forgot to mention that there will be multiple calculators like this on one page. It seems there are conflicts with form names.

Can we rewrite the code to use multiple forms on one page?

Please help!
0
 
LVL 8

Expert Comment

by:radnor
ID: 18824393
How many?  Will you answer all at once or progress through them?  If you answer all at once, can add the additional text boxes and change the function a little.

Spill it, what EXACTLY do you need?
0
 

Author Comment

by:datzent83
ID: 18824785
I have a product page, the product page has 6-10 products. Under each product I need a calculator to calculate how much of something they need.

So I need to have a calculator for each product.

Any suggestions?
0
 
LVL 8

Expert Comment

by:radnor
ID: 18825022
Well....  Still need little more  info but with the info given...  This should work for the 1st 4.  You can see what I am doing.

If the number is the same (secret_number), then I'd just add more input fields and mod the function.  You also said 6-10 products.  I would create it for 10 and if less than than on a page, make the INPUT box HIDDEN.   I am assuming 6-10 products for up to X pages????

<html>
<head>
<title>test</title>
<script>
function mult () {
      var secret_number=42;
      document.form.answer1.value = (document.form.input1.value * secret_number)
      document.form.answer2.value = (document.form.input2.value * secret_number)
      document.form.answer3.value = (document.form.input3.value * secret_number)
      document.form.answer4.value = (document.form.input4.value * secret_number)
}
</script>
</head>
<body>
<form name='form'>
<input type='text' name='input1'><br>
<input type='text' name='answer1'><br>
<input type='text' name='input2'><br>
<input type='text' name='answer2'><br>
<input type='text' name='input3'><br>
<input type='text' name='answer3'><br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'><br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
</body>
</html>
0
 

Author Comment

by:datzent83
ID: 18825066
We are almost there, but not exactly what I need. I revised your form a little bit to show you how I need it to be done.

I need each calculator to be multiplied by a different number. Please take a look at the code to see what I mean.

<html>
<head>
<title>test</title>
<script>
function mult () {
      var secret_number=42;
      document.form.answer1.value = (document.form.input1.value * secret_number)
      document.form.answer2.value = (document.form.input2.value * secret_number)
      document.form.answer3.value = (document.form.input3.value * secret_number)
      document.form.answer4.value = (document.form.input4.value * secret_number)
}
</script>
</head>
<body>
<form name='form'>
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
</p>
</body>
</html>
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Expert Comment

by:radnor
ID: 18825104
<html>
<head>
<title>test</title>
<script>
function mult () {

      document.form.answer1.value = (document.form.input1.value * .03)
      document.form.answer2.value = (document.form.input2.value * .05)
      document.form.answer3.value = (document.form.input3.value * .02)
      document.form.answer4.value = (document.form.input4.value * .06)
}
</script>
</head>
<body>
<form name='form'>
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult()">Click here to see your answer...</a>
</p>
</body>
</html>
0
 

Author Comment

by:datzent83
ID: 18825168
All the calculators are part of the same form. Can we divide the calculators into different forms? Each calculator will be in a different table.
0
 
LVL 8

Expert Comment

by:radnor
ID: 18825258
OK, OK, try this.  Let me know if this will work for you.  What you are doing is passing the function 2 variables.  The 1st is the RATE and the 2nd is the NUMBER IN SINGLE QUOTES 1 to 10 for your products.  The function will then build a string and get the value of that input box, do the calculation, and write the answer to the correct output box.

Hope this helps!
0
 

Author Comment

by:datzent83
ID: 18825279
I am not much of a javascript programmer, but below is what I got. However, its complaining about form2. It calculates form1 but then it dies at form2.

<html>
<head>
<title>test</title>
<script>
function mult () {

      document.form1.answer1.value = (document.form1.input1.value * .03)
      document.form2.answer2.value = (document.form2.input2.value * .05)
      document.form3.answer3.value = (document.form3.input3.value * .02)
      document.form4.answer4.value = (document.form4.input4.value * .06)
}
</script>
</head>
<body>
<form name='form1'>
<input type='text' name='input1' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()">GO</a>
<input type='text' name='answer1' size="5" style="border: 1px solid #999999"> <br>
&nbsp;<p>
</form>

<form name='form2'>
<input type='text' name='input2' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()">GO</a>&nbsp;
<input type='text' name='answer2' size="5" style="border: 1px solid #999999"> <br>
&nbsp;</p>
<p>
</form>

<form name='form3'>
<input type='text' name='input3' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()">GO</a>&nbsp;
<input type='text' name='answer3' size="5" style="border: 1px solid #999999"> <br>
<br>
<br>
</form>

<form name='form2'>
<input type='text' name='input4' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()">GO</a>&nbsp;
<input type='text' name='answer4' size="5" style="border: 1px solid #999999">
</p>
</form>
</body>
</html>
0
 
LVL 8

Expert Comment

by:radnor
ID: 18826204
I am very sorry!  I'm glad I came back to see if you posted anything more on this question.  I forgot to include the code.  Here is where it takes 2 parameters as stated above.  I think you'll like this.  Would like to see a link sometime.  I work on sites and have a few I did and maintain.  Good luck and have a great weekend!

<html>
<head>
<title>test</title>
<script>
function mult (secret_number, form_input) {
      input = eval("document.form.input"+form_input);
      output = eval("document.form.answer"+form_input);
      output.value = (input.value * secret_number);
}
</script>
</head>
<body>
<form name='form'>
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult(.03, '1')">Click here to see your answer...</a>
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.05, '2')">Click here to see your answer...</a>
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult(.02, '3')">Click here to see your answer...</a>
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.06, '4')">Click here to see your answer...</a>
</p>
</body>
</html>
0
 

Author Comment

by:datzent83
ID: 18826258
Hi There,

I can't officially release the link to the website as this website is a proposal for a client of mine. What you have is almost exactly what I need. However, the code for each calculator still falls into one form.

Below is what I need to accomplish. As you will see, each calculator is coded in its own form, not into one large form. This way I can move each calculator between tables, cells, or divs.

<form name='form'>
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult(.03, '1')">Click here to see your answer...</a>
<p></form>

<form name="form2">
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.05, '2')">Click here to see your answer...</a>
</p>
<p>
</form>

<form name="form3">
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult(.02, '3')">Click here to see your answer...</a>
<br>
<br>
</form>

<form name="form4">
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.06, '4')">Click here to see your answer...</a>
</p>
</form>
0
 
LVL 8

Expert Comment

by:radnor
ID: 18826272
form 1 si not working, correct?  how about the others?  I see right off the top, an error in form(1)
0
 

Author Comment

by:datzent83
ID: 18826287
The code from my last post is just the way I need the code to be formed. It is not a solution to what i need. :)
0
 
LVL 8

Expert Comment

by:radnor
ID: 18826311
That's fine, but the ERROR is here:
<form name='form'>  <<<**********************************
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult(.03, '1')">Click here to see your answer...</a>
<p></form>

This will work:
function is:
<script>
function mult (secret_number, form_input) {
      input = eval("document.form"+form_input+".input"+form_input);
      output = eval("document.form"+form_input+".answer"+form_input);
      output.value = (input.value * secret_number);
}
</script>

and CHANGE your 1st form NAME FROM "form" to "form1"  This is where you had an error.  Want full code, let me know.
0
 
LVL 8

Expert Comment

by:radnor
ID: 18826317
Full code follows:

<html>
<head>
<title>test</title>
<script>
function mult (secret_number, form_input) {
      input = eval("document.form"+form_input+".input"+form_input);
      output = eval("document.form"+form_input+".answer"+form_input);
      output.value = (input.value * secret_number);
}
</script>
</head>
<body>
<form name='form1'>
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult(.03, '1')">Click here to see your answer...</a>
<p></form>

<form name="form2">
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.05, '2')">Click here to see your answer...</a>
</p>
<p>
</form>

<form name="form3">
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult(.02, '3')">Click here to see your answer...</a>
<br>
<br>
</form>

<form name="form4">
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.06, '4')">Click here to see your answer...</a>
</p>
</form>
</body>
</html>
0
 

Author Comment

by:datzent83
ID: 18826326
THATS IT!!! YOU GOT IT! :) :) :)
Thank you very much for this. This is exactly what I was looking for! I will release the link for you when the project is officially announced a "Go".

Thanks Again!
0
 
LVL 8

Expert Comment

by:radnor
ID: 18826343
COOL!  Did you see the error?  You had form and NOT form1.  Missing the 1 (one).  Other than that, you would have had it.  Sometimes a different pair of eyes will pick these things up quickly.  Good luck with the project!
0
 

Author Comment

by:datzent83
ID: 18826361
I noticed the error when you pointed it out. Having a second pair of eyes is always a good idea in a project of this sort.

Thanks!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

708 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

12 Experts available now in Live!

Get 1:1 Help Now