2017-07-19 58 views
0

我花了一天的時間試圖弄清楚如何獲取四個範圍滑塊值並將它們發佈到我的數據庫表中。我成功地創建了一個將值保存到文本文件的版本,但對於將值保存到我的數據庫中,它的效果更好。Post Range Slider值到MySQLI使用PHP

我到目前爲止有:

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> 

,這是我的PHP代碼值保存到.txt文件:

<?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. 
?> 

我我試過這個PHP代碼將值發佈到MySql數據庫,並且它不工作。我的桌子已經安裝好了;我只需要現在獲取我桌子上的滑塊值。

這並沒有爲我工作代碼:

<?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"; 
    } 
    } 

任何幫助將不勝感激!

+0

你在哪裏發佈這個? 'if(isset($ _ POST ['submitattr'])){'也注意SQL注入。在將這些值插入數據庫之前,您必須對這些值進行清理。 – Mike

+0

你調試了你的查詢嗎? –

回答

0

您的php文件中的$ _POST值與您發佈的內容不匹配。它看起來像你在你的JavaScript張貼t1,t2,t3 ...但你正在尋找$_POST['stress']$_POST['desire'],等您的PHP文件。也找不到你發送的地址submitattr。還要小心SQL注入!

試試這個:

<?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"; 
    } 
    } 
?> 

也添加到您的HTML提交按鈕:

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

並添加到您的Ajax調用

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

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

});