JS Disable Button based on user input

Question

I have 2 text inputs on a Form:

<div class="form-group">
    <input type="text" class="form" id="descriptionInput" placeholder="Customer Name"       onkeyup="manage(this)">
</div>

<div class="form">
    <input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>

The idea is to enable the submit button only if these 2 fields have any value: My button:

<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>

My enable/disable function:

function manage(descriptionInput, contactName) {
    var bt = document.getElementById('btSubmit');
    var custName = document.getElementById('descriptionInput').value.length;
    var contact = document.getElementById('contactName').value.length;
    if (custName > 0 && contact > 0) {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}

Issue is: if customer name field has 1 character only + contact has 1 or more characters = doesn't work if customer name field has 2 characters + contact has 1 or more characters = it works

Not sure what's happening, any ideas? Thanks

That is because the `manage` function is only called on a key up event on the `#descriptionInput` `` — Titus, Feb 18 '23 at 15:54
@Titus you should write an answer if the OP thinks this is helpful — Parking Master, Feb 18 '23 at 15:56
Inline event handlers like `onkeyup` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Feb 18 '23 at 16:03

score 2 · Answer 1 · answered Feb 18 '23 at 16:03

The problem is that the manage function is only called when a key up event is triggered on the #descriptionInput <input>. To fix that, monitor both inputs for changes, here is an example:

const btSubmit = document.querySelector('#btSubmit');
const descriptionInput = document.querySelector('#descriptionInput');
const contactName = document.querySelector('#contactName');
function manage() {
  btSubmit.disabled = descriptionInput.value.length === 0 || contactName.value.length === 0;
}

descriptionInput.addEventListener('input', manage);
contactName.addEventListener('input', manage);

<div class="form-group">
    <input type="text" class="form" id="descriptionInput" placeholder="Customer Name">
</div>

<div class="form">
    <input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>

<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>

Here, instead of listening for key up events, I'm listening for input events, this is more appropriate because this event is also triggered when you paste something in an input for example.

Also, instead of adding the event listeners inline, I'm adding them in JavaScript.

score 1 · Answer 2 · answered Feb 18 '23 at 16:00

1

You forgot to add the keyup event on the second input.

answered Feb 18 '23 at 16:00

Mer Mer

83
11

JS Disable Button based on user input

2 Answers2