Databases
StackOverflow2013
Postsdbo
POHTML radio showing output on newPage from Javascript function
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML radio showing output on newPage from Javascript function
    primarykey
    data
    text
    <p>I have a school project involving a bill for a hotel after inputing all the information. I want <code>newPage</code> under <code>function displayBill()</code> in the javascript to show "Discount: $20" only when the bug discount is checked as yes on the html form. When someone chooses the no option on the form, the javascript function should say <code>bugDiscount = 0</code>, however, I don't want discount to show up on the new page(bill summary). I know that it shows up because when the <code>displayBill()</code> function is called it always shows the discount. Should I make 2 different <code>displayBill()</code>'s, 1 with the discount and 1 without? Or is there an easier way to do it?</p> <p>Here's the html code:</p> <pre><code>&lt;form&gt; Guest ID Number: &lt;input type="text" id="custID" /&gt;&lt;br /&gt; Room Type: &lt;select id="roomType" /&gt; &lt;option&gt;&lt;/option&gt; &lt;option&gt;Double&lt;/option&gt; &lt;option&gt;Single&lt;/option&gt; &lt;option&gt;Parlor&lt;/option&gt; &lt;/select&gt;&lt;br /&gt; Length of Stay: &lt;input type="text" id="stayLength" name="numOranges" /&gt;&lt;br /&gt; Number of Drinks: &lt;input type="text" id="drinkNum" name="numOranges" /&gt;&lt;br /&gt; Number of Towels: &lt;input type="text" id="towelNum" name="numOranges" /&gt;&lt;br /&gt; Number of Flushes: &lt;input type="text" id="flushNum" name="numOranges" /&gt;&lt;br /&gt; Bug Complaints?: &lt;br /&gt; &lt;label&gt; &lt;input type="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" /&gt;Yes&lt;br /&gt; &lt;input type="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" /&gt;No&lt;br /&gt; &lt;br /&gt; Customer Comments: &lt;br /&gt; &lt;textarea name="customerComment" cols="50" rows="5"&gt;Enter your comments here...&lt;/textarea&gt; &lt;br /&gt; &lt;br /&gt; &lt;input type="button" onclick="calculateFinalBill()" value="Calculate"&gt; &lt;/form&gt; </code></pre> <p>Here's the Javascript:</p> <pre><code>const doublePrice = 150; const singlePrice = 100; const parlorPrice = 80; const drinkPrice = 5; const towelPrice = 3; const flushPrice = 1; var custID; var roomPrice; var stayLength; var drinkNum; var towelNum; var flushNum; var totalDue; var subtotal; var roomType; var bugDiscount; function calculateFinalBill() { validateForm(); if(roomType == "Double"){ roomPrice = doublePrice; } if(roomType == "Single"){ roomPrice = singlePrice; } if(roomType == "Parlor"){ roomPrice = parlorPrice; } roomTotal = roomPrice * stayLength towelTotal = towelPrice * towelNum flushTotal = flushPrice * flushNum drinkTotal = drinkPrice * drinkNum subtotal = roomTotal + towelTotal + flushTotal + drinkTotal totalDue = subtotal - bugDiscount displayBill(); } function getCheckedRadio(which){ var bugValue = which.value; if (bugValue == "No"){ bugDiscount = 0; } if (bugValue == "Yes"){ bugDiscount = 20; } } function validateForm(){ custID = parseInt(document.getElementById("custID").value); if(isNaN(custID)){ alert('Customer ID must be a number'); return; } if(custID &lt;= 0){ alert('Customer ID must be greater than zero'); return; } roomType = document.getElementById("roomType").value; if(roomType == ""){ alert("Room type must be selected"); return; } stayLength = parseInt(document.getElementById("stayLength").value); if(isNaN(stayLength)){ alert('Length of Stay must be a number'); } if(stayLength &lt; 0){ alert('Length of Stay must be greater than zero'); return; } drinkNum = parseInt(document.getElementById("drinkNum").value); if(isNaN(drinkNum)){ alert('Number of Drinks must be a number'); } if(drinkNum &lt; 0 || drinkNum &gt; 25){ alert('Number of Drinks must be 0-25'); return; } towelNum = parseInt(document.getElementById("towelNum").value); if(isNaN(towelNum)){ alert('Number of Towels must be a number'); } if(towelNum &lt; 0){ alert('Number of Towels must be zero or greater'); return; } flushNum = parseInt(document.getElementById("flushNum").value); if(isNaN(flushNum)){ alert('Number of Flushes must be a number'); } if(flushNum &lt; 0){ alert('Number of Flushes must be zero or greater'); return; } customerComment = document.getElementById("customerComment"); } function displayBill(){ var newPage = "&lt;html&gt;&lt;head&gt;&lt;title&gt;Billing Summary&lt;/title&gt;&lt;/head&gt;"; //Add CSS after title newPage += "&lt;body&gt;&lt;h1&gt;Happy Hoppin Hotel&lt;/h1&gt;"; newPage += "&lt;h2&gt;Guest Billing Summary&lt;/h2&gt;"; newPage += "Guest Identification: " + custID; newPage += "&lt;br /&gt;"; newPage += "Room Type: " + roomType; newPage += "&lt;br /&gt;"; newPage += "Length of Stay: " + stayLength; newPage += "&lt;br /&gt;"; newPage += "Room Charge: $" + roomTotal; newPage += "&lt;br /&gt;"; newPage += "Drink Charge: $" + drinkTotal; newPage += "&lt;br /&gt;"; newPage += "Towel Charge: $" + towelTotal; newPage += "&lt;br /&gt;"; newPage += "Flushing Charge: $" + flushTotal; newPage += "&lt;br /&gt;"; newPage += "Subtotal: $" + subtotal; newPage += "&lt;br /&gt;"; newPage += "Discount: $" + bugDiscount; newPage += "&lt;br /&gt;"; newPage += "Total Due: $" + totalDue; newPage += "&lt;br /&gt;"; var j = window.open('','','width=400,height=500'); j.document.write(newPage); j.document.close(); } </code></pre> <p>This is what the new page(bill summary) should look like when there is a bug discount <a href="http://i.imgur.com/2ipm4LL.jpg" rel="nofollow">http://i.imgur.com/2ipm4LL.jpg</a></p> <p>This is what it should look like if there isn't a bug discount <a href="http://i.imgur.com/amYl1fu.jpg" rel="nofollow">http://i.imgur.com/amYl1fu.jpg</a></p> <p>If my question is confusing, then please specify what I need to clarify. I was having trouble thinking about how to ask this question without making it confusing. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USTheUnCola
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload