Adding text to input box with jquery

Question

I have an element on the page that looks like:

<textarea id="note-content" rows="4"></textarea>

when I try to write some jQuery to add some text to it:

$('#note-content').val('hi')

The button to "submit" the value is still greyed out.

I've tried

function setKeywordText(text) {
    var el = document.getElementById("note-content");
    el.value = text;
    var evt = document.createEvent("Events");
    evt.initEvent("change", true, true);
    el.dispatchEvent(evt);
}

setKeywordText("test")

as a way to "simulate" sending keystrokes to the browser, but that doesn't seem to work either.

any thoughts?

Answer 1

You can do that by javascript

<script>
function changetext(){
document.getElementById("note-content").value = "hi";
}
<script>

It should def. work. Plus what exactly did you mean by browser simulation? Am i missing something?

Answer 2

It appears this problem is occurring because your button is disabled .

To solve this you'd remove the disabled attribute using jQuery.fn.removeAttr , like this:

$("#button-id").removeAttr("disabled");

Add this solution it to your vanilla JavaScript code, like this:

function setKeywordText(text) {
  // disable button
  var btn = document.getElementById("button-id");
  btn.disabled = false;
  // set input value
  var el = document.getElementById("note-content");
  el.value = text;
  // create and dispatch the event
  var evt = document.createEvent("Events");
  evt.initEvent("change", true, true);
  el.dispatchEvent(evt);
}

// run the function
setKeywordText("test");

Good luck.