Trying to create a form where users enter their first name, last name, and city. If any input is empty or contains numbers, a message should appear requesting to fill out all boxes without numbers. Otherwise, display a personalized quote using the input information. However, the else statement is not functioning as expected.
I attempted to modify the code and switch some variables around.
function FillInfo()
{
/* variables */
var firstName = document.forms["SignUpForm"]["firstName"].value;
var lastName = document.forms["SignUpForm"]["lastName"].value;
var city = document.forms["SignUpForm"]["city"].value;
/* Check if input fields are empty or contain numbers */
if(firstName=="" || !isNaN(firstName) || lastName=="" || !isNaN(lastName) || city=="" || !isNaN(city){
document.getElementById("info").innerHTML = "Please fill out all available boxes and ensure no numbers are included";
}
else{
document.getElementById("info").innerHTML = "Thank you" + " " + firstName + " " + lastName + " from" + " " + city + "." + " " + "You are now being considered as our next adventurer. Good luck!";
}
}<div class="heading2">
<div class="container2">
<p>Ready for a space travel adventure? Fill out our form!</p><br>
<form name="SignUpForm">
<input type="text" name="firstName" placeholder="First name" required><br>
<input type="text" name="lastName" placeholder="Last name" required><br>
<input type="text" name="city" placeholder="City" required><br><br>
<div id="info" class="well"></div>
<input type="button" class="otherpage" onclick="FillInfo();" value="Submit" /><br><br>
<a href="Homepage.html" class="BeginLink">Go back</a>
</form>
</div>
</div>