I a wrote an html code for a page, for which I'm trying to add a form in a specific place:
index.html This is just a part of the code !!!
<div>
<div>
<div class="inner">
<div class="tab">
<button class="tablinks" onclick="openFunctionality(event, 'function1')" id="defaultOpen"> function1 </button>
<button class="tablinks" onclick="openFunctionality(event, 'function2')"> function2</button>
<button class="tablinks" onclick="openFunctionality(event, 'fucntion3')"> function3 </button>
<button class="tablinks" onclick="openFunctionality(event, 'function4')">function4 </button>
</div>
<div id="function1" class="tabcontent">
<form id="myflag" method="POST" action="myflag">
<label class="switch" align="left">
<input type="checkbox" name="switch" onclick="document.forms['myflag'].submit();hideme(); ">
<span class="slider round"></span>
</form>
</label>
<p id="firstpart " align="middle"> some stuff </p>
<div align="middle" id="secondpart" class="tabcontent">
<form id="myform" method="POST" action="myform">
<p> </p>
</div>
<input type="submit" value="Submit" class="button" id="mySubmit">
</form>
</div>
</div>
</div>
in the script part. I have the following : script.js
..............................
/*Button functionality */
function openFunctionality(evt, funName) {
evt.preventDefault();
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(funName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function hideme() {
var x = document.getElementById("firstpart ");
var y = document.getElementById("secondpart");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display ="none"
} else {
x.style.display = "none";
y.style.display = "block";
}
}
..................................
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#mylfag').ajaxForm(function() {
alert("flag done is configured !");
});
...............................................................
The whole thing is running using NodeJS :
const express = require('express');
const multer = require('multer');
const app = express()
var path = require('path')
var fs = require('fs')
var os = require( 'os' );
var config_fileName = './public/scripts/config.json';
const router = express.Router();
var configFile = require(config_fileName);
app.use(express.static('public'))
app.use(express.urlencoded())
..........................
app.post('/myflag', (req, res)=>{
if( req.body.switch === "on"){
console.log(" on");
} else {
console.log("off")
}
console.log(configFile.Hardware.Network.Ethernet_1.DHCP )
});
.......................
app.listen(2005)
So my problem is that I don't get how may this part´:
<form id= "myflag" method="POST" action="myflag">
<label class="switch" align="left">
<input type="checkbox" name="switch" onclick="document.forms['myflag'].submit();hideme(); ">
<span class="slider round"></span>
</form>
runs properly, meaning running the hideME() function, and sending a post request to the serve, while stop the reload of the page !! .
PS: The whole thing was running before adding the mentioned form !
Thanks in advance!
Update
when the switch/checkbox get activate the post request is send but the page start reloading !
