Javascript Multiply TextBox with a Hidden Number - Very Simple
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
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
Manish
So what you have done so far?
<html>
<head>
<title>test</title>
<script>
function mult (input) {
var secret_number=42;
document.form.answer.value
}
</script>
</head>
<body>
<form name='form' action="javascript:mult(do
<input type='text' name='input'><br>
<input type='text' name='answer'><br>
<input type='submit'>
</body>
</html>
<head>
<title>test</title>
<script>
function mult (input) {
var secret_number=42;
document.form.answer.value
}
</script>
</head>
<body>
<form name='form' action="javascript:mult(do
<input type='text' name='input'><br>
<input type='text' name='answer'><br>
<input type='submit'>
</body>
</html>
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.
Can do more to make it look better. But this will get the job done.
ASKER
The code works perfectly! Thank you very much!
Instead of a button, can we create a link?
Instead of a button, can we create a link?
Link to go where? Or do you want "CLICK HERE TO SEE..."
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That's it! That's exactly what I was looking for !
Thank you very much rodnor. Point well earned! :)
Thank you very much rodnor. Point well earned! :)
ASKER
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!
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!
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?
Spill it, what EXACTLY do you need?
ASKER
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?
So I need to have a calculator for each product.
Any suggestions?
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.valu
document.form.answer2.valu
document.form.answer3.valu
document.form.answer4.valu
}
</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()
</body>
</html>
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.valu
document.form.answer2.valu
document.form.answer3.valu
document.form.answer4.valu
}
</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()
</body>
</html>
ASKER
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.valu
document.form.answer2.valu
document.form.answer3.valu
document.form.answer4.valu
}
</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()
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult()
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult()
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult()
</p>
</body>
</html>
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.valu
document.form.answer2.valu
document.form.answer3.valu
document.form.answer4.valu
}
</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()
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult()
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult()
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult()
</p>
</body>
</html>
<html>
<head>
<title>test</title>
<script>
function mult () {
document.form.answer1.valu
document.form.answer2.valu
document.form.answer3.valu
document.form.answer4.valu
}
</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()
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult()
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult()
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult()
</p>
</body>
</html>
<head>
<title>test</title>
<script>
function mult () {
document.form.answer1.valu
document.form.answer2.valu
document.form.answer3.valu
document.form.answer4.valu
}
</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()
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult()
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult()
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult()
</p>
</body>
</html>
ASKER
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.
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!
Hope this helps!
ASKER
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.val
document.form2.answer2.val
document.form3.answer3.val
document.form4.answer4.val
}
</script>
</head>
<body>
<form name='form1'>
<input type='text' name='input1' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()
<input type='text' name='answer1' size="5" style="border: 1px solid #999999"> <br>
<p>
</form>
<form name='form2'>
<input type='text' name='input2' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()
<input type='text' name='answer2' size="5" style="border: 1px solid #999999"> <br>
</p>
<p>
</form>
<form name='form3'>
<input type='text' name='input3' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()
<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()
<input type='text' name='answer4' size="5" style="border: 1px solid #999999">
</p>
</form>
</body>
</html>
<html>
<head>
<title>test</title>
<script>
function mult () {
document.form1.answer1.val
document.form2.answer2.val
document.form3.answer3.val
document.form4.answer4.val
}
</script>
</head>
<body>
<form name='form1'>
<input type='text' name='input1' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()
<input type='text' name='answer1' size="5" style="border: 1px solid #999999"> <br>
<p>
</form>
<form name='form2'>
<input type='text' name='input2' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()
<input type='text' name='answer2' size="5" style="border: 1px solid #999999"> <br>
</p>
<p>
</form>
<form name='form3'>
<input type='text' name='input3' size="5" style="border: 1px solid #999999">
<a href="#" onClick="javascript:mult()
<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()
<input type='text' name='answer4' size="5" style="border: 1px solid #999999">
</p>
</form>
</body>
</html>
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"
output = eval("document.form.answer
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(.
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult(.
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.
</p>
</body>
</html>
<html>
<head>
<title>test</title>
<script>
function mult (secret_number, form_input) {
input = eval("document.form.input"
output = eval("document.form.answer
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(.
<p>
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.
</p>
<p>
<input type='text' name='input3'><br>
<input type='text' name='answer3'> x.02<br>
<a href="#" onClick="javascript:mult(.
<br>
<br>
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.
</p>
</body>
</html>
ASKER
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(.
<p></form>
<form name="form2">
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.
</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(.
<br>
<br>
</form>
<form name="form4">
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.
</p>
</form>
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(.
<p></form>
<form name="form2">
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.
</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(.
<br>
<br>
</form>
<form name="form4">
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.
</p>
</form>
form 1 si not working, correct? how about the others? I see right off the top, an error in form(1)
ASKER
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. :)
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(.
<p></form>
This will work:
function is:
<script>
function mult (secret_number, form_input) {
input = eval("document.form"+form_
output = eval("document.form"+form_
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.
<form name='form'> <<<***********************
<input type='text' name='input1'><br>
<input type='text' name='answer1'> x .03<br>
<a href="#" onClick="javascript:mult(.
<p></form>
This will work:
function is:
<script>
function mult (secret_number, form_input) {
input = eval("document.form"+form_
output = eval("document.form"+form_
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.
Full code follows:
<html>
<head>
<title>test</title>
<script>
function mult (secret_number, form_input) {
input = eval("document.form"+form_
output = eval("document.form"+form_
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(.
<p></form>
<form name="form2">
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.
</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(.
<br>
<br>
</form>
<form name="form4">
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.
</p>
</form>
</body>
</html>
<html>
<head>
<title>test</title>
<script>
function mult (secret_number, form_input) {
input = eval("document.form"+form_
output = eval("document.form"+form_
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(.
<p></form>
<form name="form2">
<input type='text' name='input2'><br>
<input type='text' name='answer2'> x .05<br>
<a href="#" onClick="javascript:mult(.
</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(.
<br>
<br>
</form>
<form name="form4">
<input type='text' name='input4'><br>
<input type='text' name='answer4'> .06<br>
<a href="#" onClick="javascript:mult(.
</p>
</form>
</body>
</html>
ASKER
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!
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!
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!
ASKER
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!
Thanks!