Javascript form validation using innerHTML text won't disappear

Question

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.

Here's my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>The Happy Hoppin' Hotel</title>
    <link type="text/css" rel="stylesheet" href="happyhoppin_skeleton.css" />
    <script src="happyhoppin_skeleton.js" language="javascript" type="text/javascript"></script> 
  </head>
    <body>
        <form>
            <h1>The Happy Hoppin' Hotel Checkout Page</h1>
            <p>Fill out the form below to calculate balance due</p>
            Guest ID Number: <input type="text" id="custID" /><div id="guestID"> </div>
            Room Type: 
            <select id="roomType" />
                <option></option>
                <option>Double</option>
                <option>Single</option>
                <option>Parlor</option>
            </select><div id="room"> </div>
            Length of Stay: <input type="text" id="stayLength" name="" /><div id="stay"> </div>
            Number of Drinks: <input type="text" id="drinkNum" name="" /><div id="drink"> </div>
            Number of Towels: <input type="text" id="towelNum" name="" /><div id="towel"> </div>
            Number of Flushes: <input type="text" id="flushNum" name="" /><div id="flush"> </div>
            Bug Complaints?:  <label><br>
            <input type="radio" id="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" />Yes<br>
            <input type="radio" id="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" />No

            <div id="comments">Customer Comments: 
            <textarea name="customerComment" id="comments" onFocus="this.value=''" value="Make me disappear" cols="50" rows="5">Enter your comments here...</textarea> 
            </div>
            <input type="button" onclick="calculateFinalBill()" value="Calculate">
        </form>
    </body> 
</html>

Here's my Javascript 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 <= 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 < 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 < 0 || drinkNum > 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 < 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 < 0){
    document.getElementById('flush').innerHTML="*Number of Flushes must be zero or greater"
    throw "stop execution";
}

customerComment = document.getElementById("customerComment");
}

function displayBill(){
var newPage =  "<html><head><title>Billing Summary</title></head>"; //Add CSS after title
    newPage += "<body><h1>Happy Hoppin Hotel</h1>";
    newPage += "<h2>Guest Billing Summary</h2>";
    newPage += "Guest Identification: " + custID;
    newPage += "<br />";
    newPage += "Room Type: " + roomType;
    newPage += "<br />";
    newPage += "Length of Stay: " + stayLength;
    newPage += "<br />";
    newPage += "Room Charge: $" + roomTotal;
    newPage += "<br />";
    newPage += "Drink Charge: $" + drinkTotal;
    newPage += "<br />";
    newPage += "Towel Charge: $" + towelTotal;
    newPage += "<br />";
    newPage += "Flushing Charge: $" + flushTotal;
    newPage += "<br />";
    newPage += "Subtotal: $" + subtotal;
    newPage += "<br />";
    if(bugDiscount != 0)
    {
    newPage += "Discount: $" + bugDiscount;
    newPage += "<br />";
    }
    newPage += "Total Due: $" + totalDue;
    newPage += "<br />";
    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();

}

This may help as a visual http://jsbin.com/ifuxiv/1/edit 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.

If my question is confusing or any additional information is needed, please ask before rejecting my question. Thanks.

Pebbl · Accepted Answer · 2013-04-14 01:40:52Z

1

This can simply be solved by resetting your error messages at the beginning of the validation:

document.getElementById('guestID').innerHTML='';
document.getElementById('room').innerHTML='';
document.getElementById('stay').innerHTML='';
document.getElementById('drink').innerHTML='';
/// and so on.

However it might be best to approach this in a more DRY way (do not repeat yourself) and either create generalised methods for setting each error message, or at the very least store var references to each error output element i.e. var gID = document.getElementById('guestID'); which would mean you could easily write gID.innerHTML where ever you needed and would save re-searching the DOM.

answered Apr 14, 2013 at 1:40

Pebbl

36.1k6 gold badges66 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheUnCola Over a year ago

Thanks! That was so simple. I don't know why I didn't think of it.

Collectives™ on Stack Overflow

Javascript form validation using innerHTML text won't disappear

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related