jqueryUI Slider Value isn't saved into DB

Question

I am building a simple page with jQuery ui slider. The goal would be easy to reach: User moves the slider, then he/she clicks on Submit button and using Ajax the value is stored in DB.

My problem is that actually no value is saved in DB.

So: Slider +PHP form + Ajax

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

This is my code:

Index.php

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UI test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <style type="text/css"> 
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}


        </style> 
</head>
<body>  
    <div class="slider"></div> 
    <div id="slider-result">50</div>   
    <form method="post">
        <input type="hidden" id="hidden" name="hidden" class="pasui"/>
        <input type="button" id="bottone" value="Send data">
    </form>
    <script>
        $( ".slider" ).slider({
            animate: true,
            range: "min",
            value: 50,
            min: 10,
            max: 100,
            step: 10,
            //this gets a live reading of the value and prints it on the page
            slide: function( event, ui ) {
                $( "#slider-result" ).html( ui.value );
            },
            //this updates the hidden form field so we can submit the data using a form
            change: function(event, ui) { 
                $('#hidden').attr('value', ui.value);
            }
        });
        $("#bottone").click(function(e) {
            e.preventDefault();
            var name = $("#hidden").val(); 
            /* var last_name = $("#last_name").val();*/
            var dataString = 'name='+name;
            $.ajax({
                type:'POST',
                data:dataString,
                url:'scrividb.php',
                success:function(data) {
                    alert(data);
                }
            });
        });
    </script> 
    <div id="risultato"></div>
</body>
</html>

scrividb.php

<?php
$link = mysql_connect('localhost', 'username', 'pass');
$database = testui;

mysql_select_db($database,$link); 

$name = $_POST['hidden'];
  $insert = "insert into slivalui values('$name')";
  if(mysql_query($insert)) {
   echo "Success, value:".$name."";
  } else {
   echo "Cannot Insert";
  };?>

Ecropolis · Answer 1 · 2013-06-20T19:18:57.317

0

Try changing your var dataString = 'name='+name; to var dataString = {name:name}; Catch it on the PHP side with $name = $_POST['name'];

ALSO: update form field values with val(new_val) rather than using attr(); Code in your change event should be:

change: function(event, ui) { $('#hidden').val(ui.value); //set value of form field }

edited Jun 20 '13 at 19:18

answered Jun 20 '13 at 18:47

Ecropolis

2,005
2
22
27

also just to note that you should protect your user input data with `$name = mysql_real_escape_string($_POST['name']);` see http://php.net/manual/en/function.mysql-real-escape-string.php – Ecropolis Jun 20 '13 at 18:50
you have no `value=""` on hidden field – amigura Jun 20 '13 at 18:56
Still receiving: cannot insert – Downloadtaky Jun 20 '13 at 18:57
@amigura I have no value because it is dinamically generated by the slider – Downloadtaky Jun 20 '13 at 18:58
Debug time. Check if expected value is being posted. See http://stackoverflow.com/questions/4423061/view-http-headers-in-google-chrome. If that is good, you know the problem is on the php side. If you hard code $name in your sql statement to a string; does it insert? Your INSERT may need to be more verbose.`INSERT INTO table_name (which_column) VALUES ($name);` – Ecropolis Jun 20 '13 at 19:05
Updated answer. Noticed you are setting a value with attr. You should use val(new_val). For reference http://stackoverflow.com/questions/8312820/jquery-obj-val-vs-obj-attrvalue – Ecropolis Jun 20 '13 at 19:11
@Ecropolis using network tab it seems nothing is passed. You can try it here: http://fisf.me/slide/ – Downloadtaky Jun 21 '13 at 09:22
Did you resolve? If you want to share it again. I would be willing to take a look at it again. – Ecropolis Jun 27 '13 at 20:06

score 0 · Answer 2 · answered Jun 20 '13 at 19:27

0

you are sending name throu jq not hidden

$name = mysql_real_escape_string($_POST['name']);

INSERT INTO slivalui (field name) VALUES ('$name');

answered Jun 20 '13 at 19:27

amigura

541
3
6

jqueryUI Slider Value isn't saved into DB

2 Answers2