Javascript滑動值到數據庫

首先，我敢肯定這個問題已經以某種方式得到了回答，並且我找到了一些線索，但是因爲我對javascript有點迷茫，所以我可以似乎沒有弄明白。因此，我需要一些幫助。Javascript滑動值到數據庫

這裏所說：

我有包含一個jQuery UI範圍滑塊與兩種不同的輸入字段中的最小值和最大值的形式。（修改後的版本：https://jqueryui.com/slider/#range）

當我按下'Set'按鈕時，我想將jQuery範圍滑塊中的兩個值發佈到php文檔中，然後更新我的數據庫。我不確定如何做到這一點。下面的代碼沒有做到這一點。

這是我的HTML和Javascript。 PHP文檔可以在下面找到。

<html> 
<head></head> 
<body> 

<center> 

<header id="layout_header"> </header> 

<article id="layout_section_1"> </article> 

<article id="layout_section_2"> 

<form action="foo.php" method="post"> 

    <input type="text" id="amount" class="input-field" readonly style="width: 60px;"> 

    <div id="slider-range"></div> 

    <input type="text" id="amount2" class="input-field" readonly style="width: 60px;"> 

<input name="submit" type="submit" value="Set"> 

</form> 

</article> 


<article id="layout_section_3"> </article> 

<article id="layout_section_4"> </article> 

<footer id="layout_footer"></footer> 

</center> 


<!-- Place any per-page javascript here --> 

<script> 
    $(function() { 
     $("#slider-range").slider({ 
      range: true, 
      min: 0, 
      max: 100, 
      values: [ 20, 80 ], 
      slide: function(event, ui) { 
      $("#amount").val(ui.values[ 0 ] + "%"); 
      $("#amount2").val(ui.values[ 1 ] + "%"); 
      } 

     }); 
     $("#amount").val("" + $("#slider-range").slider("values", 0) 
+ "%"); 
     $("#amount2").val("" + $("#slider-range").slider("values", 1) 
+ "%"); 
     }); 
</script> 

</body> 
</html>

這裏是PHP文件：

<?php 
if(isset($_POST["submit"])){ 
$servername = "server"; 
$username = "user"; 
$password = "pass"; 
$dbname = "db"; 
$valueone = $_POST['amount']; 
$valuetwo = $_POST['amount2']; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "UPDATE table SET valueone='$valueone',valuetwo='$valuetwo'"; 

$conn->close(); 
} 
?>

來源

2017-05-25 Marc

'其中foo = bar'真的嗎？ –

歡迎來到Stack Overflow。我看到你錯過了按鈕的回調。你有什麼嘗試？我們可以幫助您處理您的代碼;人們不會爲你寫。你想把它放在'$ .post（）'還是你想把'.submit（）'形式？你需要更清楚。是的，我確信這個具體問題已經被回答過了。 – Twisty

例如：https://stackoverflow.com/questions/9694608/submitting-a-form-using-input-type-button – Twisty

假設你想要一個AJAX風格的活動，您可以使用$.post()。這將是這樣的：

的JavaScript

$(function() { 
    $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    values: [20, 80], 
    slide: function(event, ui) { 
     $("#amount").val(ui.values[0] + "%"); 
     $("#amount2").val(ui.values[1] + "%"); 
    } 

    }); 
    $("#amount").val("" + $("#slider-range").slider("values", 0) + "%"); 
    $("#amount2").val("" + $("#slider-range").slider("values", 1) + "%"); 
    $("form[action='foo.php'] [type='submit']").button(); 
    $("form[action='foo.php']").submit(function(e) { 
    e.preventDefault(); 
    var myData = { 
     submit: true, 
     amount: $("#slider-range").slider("values", 0), 
     amount2: $("#slider-range").slider("values", 1) 
    }; 
    $.post($(this).attr("action"), myData, function(result) { 
     alert("Values Saved."); 
    }).fail(function() { 
     alert("Error"); 
    }); 
    return false; 
    }); 
});

測試例：https://jsfiddle.net/Twisty/thnfgn0w/

在問候你的PHP，很容易感染SQL Injection。您需要確保在代碼中防止出現這種情況。我建議是這樣的：

PHP

<?php 
if(isset($_POST["submit"])){ 
    $servername = "server"; 
    $username = "user"; 
    $password = "pass"; 
    $dbname = "db"; 
    $valueone = (int)$_POST['amount']; 
    $valuetwo = (int)$_POST['amount2']; 
    // Create connection 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    // Check connection 
    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 
    if ($stmt = $conn->prepare("UPDATE table SET valueone='?',valuetwo='?'"){ 
     $stmt->bind_param("ii", $valueone, $valuetwo); 
     $stmt->execute(); 
     $stmt->close(); 
    } 
    $conn->close(); 
} 
?>

來源

2017-05-25 17:45:29 Twisty

Javascript滑動值到數據庫

回答

相關問題