CODEWITHSUNDEEP
javascripthtmljquery
Maruli Davin
Maruli Davin

Reputation: 83

How to make button disable if textarea is empty

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 class="container m-4">
  <div class="form-group inputTextarea">
    <label for="inputTextarea">Paste bulk text bellow</label>
    <textarea class="form-control" id="inputTextarea" rows="3"></textarea>
  </div>

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

<!--Result area-->
<!-- Modal -->
<div class="modal fade" id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Convert result</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
      </div>
      <div class="modal-body">
        <textarea class="form-control" id="outputTextarea" rows="8"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="copyResult">Copy Result</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 810

Answers (6)

epascarello
epascarello

Reputation: 207557

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>

Upvotes: 3

imvain2
imvain2

Reputation: 15867

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 class="inputTextarea">
  <textarea>aaaa</textarea>
</div>

<div class="actionTextarea">
  <button class="btn-clear">Clear</button>
</div>

Upvotes: 1

Mina
Mina

Reputation: 17604

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 class="container m-4">
  <div class="form-group inputTextarea">
    <label for="inputTextarea">Paste bulk text bellow</label>
    <textarea class="form-control" id="inputTextarea" rows="3"></textarea>
  </div>

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

<!--Result area-->
<!-- Modal -->
<div class="modal fade" id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Convert result</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
      </div>
      <div class="modal-body">
        <textarea class="form-control" id="outputTextarea" rows="8"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="copyResult">Copy Result</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Naeem Asghar
Naeem Asghar

Reputation: 66

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 class="container m-4">
<div class="form-group inputTextarea">
<label for="inputTextarea">Paste bulk text bellow</label>
<textarea class="form-control" id="inputTextarea" rows="3"></textarea>
</div>

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

<!--Result area-->
<!-- Modal -->
<div class="modal fade" id="modalTextarea" tabindex="-1" role="dialog"
aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Convert result</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<textarea class="form-control" id="outputTextarea" rows="8"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="copyResult">Copy Result</button>
</div>
</div>
</div>
</div>

Upvotes: 1

ashen madusanka
ashen madusanka

Reputation: 742

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 class="container m-4">
  <div class="form-group inputTextarea">
    <label for="inputTextarea">Paste bulk text bellow</label>
    <textarea class="form-control" id="inputTextarea" rows="3"></textarea>
  </div>

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

<!--Result area-->
<!-- Modal -->
<div class="modal fade" id="modalTextarea" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Convert result</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
      </div>
      <div class="modal-body">
        <textarea class="form-control" id="outputTextarea" rows="8"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="copyResult">Copy Result</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Kevin
Kevin

Reputation: 314

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.

Upvotes: 1

Related Questions