Can’t find a way to access input field with Javascript

I’m trying to find a way to change the value of the input field
below using javascript. The problem is that I can’t find any
id or name of the input field and thus, not sure how to access it.

I have used document.getElementById to access other fields to change
their value but since this input field does not have an Id I’m not sure
how to approach it. The code below is not my own and thus I can’t simply
add an id. Any ideas on how to solve the problem?

<ul class="form-control recipient-input ac-input rounded-left">
 <li class="input">
  <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false">
 </li>
</ul>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use document.querySelector for targetting the same element with different attributes. You can even use a list of attributes aswell

const node1 = document.querySelector('input[type="text"]');
console.log(node1);
const node2 = document.querySelector('input[tabindex="1"]');
console.log(node2);
const node3 = document.querySelector('input[autocomplete="off"]');
console.log(node3);
const node4 = document.querySelector('input[aria-autocomplete="list"]');
console.log(node4);
const node5 = document.querySelector('input[aria-expanded="false"]');
console.log(node5);
const node6 = document.querySelector('input[role="combobox"]');
console.log(node6);
const node7 = document.querySelector('input[aria-haspopup="false"]');
console.log(node7);
const node8 = document.querySelector('input[type="text"][tabindex="1"][autocomplete="off"][aria-autocomplete="list"][aria-expanded="false"][role="combobox"][aria-haspopup="false"]');
console.log(node8);
<ul class="form-control recipient-input ac-input rounded-left">
  <li class="input">
    <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria-expanded="false" role="combobox" aria-haspopup="false">
  </li>
</ul>

Method 2

const el = document.querySelector('input[type=text]');
console.log(el)
<ul class="form-control recipient-input ac-input rounded-left">
 <li class="input">
  <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false">
 </li>
</ul>

Method 3

<input /> elements should always be enclosed within a <form />.

By giving a name to your <form name="my-form"><input name="firstName" /></form>, it become easy to access any fields of the form without having to use fixed id in your HTML and make those <form /> reusable anywhere in your view.

window.onload = bindEvents

function bindEvents() {
  const { name } = document.forms['my-form']
  name.addEventListener('keypress', onChangeName, true)
}

function onChangeName(event) {
  console.log(event.target.value)
}
<form name="my-form">
  <ul>
   <li>
    <label for="name">Name</label>
    <input name="name" />
   </li>
  </ul>
</form>

Method 4

I think “document.querySelector” is enough to do that job. Below code might be useful.

document.addEventListener("DOMContentLoaded", function() {
    var elm = document.querySelector('.recipient-input input');
    // Get the full DOM object of input element 
    console.log(elm);    
    
    // Get input value
    var val = elm.value;
    console.log(val);
    
    // Get any attribute
    var attr  = elm.getAttribute("role");
    console.log(attr);
    
    // Set input value
    elm.value = "This is a form element";
    console.log(elm.value);
    
    // Change any attribute
    elm.setAttribute("role", "primary");
    console.log(elm.getAttribute("role")); 
});
<ul class="form-control recipient-input ac-input rounded-left">
 <li class="input">
  <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false">
 </li>
</ul>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x