php - jqueryUI Slider Value isn't saved into DB -

I am creating a simple page with jQuery UI slider. The goal will be easy to reach: The user transfers the slider, then clicks on the submit button and deposits in DB using AJAX.

My problem is that there really is no value left in DB.

Then: Slider + PHP form + Ajax

If there is a better way to achieve my goal after rewriting my silly code, please do it.

This is my code:

Index.php

  & lt ;! DOCTYPE & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Meta http-equiv = "content-type" content = "text / html; charset = UTF-8" /> & Lt; Title & gt; UI test & lt; / Title & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" & gt; & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; #Container {Background: URL (BG.JPG)! Important; Padding: 100px 50px 0px 50px; } / * Slider background * / .slider {width: 230px; Height: 11px; Background: url (slider-bg.png); Status: Relative; Margin: 0; Padding: 0 10px; } / * Style for slider button * / .ui-slider-handle {width: 24px; Height: 24px; Status: Completed; Top: -7px; Margin-left: -12px; Z-index: 200; Background: url (slider-button.png); } / * Result div where slider value is displayed * / # slider-result {font-size: 50px; Height: 200px; Font-family: aerial, helvetica, sense-serif; Color: #fff; Width: 250px; Text-align: center; Lesson: 0 1px 1px # 000; Font-weight: 700; Padding: 20px 0; } / * This fill color color is / / .ui-widget-header {background: url (fill.png) No-repeat left; Height: 8px; Left: 1px; Top: 1px; Status: Completed; } A {framework: none; -moz-outline style: none; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "slider" & gt; & Lt; / Div & gt; & Lt; Div id = "slider-result" & gt; 50 & lt; / Div & gt; & Lt; Form method = "post" & gt; & Lt; Input type = "hidden" id = "hidden" name = "hidden" class = "favorite" /> & lt; Input type = "button" id = "bottone" value = "send data" & gt; & Lt; / Form & gt; & Lt; Script & gt; $ (".slider"). The sliders get a live reading of the value and print it on the page slide: Functions (events, events, events, events, events, events, events, etc.): Slider ({Live: "minimum", value: 50, min: 10, max: 100, phase: 10, //) UI) {$ ("# slider-result"). Html (ui.value);}, updates this hidden form field so that we can submit data using form changes: function (event, UI) {$ ('#hidden'). Ether ('value', ui.value);}}}; Click $ ("#boton") (function (e) {e.preventDefault (); var name = $ ("#hidden"). Val (); / * var last_name = $ ("# last_name") Val (); * / var datastring = 'name =' + name; $ .ajax ({type: 'post', data: data string, url: 'screwdb.fp', success: function (data) {warning (data) ;}});}); & Lt; / Script & gt; & Lt; Div id = "risultato" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 
 scrividb.php   
  & lt ;? Php $ link = mysql_connect ('localhost', 'username', 'pass'); $ Database = testui; Mysql_select_db ($ database, $ link); $ Name = $ _POST ['hidden']; $ Insert = "Insert slivalui values ​​('$ name')"; If (mysql_query (insert $)) {echo "success, value:". $ Name ""; } Else {resonant "can not be inserted"; } ;? & Gt;    
 
 
 your  var dataString = 'name =' + name; / Code> to  var dataString = {name: name}; Hold it on the PHP side with the  $ name = $ _POST ['name'];   
 Also: Update form fields with val (new_val) instead of using attr (); Your change event should contain the code:  
  Changes: Function (Event, UI) {$ ('# Hidden'). Val (ui.value); // set value of the form field}