0

jQuery ui スライダーを使用して簡単なページを作成しています。目標は簡単に達成できます。ユーザーがスライダーを動かし、[送信] ボタンをクリックすると、Ajax を使用して値が DB に保存されます。

私の問題は、実際にはDBに値が保存されていないことです。

そう: スライダー + PHP フォーム + Ajax

私のばかげたコードを完全に書き直した後、私の目標を達成するためのより良い方法がある場合は、それを実行してください。

これは私のコードです:

インデックス.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";
  };?>
4

2 に答える 2

0

PHP側でCatch itに変更してみてvar dataString = 'name='+name; くださいvar dataString = {name:name};$name = $_POST['name'];

また、attr() を使用するのではなく、val(new_val) でフォーム フィールドの値を更新します。変更イベントのコードは次のようになります。

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

于 2013-06-20T18:47:06.610 に答える
0

あなたは隠されていないjqを介して名前を送信しています

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

INSERT INTO slivalui (field name) VALUES ('$name');
于 2013-06-20T19:27:08.480 に答える