Question 14991 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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.");
    }
});
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search