CODEWITHSUNDEEP
javascripthtmlformsvariables
SS SS
SS SS

Reputation: 85

How to pass input variable from HTML Form

I'm trying to create a code which will take ask the user how many items of X, Y, etc and use Javascript to calculate the total owed and also to print a summary (receipt) of all items purchased. Sorry for noob question, trying to learn code without any formal training. Thanks for all of the help!

<html>

<head>

<title>Cost Calculator</title>

<script language="javascript" type="text/javascript">
function packageTotal(){
    //Enter in prices here
    var applePrice = 1;
    var bookPrice = 2;
    x = Number(document.calculator.books.value);
    y = Number(document.calculator.apples.value);
    var b = applePrice*x + bookPrice*y;
    var p = applePrice*x + bookPrice*y + .5;

    if (document.getElementById('noBag').checked) {
    //Basic package is checked
    document.calculator.total.value = b;
        } else if (document.getElementById('yesBag').checked) {
    //Pro package is checked
    document.calculator.total.value = p;
        }

    //Want to add summary of purchase
    //document.write("You want " + x " books and " y " apples.");


}


</head>

<body>

<!-- Opening a HTML Form. --> 
<form name="calculator">

<!-- Here user will enter the number of Books and Apples --> 
Enter Number of Books: <input type="text" name="books"> 
<br />

Enter the Number of Apples: <input type="text" name="apples">
<br />

<br />
<input type="radio" name="item" id="noBag" value="No" /> noBag
<input type="radio" name="item" id="yesBag" value="Yes" checked /> yesBag

<!-- Here result will be displayed. -->

<input type="button" value="Submit" onclick="packageTotal();">

Your Total Price is: <input type="text" name="total">

</form>


</body>
</html>

Upvotes: 0

Views: 1617

Answers (1)

bobince
bobince

Reputation: 536339

It's not clear from the question, but if this is the problem:

//Want to add summary of purchase
//document.write("You want " + x " books and " y " apples.");

then that would certainly break. document.write only adds to the current document when the document is still loading. If you call it afterwards it will implicitly open a new document to write to, destroying the current page. Generally document.write is a bad thing.

(also there are trivial syntax errors due to missing + concatenation operators)

If you want to write arbitrary text to the page, create a placeholder element:

<div id="message"></div>

and then set its text content:

function setTextContent(element, text) {
    element.innerHTML = ''; // remove current content
    element.appendChild(document.createTextNode(text));
}

var message = document.getElementById('message');
setTextContent(message, 'You want '+x+' books and '+y+' apples.');

(There is a textContent property on elements which you can also use instead of the function, but it's not supported on IE<9 which use innerText instead. Simply writing the message directly to innerHTML would also work in this case, but it is a bad habit because it leads to HTML-injection security holes when used with user input.)

Upvotes: 1

Related Questions