Question

我正在用jQuery ui滑块构建一个简单的页面。目标很容易实现：用户移动滑块，然后他/她点击“提交”按钮并使用Ajax将值存储在DB中。

我的问题是，实际上DB中没有保存任何值。

所以：Slider + PHP表单+ Ajax

如果在完全重写我的愚蠢代码后有更好的方法来实现我的目标，请执行此操作。

这是我的代码：

的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";
  };?>

Answer 1

尝试更改var dataString = 'name='+name; 到var dataString = {name:name}; 使用$name = $_POST['name'];

在PHP端捕获它

另外：用val（new_val）更新表单字段值，而不是使用attr（）;您的更改活动中的代码应为：

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

Answer 2

你通过jquery发送名字而不是隐藏

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

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

jqueryUI滑块值未保存到DB中

2 个答案: