Databases
StackOverflow2013
Postsdbo
POJavascript form validation using innerHTML text won't disappear
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript form validation using innerHTML text won't disappear
    primarykey
    data
    text
    <p>On my html form, when a field is left blank and Javascript executes, an error message is shown using innerHTML. However, after an allowed input is used for that field, with another field being blank, the message won't disappear. If I refresh the page all of the information in the fields stay but the innerHTML message disappears. Is there a way to make the error message disappear after clicking the calculate button and Javascript executes? Like having it recheck and take the message away somehow.</p> <p>Here's my html code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt; &lt;title&gt;The Happy Hoppin' Hotel&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="happyhoppin_skeleton.css" /&gt; &lt;script src="happyhoppin_skeleton.js" language="javascript" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;h1&gt;The Happy Hoppin' Hotel Checkout Page&lt;/h1&gt; &lt;p&gt;Fill out the form below to calculate balance due&lt;/p&gt; Guest ID Number: &lt;input type="text" id="custID" /&gt;&lt;div id="guestID"&gt; &lt;/div&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;div id="room"&gt; &lt;/div&gt; Length of Stay: &lt;input type="text" id="stayLength" name="" /&gt;&lt;div id="stay"&gt; &lt;/div&gt; Number of Drinks: &lt;input type="text" id="drinkNum" name="" /&gt;&lt;div id="drink"&gt; &lt;/div&gt; Number of Towels: &lt;input type="text" id="towelNum" name="" /&gt;&lt;div id="towel"&gt; &lt;/div&gt; Number of Flushes: &lt;input type="text" id="flushNum" name="" /&gt;&lt;div id="flush"&gt; &lt;/div&gt; Bug Complaints?: &lt;label&gt;&lt;br&gt; &lt;input type="radio" id="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" /&gt;Yes&lt;br&gt; &lt;input type="radio" id="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" /&gt;No &lt;div id="comments"&gt;Customer Comments: &lt;textarea name="customerComment" id="comments" onFocus="this.value=''" value="Make me disappear" cols="50" rows="5"&gt;Enter your comments here...&lt;/textarea&gt; &lt;/div&gt; &lt;input type="button" onclick="calculateFinalBill()" value="Calculate"&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here's my Javascript code:</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)){ document.getElementById('guestID').innerHTML="*Guest ID must be a number" throw "stop execution"; } if(custID &lt;= 0){ document.getElementById('guestID').innerHTML="*Guest ID must be greater than zero" throw "stop execution"; } roomType = document.getElementById("roomType").value; if(roomType == ""){ document.getElementById('room').innerHTML="*Room type must be selected" throw "stop execution"; } stayLength = parseInt(document.getElementById("stayLength").value); if(isNaN(stayLength)){ document.getElementById('stay').innerHTML="*Length of Stay must be a number" throw "stop execution"; } if(stayLength &lt; 0){ document.getElementById('stay').innerHTML="*Length of Stay must be greater than zero" throw "stop execution"; } drinkNum = parseInt(document.getElementById("drinkNum").value); if(isNaN(drinkNum)){ document.getElementById('drink').innerHTML="*Number of Drinks must be a number" throw "stop execution"; } if(drinkNum &lt; 0 || drinkNum &gt; 25){ document.getElementById('drink').innerHTML="*Number of Drinks must be 0-25" throw "stop execution"; } towelNum = parseInt(document.getElementById("towelNum").value); if(isNaN(towelNum)){ document.getElementById('towel').innerHTML="*Number of Towels must be a number" throw "stop execution"; } if(towelNum &lt; 0){ document.getElementById('towel').innerHTML="*Number of Towels must be zero or greater" throw "stop execution"; } flushNum = parseInt(document.getElementById("flushNum").value); if(isNaN(flushNum)){ document.getElementById('flush').innerHTML="*Number of Flushes must be a number" throw "stop execution"; } if(flushNum &lt; 0){ document.getElementById('flush').innerHTML="*Number of Flushes must be zero or greater" throw "stop execution"; } 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;"; if(bugDiscount != 0) { newPage += "Discount: $" + bugDiscount; newPage += "&lt;br /&gt;"; } newPage += "Total Due: $" + totalDue; newPage += "&lt;br /&gt;"; newPage += "Come back and visit us again at the Happy Hoppin' Hotel" var j = window.open('','','width=400,height=500'); j.document.write(newPage); j.document.close(); } </code></pre> <p>This may help as a visual <a href="http://jsbin.com/ifuxiv/1/edit" rel="nofollow">http://jsbin.com/ifuxiv/1/edit</a> If you click calculate, enter a value in Guest ID, then click calculate again you'll see that the "Guest ID must be a number" message doesn't go away.</p> <p>If my question is confusing or any additional information is needed, please ask before rejecting my question. Thanks.</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. VO
      singulars
      1. POJavascript form validation using innerHTML text won't disappear
      1. This table or related slice is empty.
      1. VTUpMod
    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