I'm trying to store the values in the HTML page into the database I have created, the databse has 6 columns for each slider. The columns are: value1, value2, value3, value4, value5, and value6. Also, I want to connect the database with PHP. The buttons in the HTML page does nothing, and I couldn't figure out how to make them functional.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
</style>
<title>Multiple sliders</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- Heading -->
<h1> Multiple sliders </h1>
<form action = "details_entry.php" method="POST">
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p> <label> Slider 1</label>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" id="myRange2">
<p>Value: <span id="demo2"></span></p> <label> Slider 2</label>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" id="myRange3">
<p>Value: <span id="demo3"></span></p> <label> Slider 3</label>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" id="myRange4">
<p>Value: <span id="demo4"></span></p> <label> Slider 4</label>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" id="myRange5">
<p>Value: <span id="demo5"></span></p> <label>Slider 5</label>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="360" value="180" class="slider" id="myRange6">
<p>Value: <span id="demo6"></span></p> <label> Slider 6</label>
</div>
<div class="wrapper">
<button class="button" >Save</button>
</div>
<div class="button10" >
<button class="button1" >On/Off</button>
</div>
<script>
var slider1 = document.getElementById("myRange");
var demo = document.getElementById("demo");
demo.innerHTML = slider1.value;
slider1.oninput = function() {
demo.innerHTML = this.value;
}
</script>
<script>
var slider2 = document.getElementById("myRange2");
var output = document.getElementById("demo2");
output.innerHTML = slider2.value;
slider2.oninput = function() {
output.innerHTML = this.value;
}
</script>
<script>
var slider3 = document.getElementById("myRange3");
var output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;
slider3.oninput = function() {
output3.innerHTML = this.value;
}
</script>
<script>
var slider4 = document.getElementById("myRange4");
var demo4 = document.getElementById("demo4");
demo4.innerHTML = slider4.value;
slider4.oninput = function() {
demo4.innerHTML = this.value;
}
</script>
<script>
var slider5 = document.getElementById("myRange5");
var output5 = document.getElementById("demo5");
output5.innerHTML = slider5.value;
slider5.oninput = function() {
output5.innerHTML = this.value;
}
</script>
<script>
var slider6 = document.getElementById("myRange6");
var output6 = document.getElementById("demo6");
output6.innerHTML = slider6.value;
slider6.oninput = function() {
output6.innerHTML = this.value;
}
</script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: #000;
font-family: "Roboto", sans-serif;
background: linear-gradient(180deg, #db302a 0%, #62186b 100%) no-repeat;
}
.slidecontainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slider {
margin-top: 4vh;
/*moves the slider up or below */
}
label{
text-align: right;
text-indent: 250px;
text-align-last: right;
line-height: -200px;
margin-top: -17px;
margin-left: -10px;
font-size: 20px;
}
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 60%;
left:52%;
font-size: 20px;
}
.button10 {
text-align: center;
}
.button1 {
position: absolute;
top: 60%;
left:47%;
font-size: 20px;
}
PHP
<?php
$username='root';
$password= '';
$conn = new mysqli('localhost','root','','robot_arm_values');
if($conn->connect_error){
die('connection Failed:'.$conn->connection_error);
}
else{
$stmt = $conn->prepare("insert into robot_arm_values(value1,value2,value3,value4,value5,value6) values(?,?,?,?,?,?)");
$stmt->bind_param("iiiiii",$value1,$value2,$value3,$value4,$value5,$value6);
$stmt->execute();
echo "Values have been modified successfully!";
$stmt->close();
$conn->close();
}
?>
