We Keep Coding

im having a problem in javascript output it is not showing

I want to solve this question with CSS, form, javascript and I tried to do javascript and included 3 if statements but it not really showing me the output
is it because the if statements should each be closed with brackets? or maybe there is a mistake in the way I write the variables I tried many things, and it's not working please help I'm still a beginner programmer and I can't figure it out
function myFunction(){
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var Name = Fname + " " + Lname;
var date= document.getElementById("date").value;
var tr= document.getElementById("t").value;
var tour= document.getElementById("tour").value;
var request= document.getElementById("request").value;
var v = Number(document.getElementById("visitor").value);
var city = document.getElementById("city").value;
var x="";
var y="";
var z="";
var total=x+y+z;
{
if (v<=0){
v=prompt(" minimum visitors are 1 try again");
}
else if (city == "Amman $50") {
x = v * 50;
}
else if (city == "Salt $20") {
x = v * 20;
}
else {
x = v * 10;
}
}
{
if ( tour==Yes )
{
y= 50;
}
else {
y=x;
}
}
{
if (trans==Car)
{
z= 30;
}
else{
z=20;
}
}
document.getElementById("result").innerHTML = "Arrival date" + date + "<br>"
+ Name.toUpperCase() +
"<br>"+" City " + city + v + "visitors"
+"<br>" + " transportation " + tr +
"<br>" + "tour leader :" + tour
"<br>"+ "any medical:" + request +
"<br>" +"Amount=$ " + total ;
return false;
};
body{
margin:20px;
text-align:center;
}
form{
background-color:orange;
}
div.sec {
margin-left:300px;
}
div.transpo {
margin-right:450px;
}
<h3 style="text-align:center"> <span style="color:red;font-size:40px;">V</span>isit <span style="color:red;font-size:40px;">J</span> ordan </h3>
<form>
<div class="transpo">
<input type="text" id="fname" size="30" placeholder="First Name">
<br><br>
<select id="city">
<option value="select your city "> Select your city </option>
<option value="50 ">Amman $50</option>
<option value="20 ">Salt $20</option>
<option value="10 ">Jarash $10</option>
</select>
<br><br>
<label><b>Number of visitors</b></label>
<br>
<input type="number" id="visitor">
<br><br>
<label style="margin-right:10px;"><b> Transportation</b></label>
<br>
<input type="radio" id="car" name="transportation" value="car" id="t">
<label id="car" for="car">car $30</label>
<input type="radio" id="bus" name="transportation" value="bus" id="t">
<label for="bus">bus 20$</label><br>
</div>
<div class="sec">
<input type="text" id="lname" size="30" placeholder="Last Name">
<br><br>
<label><b>Arrival Date:</b></label><br>
<input type="date" id="date">
<br><br>
<label><b> Any medical Request:</b></label>
<br>
<textarea rows="1" cols="20" id="request"></textarea>
<br><br>
<label><b> Tour Leader $50</b></label>
<br>
<input type="radio" id="yes" name="tour" value="yes" id="tour">
<label for="yes">yes</label>
<input type="radio" id="no" name="tour" value="no" id="tour">
<label for="no">no</label><br>
</div>
<button type="button" onclick="myFunction()"> PREVIEW </button>
<button type="submit" onClick=""> Submit </button>
</form>
<p style="background-color:#99ccff;width:420px;font-weight: bold;" id="result"> </p>
<p style="background-color:#99ccff;width:420px;font-weight: bold;" id="result2"> </p>

If you open your console in your browser (pressing F12 as default) you can see that the Javascript is returning an error.
Uncaught SyntaxError: "" string literal contains an unescaped line break
This refers two missing quote marks on row 174 and row 176, both are missing on the end of the file.
However your code still don't work, if you press preview you get another error
<input type="radio" id="car" name="transportation" value="car" id="t">
<input type="radio" id="bus" name="transportation" value="bus" id="t">
on these two lines you specify id twice which is not allowed.
Tips so you can more easily solve these issues on your own:
You should start to use the console to find errors in your code.
Try to reread your code and look for small errors like a missing "
If you are unsure how something works like a html or javascript feature use websites like w3school to look up well expained documentation.
Good luck in your future coding adventures.

how can i make the upper case for the full name only

