title: Javascript slider value to database
body: <p>First off, i'm sure this question has already been answered in one way or another, and I have found a few leads, but since I am kind of lost when it comes to javascript, I can't seem to figure it out. Therefor I require a bit of help.</p>
  
  <p>Here goes:</p>
  
  <p>I have a form that contain a jQuery UI range slider with the min and max values in two different input fields. (Modified version of this: <a href="https://jqueryui.com/slider/#range" rel="nofollow noreferrer">https://jqueryui.com/slider/#range</a>)</p>
  
  <p>When I press the 'Set' button I would like the two values from the jQuery range slider to get posted to the php document and then update my database. I am unsure how to do this. The code below isn't doing the trick.</p>
  
  <p>Here is my HTML and Javascript. The PHP document is found further down.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  
  &lt;center&gt;
  
  &lt;header id="layout_header"&gt; &lt;/header&gt;
  
  &lt;article id="layout_section_1"&gt; &lt;/article&gt;
  
  &lt;article id="layout_section_2"&gt;
  
  &lt;form action="foo.php" method="post"&gt;
  
      &lt;input type="text" id="amount" class="input-field" readonly style="width: 60px;"&gt;
  
      &lt;div id="slider-range"&gt;&lt;/div&gt;
  
      &lt;input type="text" id="amount2" class="input-field" readonly style="width: 60px;"&gt;
  
  &lt;input name="submit" type="submit" value="Set"&gt;
  
  &lt;/form&gt;
  
  &lt;/article&gt;
  
  
  &lt;article id="layout_section_3"&gt; &lt;/article&gt;
  
  &lt;article id="layout_section_4"&gt; &lt;/article&gt;
  
  &lt;footer id="layout_footer"&gt;&lt;/footer&gt;
  
  &lt;/center&gt;
  
  
  &lt;!-- Place any per-page javascript here --&gt;
  
  &lt;script&gt;
    $( 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 ) 
  + "%" );
        });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the PHP document:</p>
  
  <pre><code>&lt;?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-&gt;connect_error) {
      die("Connection failed: " . $conn-&gt;connect_error);
  } 
  
  $sql = "UPDATE table SET valueone='$valueone',valuetwo='$valuetwo'";
  
  $conn-&gt;close();
  }
  ?&gt;
  </code></pre>