Solved

Javascript Multiply TextBox with a Hidden Number - Very Simple

Posted on 2007-03-30
25
355 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
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

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

773 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