CODEWITHSUNDEEP
javascripthtmljquery
Utsav Upadhyay
Utsav Upadhyay

Reputation: 475

How to give alert when user clicked on disabled input field?

I have two input fields i.e. VimeoLink and YTLink, I am trying to disable YTLink until and unless the VimeoLink input field is empty, and if the user clicked on the disabled YTLink input field an alert needs to be shown, but an alert is not working!

I have tried several solutions for alerts like -

$("YTLink").click(function (evt) {
  console.log('disabled input clicked!');
});​


//for disabling input on first
$(document).ready(function() {
  document.getElementById('YTLink').disabled = true;
});
checking
if vimeolink input is empty or not
$('input[name=vimeoLink]').change(function() {
  if (document.getElementById('vimeoLink').value !== '') {
    document.getElementById('YTLink').disabled = false;
  } else {
    document.getElementById('YTLink').disabled = true;
  }
});
//alert on click YTLink input
var container = document.querySelector('#YTLink');

container.addEventListener('click', function() {
  console.log('disabled input clicked!');
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group last mb-3">
  <label for="name">VimeoLink</label>
  <input type="text" class="form-control" placeholder="" name="vimeoLink" id="vimeoLink">
</div>

<div class="form-group last mb-3">
  <label for="name">YTLink</label>
  <input type="text" class="form-control formcheck" placeholder="" name="YTLink" id="YTLink">
</div>

Upvotes: 1

Views: 503

Answers (2)

Mayanglambam Yaiphaba
Mayanglambam Yaiphaba

Reputation: 61

Since disabled control elements can't have events bound to them, you'd need to bind an event to an ancestor element and make a check to see whether the target was the input.

You can then go on to check if it's disabled, and if so, show your alert:

$(document).on('click',function(e){
    if(e.target.id == "Travellerpaymentinfo_cc_number" && e.target.disabled){
       alert("The textbox is clicked.");
    }
});

Upvotes: 1

4b0
4b0

Reputation: 22323

Ans is NO. Disabled inputs don't fire click event. Solution is wrap your input with div, and fire click on that div using class or ID.

Example:

//for disabling input on first
$(document).ready(function() {
  document.getElementById('YTLink').disabled = true;
});
//checking
//if vimeolink input is empty or not
$('input[name=vimeoLink]').change(function() {
  if (document.getElementById('vimeoLink').value !== '') {
    document.getElementById('YTLink').disabled = false;
  } else {
    document.getElementById('YTLink').disabled = true;
  }
});
//alert on click YTLink input
var container = document.getElementById('tempdisable');

container.addEventListener('click', function(event) {
  var inp = document.getElementById('YTLink');
  if (inp.disabled) {
    console.log('disabled input clicked!');
  }
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group last mb-3">
  <label for="name">VimeoLink</label>
  <input type="text" class="form-control" placeholder="" name="vimeoLink" id="vimeoLink">
</div>

<div class="form-group last mb-3">
  <label for="name">YTLink</label>
  <div id="tempdisable">
    <input type="text" class="form-control formcheck" placeholder="" name="YTLink" id="YTLink">
  </div>
</div>

Upvotes: 1

Related Questions