Click here to Skip to main content
15,921,028 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I have this HTML code:

<label class="checkbox" for="myCheckboxId">
          <input class="checkbox__input" type="checkbox" name="myCheckboxName" id="myCheckboxId">
          <div class="checkbox__box"></div>
        </label>
      </div>

How can I use this element as a variable in a JS code, for example if I want to get this data displayed in a table?

Thank you!

What I have tried:

Tried with selectors - can't visualize the checkbox well
Tried with fetch API
Posted
Updated 3-Jul-22 8:51am
v3

1 solution

I'm not sure what you mean by "element as a variable", but what you can do is us common JS document methods to select elements in the HTML structure. In the example above, if you wanted to get the checkbox, you can see it has id="myCheckboxId" which allows JS to identify it as a unique element on the screen. So you can select it via:
const checkbox = document.getElementById('myCheckboxId');
const isChecked = checkbox.checked;

Document.getElementById() - Web APIs | MDN[^]
Document.getElementsByClassName() - Web APIs | MDN[^]
Document.querySelector() - Web APIs | MDN[^]
 
Share this answer
 
v2
Comments
JackF007 29-Jun-22 8:21am    
Imagine that I have this in my index.html file and I need to use it in node.js server (index.js) or app.js. Im my software the server send a GET request to the client app.js to take some data and compose a table.
when I use document.getElementbyId or server side I got a ReferenceError (document is not defined). I understand why this error, but then if I try the same on client (app.js), my checkbox is not defined on server side. How I could make all these "pieces" working togheter with this checkbox element?
Chris Copeland 29-Jun-22 8:30am    
The server-side cannot interact with elements rendered on the client-side, these are two very different entities. As you said, you're performing a GET request and populating a table, presumably it's when the table is populated that the checkboxes are created. If you want to interact with the checkboxes (ie. perform some action on the server when a checkbox is checked) you need to register event listeners on the client-side, and then perform additional GET/POST requests (or use WebSockets) to communicate with the server-side to tell it what to do.

Remember, you'll need to register the event listeners only after the table has been populated. How that happens is down to your code (which we can't see in this question).
JackF007 3-Jul-22 14:50pm    
The checkbox elements are created on the client side, but the table is populated in express server-side.
Client :

const checkbox = document.createElement("checkbox");
checkbox.classList.add("table-refresh__checkbox");
checkbox.innerHTML = `




`;


I would need to populated the table and the checkbox it should go in one column, the latest. Below the example from the server side, which get returned some data "directy" and one of them is the checkbox variable, which should contains the HTML element. Don't know if I explained well... but how I can request this element from the client to the server, for example using fetch API.

const data ={
headers: ["TipoDoc.","DataDoc.","Importo","CedentePrestatore","CessionarioCommittente"," "],
rows: new Array(i).fill(undefined).map(()=>{

x++;

return [dati[x][0],dati[x][1],dati[x][2],dati[x][3],dati[x][4],checkbox]

})
};
Chris Copeland 4-Jul-22 4:43am    
I think this depends on how you're rendering the content into a table. I don't have much experience with running a Node.js server so I'm unsure of it's capabilities but I would have thought you'd need to create the checkbox element on the client-side. Surely the purpose of the server is to provide a sort of REST service (which means basic JSON in/out), and the client-side should be building the table and the components within it. If you make the client-side do the work of creating the table, then you should have somewhere in that piece of code which creates the checkbox to which you can bind the event listener.

Alternatively if the client-side JS is happy to render the checkbox returned from the server-side, then you need to add a post-rendering event listener to handle that.
JackF007 4-Jul-22 5:36am    
Thanks for your support, the problem is always the same. Everything is well now on the client-side, the checkbox is created,functional but I always need to pass it to my backend, maybe with a fetch API or something similar.... the problem is that I always need the checkbox also on the server side. How could I add an event listener without influencing the user experience...which one? And then even after that how I got the checkbox element in the backeend?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900