How to make button disable if textarea is empty-CodePudding

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('\n');
  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('\n')
    final.push(rowArr)
    number  
  }

  let finalText = final.join('\n\n')
  $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);
    }
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
  <div >
    <label for="inputTextarea">Paste bulk text bellow</label>
    <textarea  id="inputTextarea" rows="3"></textarea>
  </div>

  <!-- Button trigger modal -->
  <div >
    <button type="button"  data-toggle="modal" data-target="#modalTextarea" id="convert" disabled>
Convert
</button>
    <button type="button"  id="clearValue" disabled>Clear value</button>
  </div>
</div>

<!--Result area-->
<!-- Modal -->
<div  id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5 >Convert result</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
      </div>
      <div >
        <textarea  id="outputTextarea" rows="8"></textarea>
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button"  id="copyResult">Copy Result</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Plain old html and CSS using required and invalid selector

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

<form>
<textarea required></textarea>
<button>click</button>
<button>click</button>
</form>

CodePudding user response：

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('\n');
  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('\n')
    final.push(rowArr)
    number  
  }

  let finalText = final.join('\n\n')
  $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);
    }
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
  <div >
    <label for="inputTextarea">Paste bulk text bellow</label>
    <textarea  id="inputTextarea" rows="3"></textarea>
  </div>

  <!-- Button trigger modal -->
  <div >
    <button type="button"  data-toggle="modal" data-target="#modalTextarea" id="convert" disabled>
Convert
</button>
    <button type="button"  id="clearValue" disabled>Clear value</button>
  </div>
</div>

<!--Result area-->
<!-- Modal -->
<div  id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5 >Convert result</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
      </div>
      <div >
        <textarea  id="outputTextarea" rows="8"></textarea>
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button"  id="copyResult">Copy Result</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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, onm ouseup, 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.

CodePudding user response：

Not an elegant solution but this does work.

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function() {
  let inputArr = document.querySelector('#inputTextarea').value.split('\n');
  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('\n')
    final.push(rowArr)
    number  
  }

  let finalText = final.join('\n\n')
  $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);
    }
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
  <div >
    <label for="inputTextarea">Paste bulk text bellow</label>
    <textarea  id="inputTextarea" rows="3"></textarea>
  </div>

  <!-- Button trigger modal -->
  <div >
    <button type="button"  data-toggle="modal" data-target="#modalTextarea" id="convert" disabled>
Convert
</button>
    <button type="button"  id="clearValue" disabled>Clear value</button>
  </div>
</div>

<!--Result area-->
<!-- Modal -->
<div  id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div  role="document">
    <div >
      <div >
        <h5 >Convert result</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
      </div>
      <div >
        <textarea  id="outputTextarea" rows="8"></textarea>
      </div>
      <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="button"  id="copyResult">Copy Result</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Its work fine now

let $btn = document.querySelector('#convert')
$btn.addEventListener('click', function () {
let inputArr = document.querySelector('#inputTextarea').value.split('\n');
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('\n')
final.push(rowArr)
number  
}

let finalText = final.join('\n\n')
$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);
}
});
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
<div >
<label for="inputTextarea">Paste bulk text bellow</label>
<textarea  id="inputTextarea" rows="3"></textarea>
</div>

<!-- Button trigger modal -->
<div >
<button type="button"  data-toggle="modal" data-target="#modalTextarea"
id="convert" disabled>
Convert
</button>
<button type="button"  id="clearValue" disabled>Clear value</button>
</div>
</div>

<!--Result area-->
<!-- Modal -->
<div  id="modalTextarea" tabindex="-1" role="dialog"
aria-labelledby="modalTitle" aria-hidden="true">
<div  role="document">
<div >
<div >
<h5 >Convert result</h5>
<button type="button"  data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div >
<textarea  id="outputTextarea" rows="8"></textarea>
</div>
<div >
<button type="button"  data-dismiss="modal">Close</button>
<button type="button"  id="copyResult">Copy Result</button>
</div>
</div>
</div>
</div>

CodePudding user response：

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();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <textarea>aaaa</textarea>
</div>

<div >
  <button >Clear</button>
</div>