CODEWITHSUNDEEP
javascripthtml
Sterling King
Sterling King

Reputation: 163

Temporarily disable an input field if second input field is filled

I'm attempting to disable an input while the user is filling another input. I've managed to disable one of the two inputs while the other input is being filled in.

The problem is that I want the disabled input to ONLY be disabled WHILE the other input is being typed in. So if the user changes their mind on the 1st input, they can delete what is in the current input which makes the 2nd input available and the 1st disabled.

JS

var inp1 = document.getElementById("input1");
inp1.onchange = function () {
   if (this.value != "" || this.value.length > 0) {
      document.getElementById("input2").disabled = true;
   }
}

HTML

<input type="text" id="input1">
<input type="text" id="input2">

Upvotes: 0

Views: 7463

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1073968

First, I would use input rather than change. Then, you need to set disabled back to false if the input is blank. Your check for whether it's blank is redundant, you just neither either side of your ||, not both. (I'd also use addEventListener rather than assigning to an .onxyz property, so that it plays nicely with others. :-) )

So:

var inp1 = document.getElementById("input1");
inp1.addEventListener("input", function () {
    document.getElementById("input2").disabled = this.value != "";
});
<input type="text" id="input1">
<input type="text" id="input2">

...and then of course if you want it to be mutual, the same for input2.

Upvotes: 4

user9062825
user9062825

Reputation:

Don't make it harder than it is, this is simple.

var one = document.getElementById('one');
var two = document.getElementById('two');

//checks instantly 
var checker = setInterval(function() {
    if(two.value !== '') {
      one.disabled = true;
    } else {
      //when its clear, it enabled again
      one.disabled = false;
    }
    if(one.value !== '') {
      two.disabled = true
    } else {
      two.disabled = false;
    }
}, 30);
<input id="one">
<input id="two">

Upvotes: 0

Morilon
Morilon

Reputation: 456

How about using keyup?

Like this;

var inp1 = document.getElementById("input1");

var inp2 = document.getElementById("input2");

inp1.onkeyup = function() { inputValidation(this, inp2); }

inp2.onkeyup = function() { inputValidation(this, inp1); }

function inputValidation(origin, lock) {
  var response = hasValue(origin.value);
  lock.disabled = response;
}

function hasValue(value) {
  return value != "" && value.length > 0;
}

https://jsfiddle.net/8o3wwp6s/

Upvotes: 1

Yuri
Yuri

Reputation: 2900

You can achieve this using focus and blur. Below it is done with JQuery.

$(function() {
    $('#input1').focus(function(){
      $('#input2').prop('disabled', 'disabled');
    }).blur(function(){
     $('#input2').prop('disabled', '');
    });
    
    $('#input2').focus(function(){
      $('#input1').prop('disabled', 'disabled');
    }).blur(function(){
     $('#input1').prop('disabled', '');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">

Upvotes: 2

Related Questions