Activate html text form box when additional text form box text is deleted

Question

I have the below code which when text is entered in one box, the second box is automatically made inactive. If the text in the active box is deleted(e.g. due to user entering incorrect data), the second text box does not automatically become active, it requires a page refresh to be made active again.

Is there a way to make the "made inactive" text box active when content of the "active" text bx is deleted?

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>

<body>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
<script type="text/javascript">
var first = document.getElementById("fname");
var last = document.getElementById("lname");
first.addEventListener("blur", function(){
  last.disabled = true;
});
last.addEventListener("blur", function(){
  first.disabled = true;
});
</script>
</body>
</html>

While this is simple enough to achieve I'm curious as to *why* you're doing this; a person can have a last name *or* a first name, but not both? Or am I really misunderstanding your UI? — David Thomas, Jun 11 '16 at 20:16
First and last name won't actually be the choices, they will be "Each" and "Total" which refer to cost as the project is to allow users calculate the cost of going to an event abroad based on the total number of people going and whether they know the each cost or total cost so as to calculate the individual costs overall. It was just easier to use names for the example. — CraigF, Jun 12 '16 at 21:21

score 2 · Answer 1 · answered Jun 11 '16 at 21:12

You can use input event to achieve your goal:

window.onload = function() {
  var first = document.getElementById("fname");
  var last = document.getElementById("lname");
  first.addEventListener("input", function(e){
    last.disabled = this.value.trim().length != 0;
  });
  last.addEventListener("input", function(e){
    first.disabled = this.value.trim().length != 0;
  });
}

First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>

score 1 · Accepted Answer · edited May 23 '17 at 11:52

To do what you ask, you need to cover for four conditions:

(1) When focus on one of the fields, disable the other field

(2) When delete ALL data within active field, enable the other field

(3) When add new data into active field, disable the other field

(4) When blur active field, re-enable other field IF blurred field empty

This should cover the four. Note that this example uses jQuery, so the jQuery library should be included (as it is in the demo code below). Also, the jQuery code should be inside a document ready function.

$(document).ready(function(){

  $('input').focus(function(){
    $('input').not(this).prop('disabled',true);
  });

  $('input').keyup(function(){
    var txt = $(this).val();
    if (txt.length < 1) $('input').prop('disabled', false);
    else $('input').not(this).prop('disabled',true);
  });

  $('input').blur(function(){
    var txt = $(this).val();
    if (txt.length < 1) $('input').prop('disabled', false);
  });

}); //END document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>

Activate html text form box when additional text form box text is deleted

2 Answers2