How can I make the output of the first and last name only upper case? Like it is shown in the picture. I tried doing it but it only works when in the input, not the output.
function myFunction(){
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var n = document.getElementById("days").value;
var val= document.getElementById("room").value;
var total="";
if (n<=0){
n=prompt(" minimum reservation period is 1 day try again");
}
else if (val == "King $30") {
total = n * 30;
}
else if (val == "Double $20") {
total = n * 20;
}
else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + Fname + " " + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" +"Amount=$ " + total +
"<br>" + " Any Special Request: " + request ;
return false;
};
body{
background-color:orange;
margin:20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King " >King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>

Javascript has provided .toUpperCase() function for String.
var fullName = Fname + " " + Lname;
document.getElementById("result").innerHTML = " Dear " + fullName.toUpperCase() + " , thank you for booking with us."+

Use the following javascript:
The uppercase function converts to uppercase. There is a native method to convert to uppercase called toUpperCase(). More info here
function myFunction() {
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var n = document.getElementById("days").value;
var val = document.getElementById("room").value;
var total = "";
if (n <= 0) {
n = prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + capitalize(Fname) + " " + capitalize(Lname) + ", thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" + "Amount=$ " + total +
"<br>" + " Any Special Request: " + request;
return false;
};
function capitalize(e) {
return e.toUpperCase()
}
body {
background-color: orange;
margin: 20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King ">King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>

Trying to enter data into a form then display the data on the same page and in a pop up window

Every time I fill in the whole form the data disappears. If i just fill out three inputs it displays fine, but when I enter the final piece of data and hit display it erases everything. then i also need the data to display in a pop up window. I have been starting at the code for too long i think.
function displayData() {
var a = document.getElementById("name").value;
var b = document.getElementById("add").value;
var c = document.getElementById("phone").value;
var d = document.getElementById("course").value;
var e = document.getElementById("email").value;
data1.innerHTML = ("<ul><li><strong>Name:</strong>" + a + "</li>" +
"<li><strong>Address:</strong>" + b + "</li>" +
"<li><strong>Phone:</strong>" + c + "</li>" +
"<li><strong>Courses:</strong>" + d + "</li>" +
"<li><strong>Email:</strong>" + e + "</li></ul>");
}
<form>
<p align="center">
<lable><b>Name:</b></lable>
<input type="text" id="name" required/>
<br>
</p>
<p align="center">
<lable><b>Address:</b></lable>
<input type="text" id="add" required/>
<br>
</p>
<p align="center">
<lable><b>Phone:</b></lable>
<input type="tel" id="phone" required/>
<br>
</p>
<p align="center">
<lable><b>Email:</b></lable>
<input type="text" id="email" required/>
<br>
</p>
<p align="center">
<select class="scrol" id="course" size="3" width="15px">
<option>Android</option>
<option>Java</option>
<option>C#</option>
<option>Data Base</option>
</select>
</p>
<br>
<p align="center">
<button type="submit" onclick="displayData()">Display</button>
<button type="reset">Reset</button>
</p>
</form>
Message is:
<p id="data1"></p>
I outputs fine until i fill everything in. any assistance is appreciated

How to prevent form from being submitted?
function displayData(event) {
event.preventDefault();
var a = document.getElementById("name").value;
var b = document.getElementById("add").value;
var c = document.getElementById("phone").value;
var d = document.getElementById("course").value;
var e = document.getElementById("email").value;
var message = document.getElementById("data1");
data1.innerHTML = ("<ul><li><strong>Name:</strong>" + a + "</li>" +
"<li><strong>Address:</strong>" + b + "</li>" +
"<li><strong>Phone:</strong>" + c + "</li>" +
"<li><strong>Courses:</strong>" + d + "</li>" +
"<li><strong>Email:</strong>" + e + "</li></ul>");
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<form>
<label>Name:
<input type="text" id="name" required/></label>
<label>Address:
<input type="text" id="add" required/></label>
<label>Phone:
<input type="tel" id="phone" required/></label>
<label>Email:
<input type="text" id="email" required/></label>
<select id="course">
<option>Android</option>
<option>Java</option>
<option>C#</option>
<option>Data Base</option>
</select>
<button onclick="displayData(event)">Display</button>
<button type="reset">Reset</button>
</form>
Message is:
<p id="data1"></p>

Operations on Javascript Array Element

With the following code, in the function placeOrder() I cannot get the calculations to work using the price[] array elements and the chairAmtA(and the following amount variables I have). It always returns the answer as NaN. What is wrong with the code and how do I fix it?
<title>
Ryan Weiland, Assignment 2
</title>
<!--Load stylesheet-->
<link rel="stylesheet" type="text/css" href="assignment2.css">
<!--Load description variables-->
<script type="text/javascript" src="script.js" >
</script>
<script>
<!--Initilize variables for calculations-->
var chairCost = 50;
var deskCost = 150;
var rockerCost = 250;
var tableCost = 200;
var ftstlCost = 75;
var fname;
var lname;
var streetName;
var cityName;
var state;
var zip;
var phoneOne;
var phoneTwo;
var phoneThree;
var chairAmt;
var deskAmt;
var rockerAmt;
var tableAmt;
var ftstlAmt;
function orderTotal(){
//window.alert("This Function Works");
//Personal Information
var fname = document.items.first.value;
var lname = document.items.last.value;
var streetName = document.items.street.value;
var cityName = document.items.city.value;
var state = document.items.state.value;
var zip = document.items.zipCode.value;
var phoneOne = document.items.pOne.value;
var phoneTwo = document.items.pTwo.value;
var phoneThree = document.items.pThree.value;
//Item Aomount
chairAmt = document.items.chairs.value;
deskAmt = document.items.desks.value;
rockerAmt = document.items.rockers.value;
tableAmt = document.items.tables.value;
ftstlAmt = document.items.ftstls.value;
//Calculations
//Chair Total
var costChairT = chairAmt*chairCost;
//Desk Total
var costDeskT = deskAmt*deskCost;
//Rocker Total
var costRockerT = rockerAmt*rockerCost;
//Table Total
var costTableT = tableAmt*tableCost;
//Footstool Total
var costFtstlT = ftstlAmt*ftstlCost;
//Overall Total Cost
var totalCost = costChairT + costDeskT + costRockerT + costTableT + costFtstlT;
//Personal Total
var personalTotal = fname + " " + lname + "\n" + streetName + ", \n" + cityName + " " + state + ", \n" + zip + "\nPhone Number: " + phoneOne + "- " + phoneTwo + "- " +phoneThree + "\n";
//New window with everything retrieved
window.alert(personalTotal + "Total Cost: $" + totalCost);
}
function placeOrder(chairsAmt, desksAmt, rockersAmt, tablesAmt, ftstlsAmt) {
//window.alert("placeOrder runs");
var order = [];
//Prices in array
var prices = [50, //Chair
150, //Desk
250, //Rocking Chair
200, //Table
75]; //Footstool
//Personal Information
order[0] = document.items.first.value;
order[1] = document.items.last.value;
order[2] = document.items.street.value;
order[3] = document.items.city.value;
order[4] = document.items.state.value;
order[5] = document.items.zipCode.value;
order[6] = document.items.pOne.value;
order[7] = document.items.pTwo.value;
order[8] = document.items.pThree.value;
//Item Aomount
var chairAmtA = document.items.chairs.value;
var deskAmtA = document.items.desks.value;
var rockerAmtA = document.items.rockers.value;
var tableAmtA = document.items.tables.value;
var ftstlAmtA = document.items.ftstls.value;
var prices = "Prices\nChair: " + prices[0] + "\nDesk: " + prices[1] + "\nRocking Chair: " + prices[2] + "\nTable: " + prices[3] + "\nFootstool: " + prices[4] + "\n\n";
//Chair Total
var chairCostA = chairAmtA * prices[0];
//Desk Total
var deskCostA = deskAmtA * prices[1];
//Rocker Total
var rockerCostA = rockerAmtA * prices[2];
//Table Total
var tableCostA = tableAmtA * prices[3];
//Footstool Total
var ftstlCostA = ftstlAmtA * prices[4];
//Overall Total Cost
var totalCostA = chairCostA + deskCostA + rockerCostA + tableCostA + ftstlCostA;
//Personal Total
personalTotalA= order[0] + " " + order[1] + "\n"
+ order[2] + ", " + order[3] + "\n"
+ order[4] + ", " + order[5] + "\n"
+ "Phone Number: " + order[6] + "-" + order[7] + "-" + order[8] + "\n\n";
//Quantity ordered
var quantity = "Chairs Ordered: " + chairAmtA + "\nDesks Ordered: " + deskAmtA + "\nRocking Chairs Ordered: " + rockerAmtA + "\nTables Ordered: " + tableAmtA + "\nFootstools Ordered: " + ftstlAmtA + "\n\n";
//New window with everything retrieved
var x = window.confirm(personalTotalA + quantity + prices + "\nTotal Cost: $" + totalCostA);
if(x ==true)
window.alert("Your order has been placed!");
else
window.alert("Your order has been cancled.");
}
</script>
<h1>Swanson's Woodworking</h1>
<h2>Customer Order Form</h2>
<br />
<!--List of items-->
<form name="items">
<br />
<br />
<!--Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=chairDesc" />
<b>Chair($50)</b>
<br />
<!--Desk-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=deskDesc" />
<b>Desk($150)</b>
<br />
<!--Rocking Chair-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=rockerDesc" />
<b>Rocking Chair($250)</b>
<br />
<!--Table-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=tableDesc" />
<b>Table($200)</b>
<br />
<!--Footstool-->
Click the button for a description.
<input type="radio" name="items" onclick="document.item.itemDesc2.value=ftstlDesc" />
<b>Footstool($75)</b>
<br />
<!--Textarea for descriptions-->
<p>
<textarea name="itemDesc2" cols="30" rows="5" style="background-color: transparent; border: 1; font-size:20px; overflow: hidden; color: #5e0000">
</textarea>
</p>
<!--Information Form-->
<!--Personal Information-->
First Name: <input type="text" name="first">
<br /><br />
Last Name : <input type="text" name="last">
<br /><br />
Street Address:<input type="text" name="street">
<br /><br />
City: <input type="text" name="city">
<br /><br />
State: <input type="text" name="state">
<br /><br />
Zip Code: <input type="text" name="zipCode">
<br /><br />
Phone Number: (<input type="text" name="pOne" size="3">) - <input type="text" name="pTwo" size="3"> - <input type="text" name="pThree" size="4">
<br /><br />
<!--List of items-->
Chairs Desired: <input type="number" name="chairs">
<br /><br />
Desks Desired: <input type="number" name="desks">
<br /><br />
Rocking Chairs Desired: <input type="number" name="rockers">
<br /><br />
Tables Desired: <input type="number" name="tables">
<br /><br />
Footstools Desired: <input type="number" name="ftstls">
<br /><br />
</form>
<!--Calculate your total order.-->
<input type = "button" onclick = "orderTotal()" value = "Calculate your total order" > <!--Button for total-->
<br /><br >
<input type = "button" onclick = "placeOrder()" value = "Place Order" > <!--Button for total-->

Looks like youre trying to subtract two strings:
console.log("12"-"13");
You need to convert all inputs ( they are strings) to numbers:
val=input.value.toNumber();
Or:
val=(+input.value);

HTML function not working with button

I have this small bit of HTML and JS and I cannot for the life of me get the function to work with the button. I have tried many things and changed different styles of creating buttons and text boxes but I cannot figure out how to fix it.
Here is the Code:
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
if (isInt(form1.blueBags.value) == true && isInt(form1.redBags.value) == true && isInt(form1.yellowBags.value) == true && isInt(form1.greenBags.value) == true) {
if (total > 100) {
var cost = (total * 0.03);
//if (confirm("CONFIRM ORDER: /n blue bags: " + form1.blueBags.value + "/n red bags: " + form1.redBags.value + "/n yellow bags: " + form1.yellowBags.value + "/n green bags: " + form1.greenBags.value + "/n Desired Text: " + text)) {
alert("Order Confirmed");
} else {
alert("Order Cancelled");
}
} else {
alert("Minimum order is 100 bags.");
}
} else {
alert("One or more of the forms doesn't contain a quantity for order.");
}
}
</script>

Here you miss handled with '{}' and your form name is "orderingForm" not "form1"
try this:
<html>
<body>
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
</body>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
console.log("hai")
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
if (isInt(orderingForm.blueBags.value) == true && isInt(orderingForm.redBags.value) == true && isInt(orderingForm.yellowBags.value) == true && isInt(orderingForm.greenBags.value) == true) {
if (total > 100) {
var cost = (total * 0.03);
alert("Order Confirmed");
} else {
alert("Minimum order is 100 bags.");
}
} else {
alert("One or more of the forms doesn't contain a quantity for order.");
}
}
</script>
</html>
hope it will help for you.

You used .. and missed }. Try this
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
//if (isInt(form1.blueBags.value) == true && isInt(form1.redBags.value) == true && isInt(form1.yellowBags.value) == true && isInt(form1.greenBags.value) == true) {
if (total > 100) {
// var cost = (total * 0.03);
//if (confirm("CONFIRM ORDER: /n blue bags: " + form1.blueBags.value + "/n red bags: " + form1.redBags.value + "/n yellow bags: " + form1.yellowBags.value + "/n green bags: " + form1.greenBags.value + "/n Desired Text: " + text)) {
alert("Order Confirmed");
// } else {
// alert("Order Cancelled");
// }
} else {
alert("Minimum order is 100 bags.");
}
//}else {
// alert("One or more of the forms doesn't contain a quantity for order.");
// }
}
</script>

First-off, don't use HTML Comments between your <script> tags, as you have:
<!-- extra functions to check if input is an integer -->
And you have a syntax error at .. should be . "single dot", as you have:
var text = document.orderingForm..textBags.value;
This should be something like this:
var text = document.orderingForm.textBags.value;
And finally, you didn't close your Order() function ending bracket.
Checkout this fiddle: http://jsfiddle.net/c5496q92/
Updated for Understanding Comments in HTML and JavaScript:
When you wants to add some Comments in HTML, you can use:
<!-- Your Comments -->
And if you are working in .js file or between <script></script> tags you should use:
/* For multi-line comments */
// For singular line comment
You can read about this more at:
http://www.inmotionhosting.com/support/edu/website-design/website-design-basics/comment-php-javascript-html-css-code

Replace the line as follows:
var text = document.orderingForm.textBags.value;
and to add two values use parseInt(value) or parseFloat(value) as:
var r = parseInt(amountB) + parseInt(amountR);

Remove . from this line
var text = document.orderingForm..textBags.value;
write
var text = document.orderingForm.textBags.value;
and close the } end of your code