How to make button disable if textarea is empty

Question

I have a textarea like below, when the value is empty then the "convert" and "clear value" buttons are not active/disable, they will be active only if the textarea field has a value.

If the value is cleared manually it has worked properly, but the problem is if the "clear value" function works to empty the text area value the button is still active.

how to fix that when the textarea field is emptied by the "clear value" function, the two buttons become inactive. so they are only active when the textarea field contains a value.

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function() {
  let inputArr = document.querySelector('#inputTextarea').value.split('
');
  let $result = document.querySelector('#outputTextarea')
  let number = 1
  let final = []

  for (row of inputArr) {
    let rowArr = row.split(' | ')
    let first = rowArr.shift().split(':')
    let nrString = `+No.` + number
    let mail = `Email: ${first[0]}`
    let token = `Token: ${first[1]}`

    rowArr.unshift(nrString, mail, token);
    rowArr = rowArr.join('
')
    final.push(rowArr)
    number++
  }

  let finalText = final.join('

')
  $result.value = finalText
});

//button copy result
let buttonCopy = document.getElementById("copyResult"),
  input = document.getElementById("outputTextarea");

buttonCopy.addEventListener("click", function(event) {
  event.preventDefault();
  input.select();
  document.execCommand("copy");
  //alert("Result copied");
});

//Clear input textarea value
const inputTextarea = document.getElementById("inputTextarea");
const btnClear = document.getElementById('clearValue');
btnClear.addEventListener('click', function handleClick() {
  inputTextarea.value = '';
});

//disable action button if textarea empty
$(document).ready(function() {
  $('.inputTextarea textarea').keyup(function() {

    var empty = false;
    $('.inputTextarea textarea').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('.actionTextarea button').attr('disabled', 'disabled');
    } else {
      $('.actionTextarea button').attr('disabled', false);
    }
  });
});







  
    Paste bulk text bellow
    
  

  
  
    
    
  





  
    
      
        Convert result

user_14104 · Answer

Plain old html and CSS using required and invalid selector

form:invalid button {
  pointer-events: none;
  opacity: 0.3;
}

user_824897 · Answer

I would make a function called something like "updateButtons", and whenever it is called, it just checks to see if the text area has text or not, and then enables or disables the buttons appropriately. Then you can call that function from the text area's onchange, onmouseup, keyup, and so on. And you can also call it at the end of the function that clears the text area. So, when the button is pressed, it clears the text area and then just calls for the code to see what state the buttons should be in.

user_10727157 · Answer

Not an elegant solution but this does work.

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function() {
  let inputArr = document.querySelector('#inputTextarea').value.split('
');
  let $result = document.querySelector('#outputTextarea')
  let number = 1
  let final = []

  for (row of inputArr) {
    let rowArr = row.split(' | ')
    let first = rowArr.shift().split(':')
    let nrString = `+No.` + number
    let mail = `Email: ${first[0]}`
    let token = `Token: ${first[1]}`

    rowArr.unshift(nrString, mail, token);
    rowArr = rowArr.join('
')
    final.push(rowArr)
    number++
  }

  let finalText = final.join('

')
  $result.value = finalText
});

//button copy result
let buttonCopy = document.getElementById("copyResult"),
  input = document.getElementById("outputTextarea");

buttonCopy.addEventListener("click", function(event) {
  event.preventDefault();
  input.select();
  document.execCommand("copy");
  //alert("Result copied");
});

//Clear input textarea value
const inputTextarea = document.getElementById("inputTextarea");
const btnClear = document.getElementById('clearValue');
btnClear.addEventListener('click', function handleClick() {
  inputTextarea.value = '';
   $('.actionTextarea button').attr('disabled', 'disabled');
});

//disable action button if textarea empty
$(document).ready(function() {
  $('.inputTextarea textarea').keyup(function() {

    var empty = false;
    $('.inputTextarea textarea').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('.actionTextarea button').attr('disabled', 'disabled');
    } else {
      $('.actionTextarea button').attr('disabled', false);
    }
  });
});







  
    Paste bulk text bellow
    
  

  
  
    
    
  





  
    
      
        Convert result

user_6316709 · Answer

Its work fine now

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function () {
let inputArr = document.querySelector('#inputTextarea').value.split('
');
let $result = document.querySelector('#outputTextarea')
let number = 1
let final = []

for (row of inputArr) {
let rowArr = row.split(' | ')
let first = rowArr.shift().split(':')
let nrString = `+No.` + number
let mail = `Email: ${first[0]}`
let token = `Token: ${first[1]}`

rowArr.unshift(nrString, mail, token);
rowArr = rowArr.join('
')
final.push(rowArr)
number++
}

let finalText = final.join('

')
$result.value = finalText
});

//button copy result
let buttonCopy = document.getElementById("copyResult"),
input = document.getElementById("outputTextarea");

buttonCopy.addEventListener("click", function (event) {
event.preventDefault();
input.select();
document.execCommand("copy");
//alert("Result copied");
});

//Clear input textarea value
const inputTextarea = document.getElementById("inputTextarea");
const btnClear = document.getElementById('clearValue');
btnClear.addEventListener('click', function handleClick() {
inputTextarea.value = '';
$btn.disabled = true;
});

//disable action button if textarea empty
$(document).ready(function() {
$('.inputTextarea textarea').keyup(function() {

var empty = false;
$('.inputTextarea textarea').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});

if (empty) {
$('.actionTextarea button').attr('disabled', 'disabled');
} else {
$('.actionTextarea button').attr('disabled', false);
}
});
});








Paste bulk text bellow
















Convert result

user_11887902 · Answer

Just disable the input after you click clear text button.

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function() {
  let inputArr = document.querySelector('#inputTextarea').value.split('
');
  let $result = document.querySelector('#outputTextarea')
  let number = 1
  let final = []

  for (row of inputArr) {
    let rowArr = row.split(' | ')
    let first = rowArr.shift().split(':')
    let nrString = `+No.` + number
    let mail = `Email: ${first[0]}`
    let token = `Token: ${first[1]}`

    rowArr.unshift(nrString, mail, token);
    rowArr = rowArr.join('
')
    final.push(rowArr)
    number++
  }

  let finalText = final.join('

')
  $result.value = finalText
});

//button copy result
let buttonCopy = document.getElementById("copyResult"),
  input = document.getElementById("outputTextarea");

buttonCopy.addEventListener("click", function(event) {
  event.preventDefault();
  input.select();
  document.execCommand("copy");
  //alert("Result copied");
});

//Clear input textarea value
const inputTextarea = document.getElementById("inputTextarea");
const btnClear = document.getElementById('clearValue');
btnClear.addEventListener('click', function handleClick() {
  inputTextarea.value = '';
  $('.actionTextarea button').attr('disabled', 'disabled');
});

//disable action button if textarea empty
$(document).ready(function() {
  $('.inputTextarea textarea').keyup(function() {

    var empty = false;
    $('.inputTextarea textarea').each(function() {
      if ($(this).val().length == 0) {
        empty = true;
      }
    });

    if (empty) {
      $('.actionTextarea button').attr('disabled', 'disabled');
    } else {
      $('.actionTextarea button').attr('disabled', false);
    }
  });
});







  
    Paste bulk text bellow
    
  

  
  
    
    
  





  
    
      
        Convert result

user_3684265 · Answer

You can always simply have a single function that is called both on input of the textareas but also in the click handler for your clear button.

You have a bunch of code that isn't needed for the question, so I just have the following working code.

function validateTextareas() {
  var empty = false;

  $('.inputTextarea textarea').each(function() {
    if ($(this).val().length == 0) {
      empty = true;
    }
  });
  
    $('.actionTextarea button').attr('disabled', empty);
}

$(document).ready(function() {

  $('.inputTextarea textarea').on("input", function() {
    validateTextareas();
  });

  $(".btn-clear").on("click", function() {
    $(".inputTextarea textarea").val("");
    validateTextareas();
  });
});



  aaaa

How to make button disable if textarea is empty

6 Answers