CODEWITHSUNDEEP
javascriptjqueryhtml
Blues Clues
Blues Clues

Reputation: 1848

readonly on change in jquery

I want to fire an on change event for a read-only input in jquery and then append some HTML code below it. So basically, whenever the read-only input changes, HTML code should be appended.

Please see my code below.

$(function(){


	$(document).on('click', 'button', function(){
  
  	$('#holder').val($('#getter').val());
  
  });
  
  // This part
 	$('#holder').on('change', function(){
  
  	$('.here').append("<p>Inputted</p>");
  
  });


});
input[readonly=""]{
  
  background: #ccc;
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<br><br>

<input type="text" id="holder" readonly="">

<input type="text" id="getter">

<button>Go</button>

<br>
<br>

<div class="here"></div>

Upvotes: 1

Views: 69

Answers (2)

Ivan
Ivan

Reputation: 433

this should be what you looking for it can be done with one event only

$(function(){

  $(document).on('click', 'button', function(){
  
  $('#holder').val($('#getter').val());
  
  $('.here').append("<p>Inputted</p>");
  
  });
  
});
input[readonly=""]{
  
  background: #ccc;
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<br><br>

<input type="text" id="holder" readonly="">

<input type="text" id="getter">

<button>Go</button>

<br>
<br>

<div class="here"></div>

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can add .trigger("change") to $('#holder').val($('#getter').val()); then it will work;

Demo

$(function() {
  $(document).on('click', 'button', function() {
    $('#holder').val($('#getter').val()).trigger("change");
  });
  $('#holder').on('change', function() {
    $('.here').append("<p>Inputted</p>");
  });
});
input[readonly=""] {
  background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<br><br>

<input type="text" id="holder" readonly="">

<input type="text" id="getter">

<button>Go</button>

<br>
<br>

<div class="here"></div>

Upvotes: 1

Related Questions