Button remains enabled even after the location input is erased

Question

Steps to reproduce:

Select a date.
Type ABC in the location input. The button will be enabled.
Erase ABC from the location input.

Now the location is empty, yet the button is enabled. So anybody who wants to bypass the location field now can. How can I prevent this from happening?

function testFinish() {
  var datepicker = document.getElementById('datepicker');
  var location = document.querySelector('#location');
  var btn = document.getElementById('btn');
  if (location && location.value && datepicker.value)
    btn.disabled = false;
}

$('#datepicker').datepicker();

button:disabled,
button[disabled] {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

button {
  background: red;
  color: black;
  border: 0;
  font-weight: 900;
  width: 194px;
  height: 40px;
  outline: none;
  cursor: pointer;
  margin-top: 20px;
}

input {
  appearance: none;
  height: 28px;
  text-align: center;
  width: 63px;
  line-height: 24px;
  font-size: 20px;
  border-radius: 5px;
  border-color: orangered;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.css" />

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="col-lg-6 col-md-12 col-12">
  <p><input type="text" onchange="testFinish()" id="datepicker" style="width: 120px;" autocomplete="off" placeholder="Date" readonly /></p>

  <input class="location" id="location" type="text" placeholder="location" onkeyup="testFinish();">

  <div class="field">
    <button type="submit" id="btn" name="ik" disabled onsubmit="alert('SUBMITTED')">Donate</button>
  </div>

</div>

Please remove all code that is not directly involved in your problem. — connexo, Jan 03 '22 at 01:02
I musts concur, throwing at us hundreds of lines of code irrelevant to your question, is the opposite of providing just an image :) please [edit], and by **minimal** I mean create a [mcve] — Roko C. Buljan, Jan 03 '22 at 01:13

Steven Spungin · Accepted Answer · 2022-01-04T15:10:44.953

1

If you to want redisable a button, set disabled to true. You are only enabling it.

if (location && location.value && datepicker.value)
    btn.disabled = false;
else
    btn.disabled = true; // <------

or a one liner

btn.disabled = !location || !location.value || !datepicker.value

edited Jan 04 '22 at 15:10

answered Jan 04 '22 at 10:39

Steven Spungin

27,002
5
88
78

Button remains enabled even after the location input is erased

1 Answers1

Linked