I'm creating an HTML page for a restaurant bill calculator but i'm having issues with the javascript/input/form and have been stuck for a while. I'm not sure why my function is not working when I submit. If anyone has any ideas where i'm going wrong, I would greatly appreciate any help!
Here is my current code (it has to be in one HTML document):
<body>
<h1>Restaurant Bill Calculator</h1>
<br>
<form name="billcalculator" method=post onsubmit="calculateBill()">
<div class="wrapper">
<label for="tax">Tax Percent:</label>
<input type="number" id="taxPercent" min="0" max="100" step=".01">%
<br>
<label for="price">Price from the menu:</label>
<input type="number" id="menuPrice" min="0" max="1000" step=".01">
<br>
<label for="tip">Tip Percent:</label>
<input type="number" id="tipPercent" min="0" max="200" step=".01">%
<br>
<input type="submit" onclick="calculateBill()" id="submit" value="Calculate Bill">
<br>
</div>
</form>
<p id="display">Please click Calculate Bill after completing form.</p>
<script>
function calculateBill() {
var tax = document.getElementById("taxPercent")
var price = document.getElementById("menuPrice")
var tip = document.getElementById("tipPercent")
var taxamount = price * tax;
var tipamount = price * tip;
var total = taxamount + tipamount + price;
if (!tax.checkValidity()) {
window.alert(tax.validatonMessage);
}
if (!price.checkValidity()). {
window.alert(price.validationMessage);
}
if (!tip.checkValidity()) {
window.alert(tip.validationMessage);
}
if (tax.checkValidity() && price.checkValidity() && tip.checkValidity()) {
document.getElementById("display").innerHTML = "Price: $" + price.toFixed(2) + "\n" + "Tax: $" + taxamount.toFixed(2) + "\n" + "Tip: $" + tip.toFixed(2) + "\n" + "Total: $" + total.toFixed(2);
}
return true;
}
</script>
You need to get and parse the values.
var tax = parseFloat(document.getElementById("taxPercent").value);
var price = parseFloat(document.getElementById("menuPrice").value);
var tip = parseFloat(document.getElementById("tipPercent").value);
Since you have no action in your form, and are not posting anywhere, you can just remove the post method from <form>.
You should also remove the onclick function from your input. There is no reason to have both an onclick and onsubmit handler pointing to the same function.
Then add this to your calculateBill function:
function calculateBill(e) {
e.preventDefault();
Finally, you should be getting the values out of the DOM elements like so:
var tax = document.getElementById("taxPercent").value;
These will be strings, so you will have to use parseInt.
Related
Basically i want the system to generate a random number within a given range(the range will be determined by the user in the input fields below) and print out messages to let user know if its too high or too low. I am able to generate a number however the number seems to be changing. I can be inputting the same number but it will tell me is too low, and too high next. How can i also limit the number of tries to 5 tries? Do I loop the entire function?
<html>
table border="1" width="50%">
<tr>
<td>
Enter a smaller number<br>
<input id="input" type="text">
<span id="wrongInput"></span><br>
Enter a larger number<br>
<input id="input2" type="text">
<span id="wrongInput2"></span><br>
<button type="button" onclick="playFunction()">Play button</button>
<br>
<!-- guess the number -->
<label for="guess">Guess the number</label><br>
<input text="text" class="guessField" id="guessField">
<span id="guessMessage"></span>
<input type="button" onclick="guess()" value="Guess button"><br>
<p>Output area</p>
<textarea id="output" name="output" rows="5" style="width: 50%"></textarea>
</td><br>
</tr>
</table>
<script>
function guess()
{
var guess = document.getElementById("guessField").value;
//get the elements on lower and higher number
var min = document.getElementById("input").value;
var max = document.getElementById("input2").value;
//generate random number
var randomNo = Math.floor(Math.random() * (max-min) + min);
//output the msg
var output = document.getElementById("output");
if (guess == randomNo)
{
output.value = "You have guessed correctly! " + "(" + guess + ")";
} else if (guess > randomNo)
{
output.value = "Number is too high! " + "(" + guess + ")";
guessNo++;
} else {
output.value = "Number is too low! " + "(" + guess + ")";
guessNo++;
}
} </script></html>
split the value generate function and the guessing function,
ithin a given range(the range will be determined by the user in the input fields below) and print out messages to let user know if its too high or too low. I am able to generate a number however the number seems to be changing. I can be inputting the same number but it will tell me is too low, and too high next. How can i also limit the number of tries to 5 tries? Do I loop the entire function?
<html>
table border="1" width="50%">
<tr>
<td>
Enter a smaller number<br>
<input id="input" type="text">
<span id="wrongInput"></span><br>
Enter a larger number<br>
<input id="input2" type="text">
<span id="wrongInput2"></span><br>
<button type="button" onclick="playFunction()">Play button</button>
<br>
<!-- guess the number -->
<label for="guess">Guess the number</label><br>
<input text="text" class="guessField" id="guessField">
<span id="guessMessage"></span>
<input type="button" onclick="guess()" value="Guess button"><br>
<p>Output area</p>
<textarea id="output" name="output" rows="5" style="width: 50%"></textarea>
</td><br>
</tr>
</table>
<script>
function guess()
{
var guess = document.getElementById("guessField").value;
//output the msg
var output = document.getElementById("output");
if (guess == randomNo)
{
output.value = "You have guessed correctly! " + "(" + guess + ")";
} else if (guess > randomNo)
{
output.value = "Number is too high! " + "(" + guess + ")";
guessNo++;
} else {
output.value = "Number is too low! " + "(" + guess + ")";
guessNo++;
}
} </script>
add this snippet back in your playFunction()
//get the elements on lower and higher number
var min = document.getElementById("input").value;
var max = document.getElementById("input2").value;
//generate random number
var randomNo = Math.floor(Math.random() * (max-min) + min);
so that your target only gets generated once when you pressed the play game button and won't be overwrote everytime the user guesses
I'm creating a budget app where the user can put in a product and a price. I want it to display the total cost by adding each input value (HTML5 type=number) to the next number that is put in with the next added line.
Snippet:
$(document).ready(function() {
$('.food').click(function() {
var $frm = $(this).parent();
var toAdd = $frm.children(".productInput").val();
var addPrice = $frm.children(".priceInput").val();
var addAmount = $frm.children(".amountInput").val();
var div = $("<div>");
div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");
$frm.parent().children(".messages").append(div);
$(".totalPrice").text("Total Price" + addAmount * addPrice);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu">
<h3>Shopping list</h3>
<div class="line">
<div>
<input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
<input class='productInput' type="text" name="message" value="">
<input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
<button class="food">Add</button>
</div>
<div class="messages">
</div>
</div>
</div>
<div class="totalPrice">
How can I do this? :)
Thanks
Declare a global variable outside your function
$(document).ready(function() {
var totalPrice=0;
$('.food').click(function() {
..
do this while calculating total price
totalPrice = totalPrice + (addAmount * addPrice);
$(".totalPrice").text("Total Price" + totalPrice);
Create a totalPrice variable outside of your click function. Then add your addAmount * addPrice to the totalPrice every time you add a new item. Then display the totalPrice in your .totalPrice div instead of the addAmount * addPrice of the last added item.
You may also want to add a call to .toFixed() on your totalPrice when displaying it. Calling totalPrice.toFixed(2) will ensure that you display only two decimal places, so that it's a proper format for monetary values.
Working example:
$(document).ready(function() {
var totalPrice = 0;
$('.food').click(function() {
var $frm = $(this).parent();
var toAdd = $frm.children(".productInput").val();
var addPrice = $frm.children(".priceInput").val();
var addAmount = $frm.children(".amountInput").val();
var div = $("<div>");
div.append("<p>" + addAmount + "</p>", "<p id='product'> " + toAdd + " </p>", "<p>" + addPrice + "</p>");
$frm.parent().children(".messages").append(div);
totalPrice += addAmount * addPrice;
$(".totalPrice").text("Total Price: $" + totalPrice.toFixed(2));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<h3>Shopping list</h3>
<div class="line">
<div>
<input class='amountInput' type='number' name='quantity' min='0' max='1000' step='1'>
<input class='productInput' type="text" name="message" value="">
<input class='priceInput' type='number' name='quantity' min='0' max='1000000' step='0.01'>
<button class="food">Add</button>
</div>
<div class="messages">
</div>
</div>
</div>
<div class="totalPrice"></div>
Hi I am trying to create an invoicing system. I have a form that I add fields to for every line item and that works I can add and remove the form fields. My problem is I dont know a way to get the price from the prepended line item and add it up to get a subtotal.
this is the html nothing interesting here
<div class="form-row">
<strong>Line Items:</strong>
<br>
<div class="line-items">
<div class="line-item">
<div class="line-item-box description">
<label>Description:</label>
<textarea name="description" id="description"></textarea>
</div>
<div class="line-item-box quantity">
<label>Qty:</label>
<input type="text" name="quantity" id="quantity">
</div>
<div class="line-item-box price">
<label>Price:</label>
<input type="text" name="price" id="price">
</div>
<button class="btn add-item">Add Item</button>
</div>
</div>
</div>
Here is the jquery
$(document).ready(function() {
$('.add-item').click(function() {
var description = $('#description').val();
var quantity = $('#quantity').val();
var price = $('#price').val();
$('.line-items').prepend('<div class="line-item"><div class="line-item-box description">' + description + '</div><div class="line-item-box quantity">' + quantity + '</div><div class="line-item-box price price-saved">$' + price*quantity + '</div><button class="btn remove-btn">Remove</button></div>');
if (!$('.price-summation')[0]) {
$('.line-items').append('<div class="price-summation"><div class="price-row">' + subtotal + '</div><div class="price-row">Taxes</div><div class="price-row">Total</div></div>');
}
return false;
});
$(document).on('click', '.remove-btn', function() {
$('.line-item').remove();
});
});
So I would like to add up the price var for each line item which will be added to the dom dynamically and then display it with the subtotal var.
Is this possible? If so how can I do this?
For a total use a each loop and sum each parsed value of the price,put this in a function and trigger it each time you update the list of items
js:
function price_subtotal(){
var subtotal = 0;
$('.price-saved').each(function(i,v){
subtotal+= parseFloat($(v).text().replace('$',''));
});
$('.subtotal').html(subtotal);
}
$(document).ready(function() {
$('.add-item').click(function() {
var description = $('#description').val();
var quantity = $('#quantity').val();
var price = $('#price').val();
$('.line-items').prepend('<div class="line-item"><div class="line-item-box description">' + description + '</div><div class="line-item-box quantity">' + quantity + '</div><div class="line-item-box price price-saved">$' + price*quantity + '</div><button class="btn remove-btn">Remove</button></div>');
if (!$('.price-summation')[0]) {
$('.line-items').append('<div class="price-summation"><div class="subtotal price-row">0</div><div class="price-row">Taxes</div><div class="price-row">Total</div></div>');
}
price_subtotal();
return false;
});
$(document).on('click', '.remove-btn', function() {
$(this).closest('.line-item').remove();
price_subtotal();
});
});
DEMO
Got JS Fiddle to work
http://jsfiddle.net/pskjxofo/
Attached I have the following function, the purpose of which is to perform basic calculation. I also added a feature for adding more boxes for calculation. What I am currently stuck on is how to tell Javascript to make dynamic divs, and how to tell it to perform the same calculations for each line every time I click on Calculate. Assistance on this would be greatly appreciated. Thank you all in advance.
<div id="redo">
2 X
<input type="text" id="initial">
= <input type="text" id="solved">
<input type="submit" value="Calculate" onclick="calculait()">
<input type="submit" value="Add Another Box" onclick="addmore()">
</div>
<div id="main"></div>
<script type="text/javascript">
function calculait(){
var first = document.getElementById('initial');
var second = document.getElementById('solved');
second.value = first.value * 2;
}
function addmore(){
var bar = document.getElementById('main');
bar.innerHTML = bar.innerHTML + "<div id='redo'>2 X
<input type='text' id='initial'> = <input type='text' id='solved'>
<input type='submit' value='Calculate' onclick='calculait()'
<input type='submit' value='Add Another Box' onclick='addmore()";
}
</script>
Here is one of the many ways to do it. You could have this HTML structure:
<div id="main">
<div class="operation">
2 X <input type="text" class="initial"/>=
<input type="text" class="solved"/>
</div>
</div>
<input type="submit" value="Calculate" onclick="calculait()"/>
<input type="submit" value="Add Another Box" onclick="addmore()"/>
And this JS:
// Main container for all operations
var main = document.getElementById('main');
// Piece of HTML you'll be duplicating
var op = document.getElementsByClassName('operation')[0].outerHTML;
function calculait() {
// Get every operation div
var operations = document.getElementsByClassName('operation');
// For each of them, calculate
for(var i=0, l=operations.length; i<l; i++){
operations[i].getElementsByClassName('solved')[0].value =
parseFloat(operations[i].getElementsByClassName('initial')[0].value) * 2;
}
}
function addmore() {
main.insertAdjacentHTML('beforeend',op);
}
JS Fiddle Demo
If I understood correctly, I think this code will help.
First of all, change your ids for classes (IDs must be always unique in the page).
<input type="text" class="initial">
<input type="text" class="solved">
And in the JS, you use a for to iterate for this elements.
function calculait() {
var initial = document.getElementsByClassName('initial');
var solved = document.getElementsByClassName('solved');
for (var i = 0; i < initial.length; i++) {
solved[i].value = initial[i].value * 2;
}
}
function addmore() {
var bar = document.getElementById('main');
var html = "<div>2 X ";
html += "<input type='text' class='initial'> = ";
html += "<input type='text' class='solved'>";
html += "</div>";
bar.innerHTML = bar.innerHTML + html;
}
JSFiddle: http://jsfiddle.net/pskjxofo/2/
Give it a try and let me know if it helps!
When you write JavaScript use a debugger, your code didn't parse. You can find one in your browser by hitting F12.
Don't repeat yourself. A clean solution is to put html to duplicate into a template or similar and call a function to copy it.
Use input type=number for numbers.
<html>
<meta charset="utf-8">
<template id="calculate_template">
<form id="" class="calculate_form">
<input value="2" type="number" name="initial_1"> X
<input type="number" name="initial_2"> =
<input type="number" name="solved" disabled="disabled" >
</form>
</template>
<div id="main">
<button onclick="addmore();">Add Another Box</button>
<button onclick="calculate();">Calculate</button>
</div>
<script type="text/javascript">
function calculate(){
/*Calculates all*/
var forms = document.getElementsByClassName('calculate_form'),
i,
length = forms.length;
for(i = 0; i < length; i++){
console.log(forms[i]);
forms[i]['solved'].value = forms[i]['initial_1'].value * forms[i]['initial_2'].value;
}
}
function addmore(){
var main = document.getElementById('main');
main.insertAdjacentHTML("beforeend", document.getElementById('calculate_template').innerHTML);
}
addmore();
</script>
</html>
Demonstration
Here's a way of doing it:
var counter = 0;
function calculait(calculationId) {
var first = document.getElementById('initial' + calculationId);
var second = document.getElementById('solved' + calculationId);
second.value = first.value * 2;
}
function addmore() {
counter++;
var bar = document.getElementById('main');
var newDiv = document.createElement("div");
newDiv.id = "redo" + counter;
newDiv.innerHTML = "2 X <input type='text' id='initial" + counter + "'/> = <input type='text' id='solved" + counter + "'/><input type='submit' value='Calculate' onclick='calculait(" + counter + ")'/><input type='submit' value='Add Another Box' onclick='addmore(" + counter + ")'/>";
bar.appendChild(newDiv);
}
<div id="main"><div id="redo0">2 X <input type="text" id="initial0" /> = <input type="text" id="solved0" /><input type="button" value="Calculate" onclick="calculait(0)" /><input type="button" value="Add Another Box" onclick="addmore(0)" /></div>
</div>
HTML
<p id="operations"></p>
<p>
<input type="submit" value="Calculate" onclick="calc()" />
<input type="submit" value="Add operation" onclick="addOp()" />
</p>
Javascript
var id = 0, multiplier = 2;
var operations = document.getElementById('operations');
function addOp() {
++id;
var p = document.createElement("p");
var right = document.createElement("input");
right.id = 'right_' + id;
right.type = 'text';
var result = document.createElement('input');
result.id = 'result_' + id;
right.type = 'text';
p.innerHTML = multiplier + ' x ';
p.appendChild(right);
p.innerHTML += ' = ';
p.appendChild(result);
operations.appendChild(p);
}
function calc() {
for(var i = 1; i <= id; i++) {
var right = document.getElementById('right_' + i);
var result = document.getElementById('result_' + i);
result.value = multiplier * right.value;
}
}
addOp();
JSFiddle : http://jsfiddle.net/0Lcg0pyz/
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Preferred Seating:</label> <!-- Following drop down checkbox -->
<select name="selectmenu" id="selectmenu">
<option name="selectmenu" value="200" id="lowerArea" >Lower Area($200)</option>
<option name="selectmenu" value="150" checked="checked" id="levelOne">Level 1($150)</option>
<option name="selectmenu" value="100" id="levelTwo">Level 2($100)</option>
<option name="selectmenu" value="200" id="balcony">Balcony($200)</option>
</select>
</div>
<!--End of DropDownBoxes-->
<!--START OF CHECK BOXES-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
<!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
<button type="submit" value="Register" onClick="validateGalaOrder()"></button>
<p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
<p id="tktCost"></p>
<p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->
There are suppose to be breaks inbetween the check boxes, at the moment I can't get the 'saturday' variable to print!
function validateGalaOrder() {
var orderErrorMsg = "";
var OrderInput = "";
var ValidateOrderName = document.getElementById('txtOrderName').value;
var numTickets = document.getElementById('numTickets').value;
var Orderemail = document.getElementById('txtOrderEmail');
var filter = /*Email Symbol and letter Validator*/ /^([a-zA-Z0-9_.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//This filters out the email input
var lowerLvl = document.getElementById('lowerArea').value;
var lvlOne = document.getElementById('levelOne').value;
var lvlTwo= document.getElementById('levelTwo').value;
var Balcony = document.getElementById('balcony').value;
var cost = '';
var prefNight;
if(ValidateOrderName.length <= 2){
orderErrorMsg += ("<b>-ERROR- Please enter a valid name with a length of at least 3 letters</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderName').value = '';//will clear input field if false.
document.getElementById('txtOrderName').focus();//this Focuses on textbox if input is wrong.
//alert("-ERROR- Please enter a name more than one letter!");
document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if (!filter.test(Orderemail.value)) {
orderErrorMsg += ("<b>-ERROR- Please provide a valid email address.</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderEmail').value = '';
document.getElementById('txtOrderEmail').focus();//this Focuses on textbox if input is wrong.
// alert('Please provide a valid email address');
document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if(numTickets <= 0){
orderErrorMsg += ("<b>-ERROR- Please enter an amount of tickets greater than zero</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('numTickets').value = '';
document.getElementById('numTickets').focus();//this Focuses on textbox if input is wrong.
/*alert("-ERROR- Please enter a mobile number with exactly 10 numeric digits");*/
document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if(document.getElementById('checkbox1_0').checked == true){
prefNight = 'Thursday';
}
if(document.getElementById('checkbox1_1').checked == true){
prefNight = 'Friday';
}
if(document.getElementById('checkbox1_2').checked == true){
prefNight = 'saturday';
}
else{
cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets; //This calculates the cost
var Orderemail = document.getElementById('txtOrderEmail').value;
OrderInput += ("Thank You " + "<b>"+ValidateOrderName+"</b>" + " For ordering your tickets" + "<br /> <br />" + "Number of tickets ordered: " + "<b>" + numTickets +"</b>" +
"<br>" + "Your email is: " + "<b>" + Orderemail + "</b>" + "<br /> The total cost will be: "+ "<b>$"+ cost + "</b>" + prefNight);
document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details.
document.getElementById('orderErrorMsg').innerHTML = '';
}
return true;
}
Hi guys I have updated my code and basically at the moment I can print 'Thursday' and 'Friday' But I cannot print 'Saturday'!
You are using radio buttons instead of check boxes!
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
Instead it should be
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
For radio buttons with id "checkbox1_2" you can use-
var rates = document.getElementById('checkbox1_2').value;
to see whether it is checked or not you can use--
var checked=document.getElementById('checkbox1_2').checked;
or by jquery
$('input[name=checkbox1]:checked').val();
These are my Radio Buttons( I have changed them from checkboxes ):
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br /><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
Here is the Javascript that is printing the checked radio button's value ( I have made a variable and used if statements to decide what variable(Answer) to use ), I have put my IF STATEMENTS in the else{ } section because that is where all my correct inputs go. Please bare in mind that my variables are all above this else statement( OR in the previous question ):
else{
//Below is the checkbox printing
if(document.getElementById('checkbox1_0').checked == true){
prefNight = 'Thursday';
}
if(document.getElementById('checkbox1_1').checked == true){
prefNight = 'Friday';
}
if(document.getElementById('checkbox1_2').checked == true){
prefNight = 'Saturday';
}
//Above is the checkbox printing
cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets;//This calculates the cost(selectMenu*numTickets)
var Orderemail = document.getElementById('txtOrderEmail').value;//This will grab the email value Inputed.
OrderInput += ("Thank You " + "<b>"+ValidateOrderName+"</b>" + " For ordering your tickets" + "<br /> <br />" + "Number of tickets ordered: " + "<b>" + numTickets +"</b>" +
"<br>" + "Your email is: " + "<b>" + Orderemail + "</b>" + "<br /> The total cost will be: "+ "<b>$"+ cost + "</b>" + prefNight);
document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details to a html element.
document.getElementById('orderErrorMsg').innerHTML = '';//Removes error messages when everything is correct.
}
return true;