Sorry for the long title, but I really can't think of another way to word it. I've searched similar posts but all I'm finding is posts about how to use keyup(). I'm already using that, my problem is the blank screen.
Problem
The problem I've encountered is that everything runs correctly if you click on the submit button, but if you press the enter key while the input is focused, the screen just goes blank.
Attempted Solution
To remedy this I attempted to set a keyup() function to preventDefault and trigger the button click.
$(document).keyup(function(e) {
if ($("#bday").is(":focus") && e.key == "Enter") {
e.preventDefault();
$('#submit').click();
}
});
Summary
Steps to Reproduce
- Type date in input field
- Press the enter key (on your keyboard)
Expected Behavior
Should be the same as when submit button is clicked with mouse.
Actual Behavior
Upon pressing the enter key, the screen goes blank.
Conclusion
I see that the enter key is indeed triggering a click on the submit button, but the screen still goes blank anyway. Is my keyup() function set up wrong or am I missing something else entirely? There's no console error to tip me off so I'm clueless.
Snippet
// Keyup
$(document).keyup(function(e) {
if ($("#bday").is(":focus") && e.key == "Enter") {
e.preventDefault();
$('#submit').click();
}
});
// Input Mask
$("#bday").inputmask({ mask: "99-99-9999" });
// Logic
$("#submit").click(function() {
// Icons
var arrow = $(".divider>.fa-arrow-right");
var x = $(".divider>.fa-times");
// Warnings
var warning = "<span class='input-warning'>Invalid input. Please try again.</span>"
// Birthday ranges
var date1 = "1930-01-01";
var date2 = "1940-01-01";
var date3 = "1950-01-01";
var date4 = "1960-01-01";
// Enrollment period beginnings
var enp1 = "[date 1 goes here]";
var enp2 = "[date 2 goes here]";
var enp3 = "[date 3 goes here]";
var enp4 = "[date 4 goes here]";
// Get user input
var date = $("#bday")
.val()
.split("-");
// Covert date format
var newDate = date[2] + "-" + date[0] + "-" + date[1];
console.log(date);
console.log(newDate);
// Check for undefined variable
if ($('#bday').val() === "") {
$('#app-container').append(warning);
return false;
} else {
$('.input-warning').hide();
// Date comparison
if (newDate <= date1) {
$("#enrollment").text("Your enrollment period began a looooong time ago");
arrow.hide();
x.fadeIn();
} else if (newDate >= date1 && newDate <= date2) {
x.hide();
arrow.fadeIn().animate({ marginLeft: 0 });
$("#enrollment").text("Your enrollment period begins on " + enp1);
} else if (newDate >= date2 && newDate <= date3) {
x.hide();
arrow.fadeIn().animate({ marginLeft: 0 });
$("#enrollment").text("Your enrollment period begins on " + enp2);
} else if (newDate >= date3 && newDate <= date4) {
x.hide();
arrow.fadeIn().animate({ marginLeft: 0 });
$("#enrollment").text("Your enrollment period begins on " + enp3);
// For some reason the condition below is firing even though newDate is undefined
} else if (newDate >= date4) {
arrow.hide();
x.fadeIn();
$("#enrollment").text("Millenials aren't elegible for medicare, silly").fadeIn(500);
} else {
arrow.hide();
x.fadeIn();
}
}
});::placeholder {
color: graytext;
}
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
text-align: center;
}
h2 {
color: #2780bc;
font-size: 1.5em;
margin-top: 0;
}
#app-container {
max-width: 800px;
display: grid;
grid: 1fr 35px / 1fr 100px 1fr;
grid-row-gap: 30px;
}
#form-wrapper {
display: grid;
justify-items: center;
grid-column: 1;
border: 2px solid #ececec;
padding: 20px;
border-radius: 5px;
}
#form-wrapper form {
display: grid;
grid: auto / 1fr;
width: 210px;
}
#form-wrapper #bday {
width: 200px;
height: 50px;
font-size: 1.9em;
text-align: center;
color: #666;
margin: 0 auto;
border-radius: 3px;
border: 1px solid transparent;
border-top: none;
border-bottom: 1px solid #ddd;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #fff, 0 1px 0 #fff;
}
#form-wrapper #submit {
height: 50px;
color: #fff;
background-color: #2780bc;
border-radius: 5px;
font-size: 1em;
}
.divider {
display: grid;
grid-column: 2;
justify-items: center;
align-items: center;
}
.divider .fa-arrow-right {
display: none;
color: green;
font-size: 3em;
margin-left: -20px;
}
.divider .fa-times {
display: none;
color: indianred;
font-size: 3em;
}
#output {
display: grid;
grid: 80px 1fr / 1fr;
align-items: start;
grid-column: 3;
border: 2px solid #ececec;
padding: 20px;
border-radius: 5px;
}
#output h2 {
margin-bottom: 0;
}
#output #enrollment {
display: none;
}
.input-warning {
grid-row: 2;
grid-column: 1 / -1;
border: 2px solid indianred;
color: indianred;
width: 250px;
justify-self: center;
padding: 5px;
border-radius: 5px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<div id="app-container">
<div id="form-wrapper">
<h2 class="text" value="title">Enter your birthday</h2>
<br>
<form>
<input id="bday" placeholder="mm-dd-yyyy" name="bday" type="text"/>
<br>
<button id="submit" type="button">SUBMIT</button>
</form>
</div>
<div class="divider"><i class="fas fa-arrow-right"></i><i class="fas fa-times"></i></div>
<div id="output">
<h2>Your medicare enrollment period begins:</h2>
<span id="enrollment"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
