Disable an input field if second input field is filled

Question

totally a newbie... I just want to know how to dynamically disable an input field when the second input field is filled

eg:

<td><input type="text" name="num-input1" id="dis_rm"  value=""></input></td>
<td><input type="text" name="num-input2" id="dis_per" value="" ></input></td>

pls... any links and hints will do...

Answer 1

You simply need to give it a disabled property:

document.getElementById("dis_rm").disabled = true;
document.getElementById("dis_per").disabled = true;

you can use the on change event to see if one of them is filled:

var dis1 = document.getElementById("dis_rm");
dis1.onchange = function () {
   if (this.value != "" || this.value.length > 0) {
      document.getElementById("dis_per").disabled = true;
   }
}

so if the first one is filled, the second one will be disabled