CODEWITHSUNDEEP
javascripthtml
Lucian Radu
Lucian Radu

Reputation: 105

Detect change from javascript

I have a text input which has its content changed via javascript. However, the onchange event doesn't seems to capture this change. Is there a way to detect when an input is changed via Javascript?

Upvotes: 2

Views: 1474

Answers (7)

Mark Giblin
Mark Giblin

Reputation: 1106

To answer the question... Using javascript (because jquery et al is not javascript, its programmed in javascript)

Object.addEventListener("change",yourFunc );

where Object is the object you want to listen to, this can be the document, an element, depending on what you want to detect.

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Actually, you can capture the changes that are occuring.

Try this: 

var something = ""; // create variable..
$('input').keyup(function () { // on a key up..
   something = $(this).val(); // update the variable..
}

Otherwise, you can simply use .replace(value, '') to remove the previous words and just write the newly written words in the variable.

To detect the change, you need to save the initial state, and then match it with the final state. To save the initial state you need to create a variable at the page load. And then after the time, you can compare both and remove the initial words and continue.

Upvotes: 0

Sully
Sully

Reputation: 14943

Use JQuery so that you can do 

$('element').on('input', function () {
   alert(this.value);
});

Otherwise, with JavaScript alone use onkeyup="alert(this.value);"

If it is for a datePicker, then you probably can use its onSelect event.

This answer adds an event for the plugin you specified in the comments Date Range Picker how to fire an event on entering a date

============================ Quote Start ================================

function myCallBack(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    alert('hello world'); //etc, your code here
}
// attach daterangepicker plugin
$('#dateRange').daterangepicker(options, myCallback);

you also could even define your own custom event handler and trigger it in the callback as well.

example 

$(document).on('myCustomEvent', function () {
    // your code here
});

$('#dateRange').daterangepicker({
// .. //
function(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    $(document).trigger('myCustomEvent');
});

============================ Quote End ================================

Upvotes: 3

Max Novich
Max Novich

Reputation: 1169

Forwarding to our conversation in comments.

Here is the Link to your DateRangePicker plugin On Github

There is a paragraph which expains the using on callbacks....

Quote From the Link

The constructor also takes an optional options object and callback function. The function will be called whenever the selected date range has been changed by the user, and is passed the start and end dates (moment date objects) as parameters.

$('input[name="daterange"]').daterangepicker(
  { 
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: '2013-12-31'
  },
  function(start, end) {
    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  }
);

Upvotes: 0

Jonathan
Jonathan

Reputation: 1833

Once you have changed the inputs value you can call onchange() on the input to trigger the onchange event

document.getElementById('myInput').onchange();

Upvotes: 0

brewster
brewster

Reputation: 4492

if you are using HTML5, you can use the input event

document.getElementById("textinput").addEventListener("input", function(e){});

Upvotes: 0

nikans
nikans

Reputation: 2555

If you want to track changes as you type, use onkeydown. If you need to trap paste operations with the mouse, use onpaste (IE, FF3) and oninput (FF, Opera, Chrome, Safari1).

Upvotes: 0

Related Questions