Evaluating a check box position using nodejs

Question

I need to check the position of a toggle switch using nodejs. here an example of what I'm trying to do :

**index.html ** based on W3Schools:

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>


<label class="switch">
  <form id= "test" method="POST" action="test">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>
</form>

</body>
</html>

and the node app :

app.js

    const express = require('express');
const app  = express()
var path = require('path')


console.log(__dirname)

app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'))
})


app.post('/test', (req, res)=>{
    console.log("toggele active ")
  });
app.listen(3000)

So the my question is how can I found out or even set the position of this slider using nodejs ! Thanks in advance!

score 1 · Accepted Answer · answered Sep 15 '19 at 10:49

Your problem is that you don't have a submit call for your form, you can add an onClick attribute to your input to your checkbox input to submit the form :

<input type="checkbox"
   name='switch'
   onClick="document.forms['test'].submit();"
   checked>

note: don't forget to give your input a name to determine the checkbox state in the backend (node.js)

score 1 · Answer 2 · answered Sep 15 '19 at 11:24

So If I understood your question correctly, you have some class that you want to get/set its properties both ways. If so, I propose using data attributes in HTML, you would set them in nodejs by replacing in file (since you use raw html), and you would get them and return to node via js in DOM.

Then I would set parameters in node by writing raw in html file this way: (<div class="whatever" data-somewhat-position='-POSITION WHATEVER-'>) and replacing it like this:

let newPosition = // new position here
fs.readFile('file.html',(err,data)=>{String(data).replace('-POSITION WHATEVER-',newPosition)) }

This will render html with set data, which you can extract in DOM and operate it (i.e. make changes to styling of the class).

How to extract data, was answered here: get data attributes in JavaScript code

So you extract the data, serialize it in form and voila you get it in NODE.

Of course this maybe not the most efficient, but I hope you get the idea.

Evaluating a check box position using nodejs

2 Answers2