How to store Javascript output into a form

Question

Hi I wanted to know how I could store a javascript calculation into a form instead of it being an alert or just written out in another page? Below is my Javascript code, which calculates price.

<script type="text/javascript">
    function getQuote() {
        var qtyvar = document.getElementById("qty").value;
        var qlyvar= document.getElementById("qly").value;
        var quote;
        if (qlyvar=="basic") {
            quote=10*qtyvar;
        }
        else if (qlyvar=="medium") {
            quote=15*qtyvar;
        }
        else if (qlyvar=="high") {
            quote=20*qtyvar;
        }
alert('£' + quote);

}

This script is run when this button is pressed

<p><input class="mybutton" name="Quote" value="Calculate quote" onclick="getQuote();"></p>

How can I store the result of the Javascript into the button or inside the form? Hopefully I explained this clearly

Nikhil Aggarwal · Accepted Answer · 2015-12-04 18:01:12Z

4

You can have a hidden input field inside the form

<input name="quotation" id="quotation" type="hidden">

And in place of alert in the Js, you can have

document.getElementById("quotation").value = quote;

For your reference - http://plnkr.co/edit/5tV02Tbc6YWTiYKJOtVE?p=preview

edited Dec 4, 2015 at 18:01

answered Dec 4, 2015 at 17:24

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

YasMan Over a year ago

Where would I put inside the form? After the Calculate quote?

Nikhil Aggarwal Over a year ago

The input will already be there inside the form. Only the value will be getting updated whenever you click on the button.

YasMan Over a year ago

Hi @nikhil sorry i tried your method, but I cannot see the hidden field with the calculation appear after I press the button.

Nikhil Aggarwal Over a year ago

@YasMan - I have added a working plunker in answer for your reference. Please check.

YasMan Over a year ago

Hi thanks for the answer in plunker but when I click calculate, it doesn't show the result of the calculation.

|

Gouda Elalfy · Accepted Answer · 2015-12-04 17:31:38Z

3

You can put hidden field in your form, then when click the button set the hidden field value with result.

<input type='hidden' id='result_hdn' value=''>

Then is code:

document.getElementById("result_hdn").value= quote;

answered Dec 4, 2015 at 17:31

Gouda Elalfy

7,0833 gold badges28 silver badges38 bronze badges

6 Comments

YasMan Over a year ago

Hi Sorry, I tried using your method but when I press the get quote button, nothing shows up

Gouda Elalfy Over a year ago

Your button mustn't submit the form, does it do?

YasMan Over a year ago

HI @Gouda no that button is used, just to calculate the price and give the quote. Before it was being outputted in an alert box and I want the output to be in a field.

Gouda Elalfy Over a year ago

Did you put the HTML hidden field in your form?

YasMan Over a year ago

Sorry where would I put that? is it when i declare the form?

|

Collectives™ on Stack Overflow

How to store Javascript output into a form

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related