In the form below, I have a simple form. First Name, Last Name and Gender are the only required fields. Once those fields are complete, click submit... the First Name and Last Name field inputs are collected and a message displays, (for example) Joe Smith has been added., and the form resets and the message goes away.
When I try to add another person to the form and hit submit, the message doesn't display, but the form still resets after 2500ms.
Why doesn't the success alert display beyond the first form submit?
const submit = document.querySelector('#addPerson');
const select = document.querySelector('select[name=gender]');
const personAdded = document.querySelector('#successAddPersonMsg');
submit.addEventListener("click", (e) => {
if (fname.value != "" && lname.value != "" && select.value != "") {
document.querySelector(
"#successAddPersonMsg"
).innerHTML = `<div class="alert alert-success" role="alert">${fname.value} ${lname.value} has been added!</div>`;
setTimeout(function() {
personAdded.style.display = "none";
addNewPersonForm.reset();
}, 2500);
e.preventDefault();
}
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form action="" name="addNewPersonForm" id="addNewPersonForm">
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname" class="is-required">First Name</label>
<input type="text" id="fname" class="form-control" required>
</div>
<div class="col-sm-3 m-t">
<label for="lname" class="is-required">Last Name</label>
<input type="text" id="lname" class="form-control" required>
</div>
<div class="col-sm-2 m-t">
<label for="gender" class="is-required">Gender</label>
<select class="form-control" name="gender" id="gender" required>
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate">
</div>
</div>
<div class="col-sm-2 m-t">
<label for="dummy" class="control-label"> </label>
<input class="btn btn-primary form-control" type="submit" id="addPerson" value="Add
Person">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-offset-4">
<div id="successAddPersonMsg"></div>
</div>
</div>
</div>