Detect All Changes to a ≪Input Type="Text"≫ (Immediately) Using Jquery

Detecting value change of input[type=text] in jQuery

Update - 2021

As of 2021 you can use input event for all the events catering input value changes.

$("#myTextBox").on("input", function() {
   alert($(this).val()); 
});

Original Answer

just remember that 'on' is recommended over the 'bind' function, so always try to use a event listener like this:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});

Detect all changes to a input type=text (immediately) using JQuery

Unfortunately, I think setInterval wins the prize:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

It's the cleanest solution, at only 1 line of code. It's also the most robust, since you don't have to worry about all the different events/ways an input can get a value.

The downsides of using 'setInterval' don't seem to apply in this case:

The 100ms latency? For many applications, 100ms is fast enough.
Added load on the browser? In general, adding lots of heavy-weight setIntervals on your page is bad. But in this particular case, the added page load is undetectable.
It doesn't scale to many inputs? Most pages don't have more than a handful of inputs, which you can sniff all in the same setInterval.

Displaying all changes to a input type=“text” (immediately) using JQuery

You are over complicating things. Here is simple JS to the job.

Div element takes no value parameter, it takes inerHTML, and texatera and input takes value.

document.querySelector('#input').addEventListener('keyup', val, false);

function val() {
[...document.querySelectorAll('.result')].forEach(el => { 
  el.value=this.value;
  el.innerHTML=this.value;
  })
}

JS EXAMPLE:

document.querySelector('#input').addEventListener('keyup', val, false);

function val() {
[...document.querySelectorAll('.result')].forEach(el => { 
  el.value=this.value;
  el.innerHTML=this.value;
  })
}

input[type=text],
select,
textarea {
  display: block;
  width: 27em;
  margin-top: 4em;
  height: 34px;
  font-size: 1.2em;
  font-family: "sans-serif";
  border: 2px solid #000;
  padding: 2px 10px;
  font-family: arial;
  font-size: 18px;
}

.result {
  margin-top: 20px;
  width: 20em;
  height: 5em;
  float: left;
  font-family: arial;
  font-size: 18px;
  background: #333;
  color: #fff;
  margin-right: 1em;
  padding: 10px;
}

<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>

<textarea class="result"></textarea>
<input type="text" class="result" />

change type of input field with jQuery

It's very likely this action is prevented as part of the browser's security model.

Edit: indeed, testing right now in Safari, I get the error type property cannot be changed.

Edit 2: that seems to be an error straight out of jQuery. Using the following straight DOM code works just fine:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Edit 3: Straight from the jQuery source, this seems to be related to IE (and could either be a bug or part of their security model, but jQuery isn't specific):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

JQuery: detect change in input field

You can bind the 'input' event to the textbox. This would fire every time the input changes, so when you paste something (even with right click), delete and type anything.

$('#myTextbox').on('input', function() {
    // do something
});

If you use the change handler, this will only fire after the user deselects the input box, which may not be what you want.

There is an example of both here: http://jsfiddle.net/6bSX6/

Editing, updating and canceling of table cell text not working using jQuery

You need to use delegated event handlers as you're dynamically creating and removing the buttons.

In addition your logic is not quite right. You need to update the data attributes on the tr when the 'update' button is clicked, not the 'cancel'.

The logic can also be improved by caching your selectors in variables instead of recreating them for each method call. In addition you can use closest() instead of parents() to get the nearest parent tr element, data() instead of attr() to read data attributes and also children() instead of find() to get the child td.

With that said, try this:

$(document).on('click', '.btn-edit', function(e) {
  let $tr = $(this).hide().closest('tr');
  $tr.children("td:eq(0)").html(`<input name="edit_name" value="${$tr.data('name')}">`);
  $tr.children("td:eq(1)").html(`<input name="edit_email" value="${$tr.data('email')}">`);
  $tr.children("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")
});

$(document).on('click', '.btn-update', function(e) {
  let $tr = $(this).closest('tr');
  let name = $tr.find('[name="edit_name"]').val();
  let email = $tr.find('[name="edit_email"]').val();
  $tr.data({ name, email });
  $tr.children("td:eq(0)").text(name);
  $tr.children("td:eq(1)").text(email);
  $tr.find(".btn-edit").show();
  $tr.find(".btn-update, .btn-cancel").remove();
});

$(document).on('click', '.btn-cancel', function(e) {
  let $tr = $(this).closest('tr');
  $tr.children("td:eq(0)").text($tr.data('name'));
  $tr.children("td:eq(1)").text($tr.data('email'));  
  $tr.find(".btn-edit").show();
  $tr.find(".btn-update, .btn-cancel").remove();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<div class="container">
  <table class="table table-bordered ">
    <thead>
      <th>Name</th>
      <th>Email</th>
      <th width="200px">Action</th>
    </thead>
    <tbody>
      <tr data-name='marzouk najib' data-email='marzouk@gmail.com'>
        <td>marzouk najib</td>
        <td>marzouk@gmail.com</td>
        <td><button class='btn btn-info btn-xs btn-edit'>Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>

How to set selected value of jQuery Select2?

To dynamically set the "selected" value of a Select2 component:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Where the second parameter is an object with expected values.

UPDATE:

This does work, just wanted to note that in the new select2, "a_key" is "text" in a standard select2 object. so: {id: 100, text: 'Lorem Ipsum'}

Example:

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

Thanks to @NoobishPro

Detect changed input text box

You can use the input Javascript event in jQuery like this:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

In pure JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Or like this:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

Get the value of input text when enter key pressed

Try this:

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>  
<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

JS Code

function search(ele) {
    if(event.key === 'Enter') {
        alert(ele.value);        
    }
}

DEMO Link