CODEWITHSUNDEEP
javascriptjquery
Ajeet Khan
Ajeet Khan

Reputation: 9190

jquery function on textbox value change when checkboxes are checked

I have a text-area which is getting populated with the values of checkboxex being checked. I want to call a jquery function when the content of text-area is changed. I tried the following function but its working only when its content changes via key not due to checkbox value mapping.

$(document).ready(function(){
        $('#message_sent_to').on('propertychange change keyup paste input',function() {
            alert("hello");
        var limit = $('#promo_limit').val();
        alert("<%= @p_limit %>");
    });

The text-area is

<%= f.text_area :sent_to, :class => 'form-control'%>

There are two Checkboxes, one for mapping value of all checkbox and one for mapping individual checkbox value.

<%= check_box_tag "contact_no[]", staff.contact_no %>
<%= check_box_tag "contact_nos[]", @staff_members.map(&:contact_no).join(', ') %>

Note: The code for checkbox mapping is too long, so am not posting it here.

Upvotes: 1

Views: 431

Answers (2)

Nitesh Mishra
Nitesh Mishra

Reputation: 570

You can also do it by using javascript by checking the textbox value, i.e it is changed or not on the basis of some time.

var $message_sent_to = $("#message_sent_to");
$message_sent_to.data("value", $message_sent_to.val());
setInterval(function() {
var data = $message_sent_to.data("value"),
val = $message_sent_to.val();
if (data !== val) {
    $message_sent_to.data("value", val);
    alert("changed");
}
},100);

Upvotes: 2

guest271314
guest271314

Reputation: 1

Try utilizing .triggerHandler()

$(document).ready(function() {
  $("#message_sent_to").on("propertychange change keyup paste input", function() {
    alert("hello");
    // var limit = $('#promo_limit').val();
    alert("<%= @p_limit %>");
  });
  $("input").on("change", function(e) {
    $("#message_sent_to").val(function(_, val) {
      return val + e.target.value
    }).triggerHandler("input")
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="message_sent_to"></textarea>
<input type="checkbox" />
<input type="checkbox" />

Upvotes: 0

Related Questions