How to make an input field readonly based on anther input field?

Question

I am making a unit converter with two input fields, one for centimeters and the other for inches. I was wondering if it would be possible for one of the fields to be changed to read only if there is input in the other field. Here is my code for one of the fields: <input name="cm" class="inputs peach Calibri" type="number" min="0" step="1" /> .

Any help would be appreciated. Thanks!

Answer 1

This would be a fairly good starting point.

 let cmInput = document.getElementById("cminput"); let inInput = document.getElementById("inchinput"); cmInput.onkeyup = function(){ if(cmInput.value !== ""){ inInput.disabled = true; }else{ inInput.disabled = false; } }; inInput.onkeyup = function(){ if(inInput.value !== ""){ cmInput.disabled = true; }else{ cmInput.disabled = false; } }; 

 <input type="text" placeholder="centimetres" id="cminput"> <input type="text" placeholder="inches" id="inchinput"> 

Answer 2

Not the cleanest way but it works just add your logic for conversion. This also remove readonly attr when input field is empty jsfiddle (click me)

<label for="cm">cm: </label>
<input name="cm" id="cm" class="inputs peach Calibri" type="number" min="0" step="1" />


<label for="inch">inch: </label>
<input name="inch" id="inch" class="inputs peach Calibri" type="number" min="0" step="1" />

$('#cm').on('keyup', function() {

  if ($('#cm').val() != '') {
    $('#inch').prop('readonly', true);

  } else if ($('#cm').val() == '') {
    $('#inch').prop('readonly', false);
  }

});

$('#inch').on('keyup', function() {

  if ($('#inch').val() != '') {
    $('#cm').prop('readonly', true);

  } else if ($('#inch').val() == '') {
    $('#cm').prop('readonly', false);
  }

});

Answer 3

would you consider another pattern for this?

The readonly solution is pretty straigh forward, but a lot of sites with not only numeric convertion, for example, google translate, use a button to switch the convertion leaving the right side of the converter control with a read only, so if you want to make something like this in order to follow a more standart pattern

here it is

 $('button').on('click',function(){ $('.cont').toggleClass('invert') }); $('input').on('keypress',function(){ if($('.cont').hasClass('invert')){ // some convertion code for INCH to CM }else{ // some convertion code for CM to INCH } }); 

 .cont{ display:flex; align-items: center; justify-content: center; border:1px solid silver; } .cont.invert{ flex-direction: row-reverse; } fieldset{ border:none; position:relative; } button{ display: block; line-height: 22px; } .cont.invert fieldset:first-child:after{ content:""; display: block; position: absolute; width: 100%; height: 100%; left: 0px; top:0px; background-color: rgba(255,255,255,.3); } .cont.invert fieldset:last-child:after{ display: none; } .cont fieldset:last-child:after{ content:""; display: block; position: absolute; width: 100%; height: 100%; left: 0px; top:0px; background-color: rgba(255,255,255,.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cont"> <fieldset> <label for="inp1">CM</label> <br> <input type="text"> </fieldset> <button> < > </button> <fieldset> <label for="inp1">INCH</label> <br> <input type="text"> </fieldset> </div> 

As you can see, i did not disabled the input, i used a block to cover it from editing, the block on top of the right input has a white background with alpha on it, this way, if you want, you can control the way of the "disabled" one, no touching the input´s css and may looks the same on every browser.

Hope this helps

Answer 4

You could call a js function oninput like so:

<input type="text" id="cm" oninput="input('cm')"/>
<input type="text" id="inch" oninput="input('inch)"/>

function input(which){
    if(which === 'cm'){
        if(document.getElementById('cm').value!= ''){
            document.getElementById('inch').disabled = true;
        }else{
            document.getElementById('cm').disabled = false;
        }
    }else{
        if(document.getElementById('inch').value!= ''){
            document.getElementById('cm').disabled = true;
        }else{
            document.getElementById('inch').disabled = false;
        }
    }
}