0

I have created a form, inside the form for various form elements I have divs, and inside the div it has input or select element. I want to select the select/input elements without class name or ID.

<div class="ui-form-element section-row" id="uid-0">
  <div class="ui-from-title">
    <span class="ui-form-title-text" style="display: inline;">
      Data plotting method
    </span>
  </div>
  <select id="select-uid-0">
    <option value="0">Heat Map</option>
    <option value="1">Box Plot</option>
    <option value="2">Scatter Plot</option>
    <option value="3">Word Cloud</option>
  </select>
</div>

How to do it?

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
jax
  • 3,927
  • 7
  • 41
  • 70
  • 1
    `I want to select the select/input elements without class name or ID`...why, exactly? This seems like a great way to make life difficult for yourself. You can try selecting the div instead and then looking for an input or select which is a child of it, if you really want a workaround. But I am getting the slight whiff of an XY problem...it would help if you could explain the reason for this requirement and how you think it will help you. – ADyson Aug 11 '21 at 15:32
  • 2
    but, your divs and select DO have class and or id ... so why not use it – Bravo Aug 11 '21 at 15:34
  • 1
    In a form all `select/input elements` must have a **name** => this name is used to retrieve information to server. this name is also useful to access any element in JS – Mister Jojo Aug 11 '21 at 15:35
  • @ADyson Bravo Mister Jojo thanks for all your comments. I'm very new to Javascript and trying to learn. I am trying your suggestions and will update if it works thanks. – jax Aug 11 '21 at 15:40
  • 1
    at what point of the lifecycle of the page do you need to select these DIV elements? When some form input changes value, when the user hovers the mouse over the form, or other more nebulous event? – Professor Abronsius Aug 11 '21 at 15:41

1 Answers1

1

You could select elements like this but t is highly not recomended.

const input = document.querySelector("body > div > input");
const select = document.querySelector("body > div > select");


console.log(input, select);
<div>
  <div>
    <span>
      Data plotting method
    </span>
  </div>
  <select id="select-uid-0">
    <option value="0">Heat Map</option>
    <option value="1">Box Plot</option>
    <option value="2">Scatter Plot</option>
    <option value="3">Word Cloud</option>
  </select>
  <input />
</div>
Dibash Sapkota
  • 617
  • 5
  • 8
  • Basing answers on the DOM of an example is unlikely to work out well. The OP rarely includes their entire HTML structure. Also, the original example has both classes and ids so the question needs clarification before answers. Finally, the question of how to select elements without classes or ids has been asked and answered many times on Stack Overflow. A cursory search on the topic finds them easily ([e.g.](https://stackoverflow.com/q/23915504/215552), [and](https://stackoverflow.com/q/40443966/215552)) – Heretic Monkey Aug 11 '21 at 16:21