I've got a form using JavaScript that sends a user to a different page depending on their input using "if/else" statements. However, the input field will not accept spaces. It will accept every character except spaces. I can't seem to figure out what is causing this.
Below is the HTML, CSS, and JS that goes along with the input form.
<!-- This is the HTML for the input form -->
<div class="single_input">
<form onSubmit="return checkAnswer();">
<input class="nice-select wide" placeholder="Enter Your State" id="state" type="text" maxlength="55" class="box" autofocus />
</div>
<!-- This is the script that is in the head of the document controlling the redirect. -->
<script>
function checkAnswer(){
var response = document.getElementById('state').value;
if (response == "Kentucky")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "kentucky")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "KY")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "ky")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "New York")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "new york")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "NY")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "ny")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "Washington")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "Washington St")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "Washington ST")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "Washington st")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "washington")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "washington state")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "Washington State")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "Washington state")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "washington State")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "wa")
location = 'https://linxdalton.com'; // 'right.html';
else if (response == "WA")
location = 'https://linxdalton.com'; // 'right.html';
else
location = 'https://google.com'; // 'wrong.html';
return false;
}
</script>
Below is all of the CSS that is associated with the input element.
.nice-select::after {
content: "\f0d7";
display: block;
pointer-events: none;
position: absolute;
right: 30px;
top: 50%;
transition: all 0.15s ease-in-out;
width: 5px;
font-family: 'fontawesome';
color: #ddd;
transform: translateY(-50%);
font-size: 16px;
right: 25px;
color: #AAB1B7;
height: auto;
margin-top: 0;
}
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark-color(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
background-color: -internal-light-dark-color(white, black);
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 11px system-ui;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
-webkit-tap-highlight-color: blue;
background-color: #fff;
border-radius: 5px;
border: solid 1px #e8e8e8;
box-sizing: border-box;
clear: both;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
white-space: nowrap;
width: auto;
}
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 5px;
color: #7A838B;
margin-bottom: 15px;
That's all the code connected with that input element. Let me know if you can find any reason that it wouldn't be accepting spaces!
Thanks!