Javascript Schieberegler Wert zur Datenbank

Zunächst einmal, ich bin mir sicher, diese Frage wurde bereits auf die eine oder andere Weise beantwortet, und ich habe ein paar Leads gefunden, aber da ich irgendwie verloren bin, wenn es um Javascript geht, kann ich Ich finde es nicht heraus. Daher benötige ich ein bisschen Hilfe.Javascript Schieberegler Wert zur Datenbank

Hier geht:

ich eine Form haben, die eine jQuery UI Bereichsschieberegler mit der minimalen und maximalen Werte in zwei verschiedenen Eingabefeldern enthalten. (Geändert von dieser Version: https://jqueryui.com/slider/#range)

Wenn ich die 'Set'-Taste drücke, möchte ich, dass die beiden Werte aus dem jQuery-Bereich-Slider auf das php-Dokument hochgeladen werden und dann meine Datenbank aktualisieren. Ich bin mir nicht sicher, wie ich das machen soll. Der folgende Code ist nicht geeignet.

Hier ist mein HTML und Javascript. Das PHP-Dokument finden Sie weiter unten.

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

Hier wird das Dokument PHP ist:

<?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(); 
} 
?>

Quelle

2017-05-25 Marc

WHERE foo = bar' Wirklich? –

Willkommen bei Stack Overflow. Ich sehe, Sie verpassen Rückrufe für den Button. Was hast du probiert? Wir können Ihnen mit Ihrem Code helfen; Leute werden es nicht für dich schreiben. Willst du es '$ .post()' oder willst du '.submit()' das Formular? Du musst klarer sein. Und ja, diese spezifische Frage ist mir sicher schon beantwortet worden. – Twisty

Zum Beispiel: https://stackoverflow.com/questions/9694608/submitting-a-form-using-input-type-button – Twisty

Sie eine AJAX-Stil Aktivität Unter der Annahme, können Sie $.post() verwenden. Dies wird wie folgt aussehen:

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; 
    }); 
});

Testbeispiel: https://jsfiddle.net/Twisty/thnfgn0w/

In Bezug auf Ihre PHP, es ist anfällig für SQL Injection. Sie sollten sicherstellen, dass Sie sich in Ihrem Code davor schützen. Ich würde Ihnen raten, so etwas wie:

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(); 
} 
?>

Quelle

2017-05-25 17:45:29 Twisty

Javascript Schieberegler Wert zur Datenbank

Antwort

Verwandte Themen