Post Range Slider values to MySQLI using PHP

Question

I have spent a day trying to figure out how to take four range slider values and post them to my database table. I was successful in creating a version where I save the values to a text file, but it works better for me to save the values to my database.

What I have so far:

post.php

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>In The Mood?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<script>
   $(document).ready(function() {
    $("#b1").click(function(event){
$.post( "postck.php", {"t1":$('#t1').val(),"t2":$('#t2').val(),"t3":$('#t3').val(),"t4":$('#t4').val()});
        });
   });

</script>

<div id="stress">
<label for="stress">Stress</label>
<div id="sliders1">
<label class="range1" for="r1"></label><input id="range1" type="range" min="0" max="100"/>
<output for="fader" id="t1" name=t1>50</output>


<div id="desire">
<label for="desire">Desire</label>
<div id="sliders2">
<label class="range2" for="range2"></label><input id="range2" type="range" min="0" max="100"/>
<output for="fader" id="t2" name=t2>50</output>


<div id="energy">
<label for="energy">Energy</label>
<div id="sliders3">
<label class="range3" for="range3"></label><input id="range3" type="range" min="0" max="100"/>
<output for="fader" id="t3" name=t3>50</output>


<div id="affection">
<label for="affection">Affection</label>    
<div id="sliders4">
<label class="range4" for="range4"></label><input id="range4" type="range" min="0" max="100"/>
<output for="fader" id="t4" name=t4>50</output>

<div id="submit">
<input type="button" id="b1" value="Submit">

<script>
  document.querySelector("#sliders1","#sliders2","#sliders3","#sliders4").addEventListener("change", function(e) {
  var cur = event.target;

  document.querySelector("#t1").textContent = document.querySelector("#range1").value * 1
  document.querySelector("#t2").textContent = document.querySelector("#range2").value * 1
  document.querySelector("#t3").textContent = document.querySelector("#range3").value * 1
  document.querySelector("#t4").textContent = document.querySelector("#range4").value * 1

})
</script>
</div>
</body>
</html>

And this is my PHP code to save values to the .txt file:

<?php
  $t1 = $_POST['t1'];
  $t2 = $_POST['t2'];
  $t3 = $_POST['t3'];
  $t4 = $_POST['t4'];
  $str = "$t1 $t2 $t3 $t4";
  echo $str;

  $body_content = $str; // Store some text to enter inside the file
  $file_name = "test_file.txt"; // file name
  $fp = fopen ($file_name, "w"); // Open the file in write mode, if file does not exist then it will be created.
fwrite ($fp,$body_content); // entering data to the file
fclose ($fp); // closing the file pointer
chmod($file_name,0777); // changing the file permission.
?>

I've tried this PHP code to post the values to MySql database, and it's not working. My table is all setup already; I just need to get the slider values on my table now.

Code that didn't work for me:

<?php
  $link = mysqli_connect('localhost','user','pass','my_db');

  if (isset($_POST['submitattr'])) {
   $t1 = $_POST['stress'];
   $t2 = $_POST['desire'];
   $t3 = $_POST['energy'];
   $t4 = $_POST['affection'];

   $sql = "INSERT INTO lisa (stress,desire,energy,affection) VALUES('$t1','$t2','$t3','$t4')";

    $query = mysqli_query($link, $sql);
    if (!$query) {
      echo "Couldn't enter data";
    } else {
      echo "Data entered";
    }
  }

Any help would be greatly appreciated!

Where are you posting this? `if(isset($_POST['submitattr'])){` Also be careful of SQL injection. You must sanitize those values before inserting them into a database. — Mike, Jul 19 '17 at 23:00

score 0 · Answer 1 · answered Jul 19 '17 at 23:13

Your $_POST values in your php file do not match what you are posting. It looks like you are posting t1, t2, t3 in your JavaScript ... but you are looking for $_POST['stress'], $_POST['desire'], etc in your PHP file. Also cannot find where you send submitattr. Also be careful of SQL injection!

Try this:

<?php

 $link = mysqli_connect('localhost','user','pass','my_db');


 if (isset($_POST['submit']) {

     $t1 = mysqli_real_escape_string($link, $_POST['t1']);
     $t2 = mysqli_real_escape_string($link, $_POST['t2']);
     $t3 = mysqli_real_escape_string($link, $_POST['t3']);
     $t4 = mysqli_real_escape_string($link, $_POST['t4']);

     $sql = "INSERT INTO lisa (stress,desire,energy,affection) 
        VALUES('$t1','$t2','$t3','$t4')";

     $query = mysqli_query($link, $sql);

     if (!$query) {
        echo "Couldn't enter data";
     } else {
        echo "Data entered";
     }
  }
?>

Also add this to your HTML submit button:

<input type="button" id="b1" name="Submit" value="Submit">

And add this to your Ajax call

$(document).ready(function() {
  $("#b1").click(function(event){
    $.post( "postck.php",

{"t1":$('#t1').val(), "t2":$('#t2').val(),"t3":$('#t3').val(),"t4":$('#t4').val(), "Submit":'Submit'});
    });

});

Post Range Slider values to MySQLI using PHP

1 Answers1