The code in the JsFiddler below works when I get the element by ID, but when I try to get it by placeholder (because there is no ID in the input I'm trying to interact with) The code won't work. My tries are below:

var el = $("[placeholder='Select Country']");
var el = $("input:placeholder(Select Country)");
var el = $("input").attr("placeholder","Select Country");
var el = document.querySelectorAll('[placeholder="Select Country"]');

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

setKeywordText("test");

<input type="text" placeholder = "Select Country" id ="gwt-debug-keywords-text-area" />

The code in the JsFiddler below works when I get the element by ID, but when I try to get it by placeholder (because there is no ID in the input I'm trying to interact with) The code won't work. My tries are below:

var el = $("[placeholder='Select Country']");
var el = $("input:placeholder(Select Country)");
var el = $("input").attr("placeholder","Select Country");
var el = document.querySelectorAll('[placeholder="Select Country"]');

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

setKeywordText("test");

<input type="text" placeholder = "Select Country" id ="gwt-debug-keywords-text-area" />

Thank you,

• javascript
• jquery

• 3 Use this document.querySelector('[placeholder="Select Country"]') – Ele Commented Oct 9, 2018 at 0:07
• 1 In your examples, you get a JQuery object back, not a HMTLElement. To get an element from a JQuery object, add: [0] – Poul Bak Commented Oct 9, 2018 at 0:17

1 Answer 1

var el = $('*[placeholder="Select Country"]');

You may have to reference the input as:

el[0]