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

Question

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>

developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — Phix
– Phix, Commented Nov 3, 2021 at 17:21

Nitheesh · Accepted Answer · 2021-11-03 17:29:58Z

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>

answered Nov 3, 2021 at 17:29

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dozenblu Over a year ago

Hi! Thank you this worked for inputing text. I now have a new problem tho. The input field is used to type in an email recipient. When I change the value of the field the recipient I chose does not get registered. The site does not recognize that any email has been input even though I can see the email in the text field. When I type an email manually a new code snipet gets generated. <li class="recipient"> <span class="name">[email protected]</span> <span class="email">,</span> <a class="button icon remove"></a> </li>

Ankan Bag · Accepted Answer · 2021-11-03 17:25:28Z

0

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>

answered Nov 3, 2021 at 17:25

Ankan Bag

915 bronze badges

Comments

Dimitri Kopriwa · Accepted Answer · 2021-11-03 17:28:19Z

0

<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>

edited Nov 3, 2021 at 17:28

answered Nov 3, 2021 at 17:26

Dimitri Kopriwa

14.7k35 gold badges119 silver badges235 bronze badges

1 Comment

Unmitigated Over a year ago

const {name} = document.forms['my-form']; suffices.

fatih · Accepted Answer · 2021-11-03 18:12:24Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related